Scrollorama. Disclaimer: This is an experimental, just-for-fun sort of project and hasn’t been thoroughly tested. Design and build your site, dividing your content into blocks. Embed scrollorama.js after jQuery and initialize the plugin, passing the blocks class selector as a parameter. Target an element and animate its properties. The animation parameters you can use are: Hook into the onBlockChange event. scrollorama.onBlockChange(function() { alert('You just scrolled to block#'+scrollorama.blockIndex); }); Note: If you are not using the pinning feature, it is recommended you disable it.
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;} if (l.yorigin=='top') {l.yorigin=0;} else if (l.yorigin=='middle' || l.yorigin=='centre' || l.yorigin=='center') {l.yorigin=0.5;} else if (l.yorigin=='bottom') {l.yorigin=1;} function positionMouse(mouseport, localmouse, virtualmouse) { if (! Difference.x = virtualmouse.x - localmouse.x; difference.y = virtualmouse.y - localmouse.y; difference.sum = Math.sqrt(difference.x*difference.x + difference.y*difference.y); virtualmouse.x = localmouse.x + difference.x * mouseport.takeoverFactor; virtualmouse.y = localmouse.y + difference.y * mouseport.takeoverFactor; if (difference.sum < mouseport.takeoverThresh && difference.sum > mouseport.takeoverThresh*-1) { mouseport.ontarget=true; else { var offset; if(!
Zoom sur l'effet parallaxe. Après avoir abordé les arrière-plans extensibles (full background) nous allons continuer avec l'effet parallaxe. Cet effet graphique étant facile à comprendre et à mettre en place, vous allez pouvoir créer rapidement un site original. Ce tutoriel va utiliser jQuery ainsi que le plug-in jQuery-Parallax. Qu'est-ce que l'effet parallaxe ? Il s'agit d'un terme générique correspondant au déplacement de plusieurs éléments sur des couches et à des vitesses différentes. Au scroll (défilement de la vue) ou en fonction des coordonnées de la souris, les positions des différents fonds (ou éléments à animer) vont changer, ce qui va générer un effet de profondeur. Des exemples Utilisant le positionnement de la souris digitalhands.net bikingboss.com Utilisant le niveau du scroll nikebetterworld.com ok-studios.de driver-club Principe et théorie Grâce à l'utilisation de JavaScript, il est possible de déplacer les éléments par rapport à la position de la souris ou du niveau de défilement (scroll).
En pratique. CSS3 – Effet parallaxe (sans JavaScript) Retour des tutoriels CSS avec quelque chose d’un peu original pour cet article : un effet parallaxe uniquement en CSS3. C’est à la suite de l’article de Simon Kern sur Alsacréations que m’est venue l’envie de tenter d’utiliser CSS pour reproduire cet effet initialement conçu avec JavaScript. L’article zoom sur l’effet parallaxe de Simon est bien conçu, je vous invite à le lire si vous préférez l’utilisation de jQuery, ou si vous souhaitez découvrir une alternative ou un complément à ce tutoriel. J’en profite pour remercier Simon qui m’a autorisé à reprendre son design ainsi que la base du code qu’il a conçu pour l’article sur Alsacréations. Démonstration Place à l’explication ! Concept Pour réaliser cet effet il nous faut plusieurs éléments qui vont nous permettre de simuler différents plans. Lorsque un tel effet est mis en place sur un site web, il l’est souvent pour offrir une transition originale entre deux vues, un peut comme lors d’un diaporama pour passer d’une slide à l’autre.
<! Showcase of Parallax Usage in Web Design. The use of the parallax effect or parallax scrolling effect in websites can add a nice three dimensional depth illusion to the design and make the visit very interesting to a user. We have collected some creative examples of the parallax effect in web design. Enjoy! Rastapé Besides creating a lot of depth with the […] The use of the parallax effect or parallax scrolling effect in websites can add a nice three dimensional depth illusion to the design and make the visit very interesting to a user.
We have collected some creative examples of the parallax effect in web design. Enjoy! Rastapé Besides creating a lot of depth with the design itself which shows a bar or venue, the parallax effect gives it the ultimate kick when moving the mouse! Old Pulteney Row to the Pole Here we have a great example of the parallax scrolling effect, where the background moves “slower” then the content when the page is scrolled down. Billy’s Downtown Diner Webdesign Karlsruhe EMM and ENN Xhtml Slicing Head2Heart.