Des effets Parallax plutôt surprenants!

Les effets Parallax dans le domaine du webdesign sont aujourd’hui devenus est phénomène de mode, alors que oui, c’est limite une technique ancestrale… C’est un peu comme le retour du pantalon slim quoi. En effet, la technique dite Parallax a toujours été utilisée dans les plus vieux des dessins animés par exemple, mais ce n’est que depuis peu, grâce à l’essor du nombre de librairies Javascripts et jQuery, que l’on voit ce style se propager sur nos navigateurs.

Etant donné que l’idée m’intéresse, que j’ai déjà un peu tâté le terrain pour voir les possibilités techniques, et effectués mes p’tites recherches persos, je vous propose une petite liste de sites utilisant des effets parallax et qui m’ont attiré l’oeil.

Soleil Noir

Effets Parallax et animations GIF

Carte de voeux pour le moins originale! Le design est réalisé avec une succession de Gifs animés, joués en fonction du déroulement de la page. L’effet est réussi, et le coup de pub qui va avec aussi!

Beercamp

beercamp

L’effet Parallax n’est pas forcément un effet horizontal ou vertical. Beercamp nous le prouve avec son site à effet « zoom ». Techniquement, c’est grossomodo la même chose, mais visuellement, c’est tout autre chose. A vous de juger!

Mohan Balaji

mohan

Plutôt un site single page que Parallax, ce portfolio nous montre comment garder un aspect minimaliste, avec un minimum d’animations et fioritures, pour un maximum d’ergonomie.

Tokio Lab

Effet parallax typographique, animations jQuery

La typo au service du Design, c’est bien connu, et depuis longtemps exploité. Pour ce qui est du webdesign, c’est plus récent. Quelques scripts et animations jQuery, et tout devient possible!

Like There Is No Tomorrow

tomorrow

Que dire à part que cet effet Parallax est des plus original, et des plus réussi. L’effet utilise des gifs animés et un effet classique parallax, pour un rendu vraiment créatif.

Nike Air Jordan

Effet parallax Gifs animés

Là où l’effet parallax a probablement le mieux trouvé sa place, c’est dans la présentation de produits, et Nike nous le prouve ici avec une démonstration technique assez impressionnante.

Kinetic

Dessin animé et effet parallax webdesign

Il est très rare de voir du dessin / croquis / sketchs animé sur le Web, parce que l’intégration n’est pas facile, et difficilement optimisable. Kinetic nous montre pourtant une expérimentation des plus réussie en la matière.

Idea Kites

responsive et parallax

Moderne, élégant, et minimaliste, l’effet parallax donne ici une meilleure optimisation graphique sur grand écrans et un plus grand impact visuel.

We Are Anonymous

portfolio parallax

Bien souvent utilisé dans des portfolios, l’effet parallax, si utilisé modérémment, ajoute forcément une petite touche en plus. L’avantage, c’est qu’il n’y à pas besoin d’en faire trop!

Emergency

Parallax et gif animation

Superbe réalisation technique mêlant dessin, animation, parallax, couleurs, changements de plans et de sens de défilement, on nous raconte une petite histoire, ça se regarde tout seul!

Alagoas

alagoas

Le design est osé, les couleurs sont pops, l’effet parallax est là, c’est simple et réussi.

Tinke

tinke parallax fiche produit

Une autre démonstration Parallax au service de la présentation d’un produit. Forcément, ça permet plein de choses.

Panasonic Lambdash DNA

lambdash dna parallax effect

Des effets à la fois classes et impressionants, des intéractions et animations dans tous les sens, et pourtant, ça passe bien!

Ok-Studio

ok-studio

Contrairement au précédent, l’effet est ici tout simple, c’est disons la base du parallax, et cela suffit pourtant à raconter quelque chose tout en dégageant une image originale.

Driver Club

driver

Voilà ce que ça donne quand on veut faire du US style, en mode bien chargé, bien lourd qui décoiffe comme dans Die Hard 4 ^^

Dentsu

dentsu

Portfolio single page d’une agence, effet parallax minimalist sur les fond et les textes. le tout rend très bien, tout en restant léger.

Des effets Parallax à nous montrer ?

N’hésitez pas à laisser un commentaire avec le lien de votre blog / site, et je le rajouterai à cette liste avec plaisir!