Vous voulez mettre des effets parallax sur votre site web? Voici une liste des meilleures ressources gratuites que vous pouvez utiliser: Tutos, framework,plugins, webdesign, sliders !

Comme vous le savez, cela fait quelques mois que le terme “parallax” a fait son apparition. Le terme Parallax s’applique lorsque divers éléments du site (background, contenu, etc.) bougent avec une vitesse différente, créant ainsi un effet de profondeur ou de décalage.

Comme expliqué dans cet article sur les tendances en webdesign en 2014 (et sur plein d’autres sites spécialisés), le parallax design est une des tendances fortes pour le web en ce moment. Ci dessous vous trouverez une sélection de ressources (frameworks, plugin Jquery, exemples de site et tuto) pour mettre en place un webdesign parallax.

Cool Kitten Parallax scrolling Framework

Cool Kitten est un framework responsive(ensemble/base de fichiers HTML, CSS et JS) grace auquel vous pourrez créer vos webdesign et template parallax, avec un scroll vertical: Simple et Efficace !

J-Invert-Scroll framework

J-Invert-Scroll est un framework parallax “inversé” sur la base duquel vous pourrez développer vos webdesign avec un effet / travelling horizontal: Léger et flexible !

Parallax multidirectionnel

Voila un exemple original d’utilisation du script parallax de façon multi directionnelle (a la fois horizontalement et verticalement, mais aussi en diagonal) basé non pas sur le scroll mais sur le le mouvement de la souris ou de votre mobile/tablette.

Slider full page parallax vertical

Cidessous un exemple de slider parallax en “full page”: plusieurs sections avec une navigation en scroll vertical ou avec des points de pagination

Slider parallax 100% CSS3 – Images

Voila un plugin jquery qui vous permettra de mettre en place un slider d’images parallax.

Slider parallax – Tout type de contenu

Un plugin plus flexible qui vous permettra de mettre en place un slider, avec tout type de contenu (texte, image, vidéo, CTA, etc.)

Slider parallax galerie photo

Voila une autre belle utilisation de cet effet parallax; une galerie photo sous la forme d’un slider avec miniatures

Smashing magazine Parallax

Encore une ressource gratuite et complète: un site demo avec effet parallax sur les backgrounds, et les contenus images, textes et vidéos.

Tuto – Framework Bootstrap & parallax

Ci-dessous, un tuto simple et complet (en anglais) vous montrant comment installer et exploiter l’effet parallax en utilisant le framework bootstrap.

Theme WordPress parallax GRATUIT

Vous cherchez un thème WordPress parallax gratuit? ça existe! Basé sur le framework Bootstrap, Brag Themes a créé et mis à disposition un thème WordPress en téléchargement libre !

Tuto pour créer un SUPER site Parallax

Vous voulez créer un site parallax? Cet excellent tuto vous permettra de le faire étape par étape. Les explicaitons sont claires, détaillées, illustrées. Une marche à suivre étape par étape (en anglais) pour comprendre toutes les astuces et pouvoir créer votre site parallax sur mesure!