7 ressources Javascript pour créer un site full-page ou parallax. Aujourd'hui sur le Blog du Webdesign, découvrez 7 ressources javascript et jQuery pour créer des sites fullpage ou parallax.
Une des grosses difficultés à gérer sur les sites de type full page, ou en construction au scroll est que tous les utilisateurs n'ont pas tous la même résolution d'écran. Comment, dans ces conditions-là, faire en sorte que les sections de pages ressemblent toutes exactement à la maquette, fournis dans une seule taille, évidemment ? En utilisant les bonnes ressources pardi ! Pour vous simplifier la tâche sur votre prochain projet de ce type, le Blog du Webdesign a déniché pour vous 7 ressources vous permettant de faire divers types de sites full-page ou parallax. Parallax.js Parallax.js, comme son nom ne l'indique pas, n'est pas spécialisé dans le parallax mais dans la création de navigation entre "écrans" de taille définis.
One Page Scroll Cette ressource javascript vous permettra de mettre en place un effet comparable à celui du site de l'iPhone 5S. 9 plugins jQuery pour réaliser des effets de parallaxe. Tendance désormais bien ancrée dans le paysage du webdesign, le défilement parallaxe (ou scrolling différentiel) est une technique qui consiste à donner une impression de profondeur à travers des portions de décors défilant à vitesse variable.
Voici une liste non exhaustive de 9 plugins jQuery pour mettre en place des effets de parallaxe sur votre site web. Superscrollorama, successeur de l’excellent Scrollorama, permet de réaliser de superbes animations et effets parallaxes lorsqu’on scroll sur une page web, notamment grâce aux transformations CSS3. Seulement quelques lignes de code pour un scrolling original et amusant. 2. jParallax jParallax est un plugin jQuery qui permet de mettre en place facilement un effet de parallaxe sur un groupe d’éléments HTML. 3. Curtain.js est un plugin jQuery permettant de réaliser une page web avec un défilement parallaxe des différentes sections sous forme de « panneaux ». La boite à outils de la parallaxe. Bientôt deux ans que les effets de parallaxe font parti du quotidien sur le web.
Si vous n’avez pas encore sauté le pas, c’est le moment de vous y mettre ! Petite piqure de rappel sur la parallaxe avec cet article « 11 sites avec effet de parallaxe » mis en ligne début 2011. L’effet ne date pas d’hier, utilisé sur le web à l’époque, notamment avec Flash, la parallaxe donne de la profondeur et du relief aux interfaces plates. Cet effet de profondeur est obtenu au déplacement de plusieurs éléments sur différents plans et à des vitesses différentes. L’ancien site Nike Better World avait remis l’effet au goût du jour en utilisant un subtil mélange de Javascript et d’images PNG transparentes.
Peut-on imaginer voir cette tendance se développer même avec l’ampleur que prend le responsive design ? Voici l’intérêt de cet article, qui est en quelque sorte une boite à outils et à utiles. 1 – Pour commencer, quelques exemples : Lois Jeans Mario Kart Wii Iutopi Dentsunetwork Activated Drinks Von Dutch. 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;