background preloader

Plug. Para

Facebook Twitter

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.

7 ressources Javascript pour créer un site full-page 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.

9 plugins jQuery pour réaliser des effets de parallaxe

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 partie du quotidien sur le web.

La boite à outils de la parallaxe

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 et habituelles. Le déplacement de plusieurs éléments au scroll sur des couches et à des vitesses différentes donne cet effet de profondeur. 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. Peux-on imaginer qu’elle continue son développement même avec l’ampleur que prend le responsive design ? 1 – Pour commencer, quelques exemples : Les sélections de sites utilisant de la parallaxe sont fréquentes sur les blog design. Lois Jeans Mario Kart Wii Iutopi Dentsunetwork 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 (!

Effet de parallaxe sur son site – jParallax

Difference.x = virtualmouse.x - localmouse.x; difference.y = virtualmouse.y - localmouse.y;