Effet de parallaxe sur son site – jParallax. (function(jQuery) { function stripFiletype(ref) { var x=ref.replace('.html', ''); return x.replace('#', ''); function initOrigin(l) { if (l.xorigin=='left') {l.xorigin=0;} else if (l.xorigin=='middle' || l.xorigin=='centre' || l.xorigin=='center') {l.xorigin=0.5;} else if (l.xorigin=='right') {l.xorigin=1;}
jQuery.parallax. Download git clone github.com/stephband/jparallax Instantiation jQuery( '.parallax-layer' ).parallax( options ); What does jquery.parallax do?
jParallax turns nodes into absolutely positioned layers that move in response to the mouse. With a bit of CSS you can either set up windows to see these layers through, or leave them free to roam about. The diagram on the right illustrates what jParallax does to the html: and here's a demonstration with some images: More demos demos/index.html demos/stalkbuttons.html - multiple parallax. demos/remotecontrol.html - parallax by remote control. demos/thumbnails.html - beautiful interactive thumbnails. demos/target.html - demonstrates how smoothly jParallax handles window resizing. Using jParallax The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of the mouseport. Therefore, the simplest way to use jParallax is to make the layers different sizes using CSS. Options Layer Options Events Tips. Prinzhorn/skrollr. Merry Scrolling with skrollr.js. I have a weakness for scrolling effects, I haven’t got fed up with parallax and I don’t mind scrolling up and down and from right to left and see what happens.
Recently I got impressed by the James Bond 007 Cars Evolution by Evans Halshaw. Don’t miss it if you haven’t already seen it on your desktop (the mobile experience is not the same). James Bond 007 Cars site uses a very nice plugin skrollr.js by Prinzhorn. In this tutorial I’ll use this plugin to create a funny Christmas card, I take a risk to make a very “seasonal” tutorial (it’s snowing outside).
Easily, you can adapt the same techniques for your purpose. Step 1 Prerequisites In this example I use 6 background images, two of them being repetitive patterns and a transparent .png with snow flakes that I’ll use for a subtle animation. Step 2 HTML <! Step 3 CSS You’ll find some explanation in the comments below. Step 4 Using skrollr.js Step 5 Screen 1 Step 6 Screen 2 We’ve got 2 effects on this “screen”. Step 7 Screen 3 – The Ribbon. Tuto webdesign.
Tutoriaux. Tutorials. Responsive Webdesign.