Material Design Lite
Ariel Flesler: jQuery.ScrollTo
Notice I've pretty much stopped updating this blog, but the plugin development is still on-going. You can find the link to the Github project page at the bottom of the article. Introduction An article about animated scrolling with jQuery inspired me to make a small, customizable plugin for scrolling elements, or the window itself. How to specify what to scroll ? Simple, all the matched elements will be scrolled, for example: $('div.pane').scrollTo(); If you need to scroll the window (screen), then use: $.scrollTo(); How to specify where ? Settings Getting the real scrollable element out of a node In order to find the real element whose attributes will be animated, you need to call $.fn. $(window). Manually finding the scrolling limit ScrollTo always had an internal function that calculates the scrolling limit for both axes. Overloading This plugin accepts the arguments in two ways, like $.animate(). $().scrollTo( , , ); $().scrollTo( , ); In this second case, you can specify the duration in the hash.
Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit!
IanLunn/jQuery-Parallax
ie7-js - A JavaScript library to make MSIE behave like a standards-compliant browser.
IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6. Current version: 2.1 beta4. IE7.js Upgrade MSIE5.5-6 to be compatible with MSIE7. IE8.js Upgrade MSIE5.5-7 to be compatible with MSIE8. You do not need to include IE7.js if you are using IE8.js IE9.js Upgrade MSIE5.5-8 to be compatible with modern browsers. You do not need to include IE7/IE8.js if you are using IE9.js The script only fixes images named: *-trans.png If you want the fix to apply to all PNG images then set a global variable as follows: var IE7_PNG_SUFFIX = ".png"; You must set this variable before including the IE7.js script. <script src="IE8.js">IE7_PNG_SUFFIX=".png";</script> The suffix will ignore query string parameters. var IE7_PNG_SUFFIX = ":"; By default, the PNG will be stretched (this simulates tiling). You may link directly to these files if you wish:
Nikebetterworld Parallax Effect Demo | Ian Lunn - Web Designer & Developer
A couple of months ago, I created a jQuery Vertical Parallax Demo that manipulated CSS to make multiple backgrounds move at different speeds relative to the users movement of the scroll bar. This type of effect is slowly appearing across various websites on the web, achieved using many different techniques. Nikebetterworld took the idea to a new level. In today’s tutorial, we’re going to take the original jQuery Parallax script I wrote and recreate a webpage similar to Nikebetterworld. If you’d like to see what we’ll be creating, go check out the demo or download the files. The HTML Our page will consist of 6 sections: header, footer and 4 articles. To start, at the top of the page, we’ll reference all of the JavaScript files we’ll use to make the effect work. We also need to initiate the localScroll function on the unordered list of article links that are fixed to the right of the page. Inside of our body tag, we begin with the unordered list that provides a quick link to each section.
Mootools en 30 jours : jour 1 - Introduction
Installation de Mootools 1.2 Tout d'abord, téléchargez et installez le noyau (core) de la librairie Mootools 1.2. Téléchargez la librairie Mootools 1.2 CoreUploadez la librairie de Mootools 1.2 sur votre serveur ou espace de travailFaites un lien vers la librairie Mootools 1.2 Core entre les balises de votre page - 2. Créer un fichier JavaScript externe et faire le lien vers celui-ci dans votre : A partir de là, vous pouvez utiliser l'une ou l'autre des méthodes. Placer dans le domready Les fonctions Mootools doivent être appelées dans l'évènement domready. window.addEvent('domready', function() { exampleFunction();}); Placer dans une Fonction Vous pouvez quand même placer vos fonctions en dehors du domready, puis les appeler à l'intérieur de celui-ci. var exampleFunction = function() { alert('hello')}; Description de la librairie Noyau Natif Classes Une classe JavaScript (c'est différent d'une classe CSS), est un objet réutilisable avec des fonctionnalités. Elements Utilitaires Request Plugins
Coin Slider: Image Slider with Unique Effects « Workshop
After jqFancyTransitions I decided to release new jQuery image slider plugin with more unique transitions effects. I have ideas for new effects and after I didn’t find that somebody already implement that I create Coin Slider. Thanks to you and your comments Coin Slider have lot of features that jqFancyTransitions didn’t have at the beginning. Basically it’s a latest (and improved) version of jqFancyTransitions but with new ‘fancy’ transitions effects. jqFancyTransitions slice your images in stripes, while Coin Slider slice them in squares. While I was working on this I felt like I’m on college again. For rain effect I spent few rainy hours to built it and that’s why I gave him that name. How to use Download jQuery, Coin Slider javascript file and CSS file and include them on your page: Add slider content and create one div with an id and put images and image descriptions, similar to: At the end all you have to do is to call Coin Slider: Example List of all options Notes
Buzz, a Javascript HTML5 Audio library
ScrollMagic - Demo
Simplifier vos vues avec KnockoutJS : c'est plus simple que vous pensez
Dans quelques instants, je vais vous présenter une méthode pour simplifier le développement de vos vues grâce à un framework Javascript qui va vraiment vous apporter du changement dans votre manière de travailler. Vous avez sûrement déjà essayé de coder des interfaces graphiques complexes avec des mises à jour dans tous les sens… Si je change cette dropdown, il faut mettre ce champ là à jour… Bref, nous connaissons tous ce type de mécanisme dans le Web. Pour mettre en place cette logique d’affichage, le plus simple est d’écrire du code Javascript et de le lier à des évènements des composants sur la page (par exemple l’évènement Change d’une Dropdown list ou d’une Textbox). Seulement voilà, écrire du code comme ceci « à la main » fonctionne bien quand vous avez 2 ou 3 règles à gérer. Dans cet article, je vous présente le framework KnockoutJS. Je tiens à préciser que ce framework est aujourd’hui largement utilisé et possède une grande communauté de développeurs. Exemple 1 : liaison simple
untitled
koenbok/Framer: Framer - Design interaction and animation
