• A la une
  • Catégories
  • Dossiers
  • Rédacteurs
  • +

25 sites utilisant un effet de parallaxe original

par Vincent Ginetle 27/05/2011

Aujourd'hui le Blog du Webdesign s'intéresse à la nouvelle tendance de plus en plus présente dans le web design, découvrez l'effet parallaxe avec notre sélection de sites web originaux. Pour commencer intéressons nous à sa définition.

Qu'est ce qu'un effet de parallaxe ?

La parallaxe est l’incidence du changement de position de l’observateur sur l’observation d’un objet. En d'autres termes, la parallaxe est l'impact (ou l'effet) de changement de position de l'observateur sur un objet observé.

source http://fr.wikipedia.org/wiki/Parallaxe

L'effet de parallaxe dans la conception web est la technique qui permet de faire déplacer des images disposées sous différentes couches. L'interaction se fait à partir de la souris ou du scroll afin de créer un effet de vitesse/perspective pour donner une illusion agréable et intéressante de 3D

Nous vous proposons de découvrir 25 exemples de sites Web originaux qui utilisent l'effet de parallaxe pour vous inspirer et ainsi proposer une expérience interactive à vos utilisateurs.

Dezup

( Projet du Blog Du Webdesign ^^ )

Dezup web design interactif

Chemicalromance

chemicalromance

Iutopi

iutopi webdesign parallaxe

The Chase

The Chaise site web

Digital hands

digital hands web design

Bikingboss

bikingboss

Raffaelstueken

raffael stueken Webdesign

Coca-cola

coca-cola parallaxe

Egopop.net

egopop parallaxe

Campaignmonitor.com/hiring

campaignmonitor

Demodern

demodern web design

Resolutionim

resolutionim Web design

The chris box

the chris box fond en parallaxe

Ap-o

ap o site web folio

Tedx Portland

tedxportland

unfold

Unfold Studio créatif avec parallaxe

Manufacture d'Essai

manufacture dessai design web

Nike better world

nike better world web design avec parallaxe et photographie de la marque nike

Rowtothepole

rowtothepole

Netlash-bseen.be

netlash-bseen

Culturalsolutions

Webdesign trends

Thebeatlesrockband

the beatles rock band

La gente ha dicho si

agentehadichosi

Davegamache

davegamache portfolio

Billysdiner

billysdiner

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Vincent voir son blog

Passionné par le Web, les Arts Graphiques et les installations numériques, je travaille actuellement dans l'agence Dezup que nous avons créé avec l'équipe du BlogDuWebdesign.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte

26Commentaires

  • Avatar_thumb
    Jérémy MATUR

    le 27/05/2011 | #1

    Panel de site bien sympa. Pressé de voir le nouveau projet du BlogduWebdesign

    • Avatar_thumb
      Dylan Patenotte

      le 27/05/2011 | #2

      Un autre site sympa en parallaxe:

      http://www.terredevenements.com

    • Avatar_thumb
      Laurent

      le 27/05/2011 | #3

      Beaucoup de copié/collé...
      Certains sites sont superbes. Merci pour ce beau travail de sélection.

    • Avatar_thumb
      jérôme

      le 27/05/2011 | #4

      comme d'hab très belle selection, je sais pas combien de temps tu passes a faire ca par jour, mais j'espere que tu dors un peu quand meme

    • Avatar_thumb
      Vincent Ginet

      le 27/05/2011 | #5

      @Laurent : en effet dans cette liste on retrouve une bonne partie des sites qui se sont très inspirés du site de Nike. C'est dommage car on peut faire beaucoup de choses plus originales avec l'effet parallaxe...

      @Jerome : les articles se font petit a petit, ça faisait depuis 3 semaines que je récoltais les sites croisés durant ma veille ;)

    • Avatar_thumb
      MARTIN Thibault

      le 27/05/2011 | #6

      Punaise, c'est vraiment impressionnant. Tous ces sites sont de qualité même si y'en a pas vraiment qui sortent du lot.

      C'est vrai que c'est un effet assez cool, mais pas super intuitif je pense pour un internaute Lambda. On y viendra surement assez rapidement grâce au HTML5 et CSS3.

      Merci pour cette belle sélection en tout cas !

    • Avatar_thumb
      Romain Calix

      le 29/05/2011 | #7

      très beau, j'aime bien iutopi

    • Avatar_thumb
      Jobri

      le 30/05/2011 | #8

      Génial l'effet ! J'avais déjà vu ça sur certain sites et je me disais "Waw, c'est un petit effet qu'on ne voit pas au premier coup d'oeil mais mine de rien c'est original et j'aime bien !"

      Mais je pense qu'il faut l'utiliser à petite dose, ce qui rend très bien sur le site digitalhands par exemple. Par contre je ne suis pas fan du système où il faut scroller.

    • Avatar_thumb
      Mouseevent Webdesign Berlin

      le 31/05/2011 | #9

      Wow, great list, thanks! Some of them (billysdiner) really inspired me for my current project.

    • Avatar_thumb
      nova média

      le 03/06/2011 | #10

      C'est donc ca je ne savais pas comment cela s'appellait merci la technologie adieu Flash

    • Avatar_thumb
      Webdesign Xtra Conception

      le 18/06/2011 | #11

      Celle de davegamache est particulièrement réussi. Ca donne envie de s'y mettre !

    • Avatar_thumb
      Ludivine

      le 06/07/2011 | #12

      Effectivement tous ces sites sont magnifiques.
      Je voulais me servir de ce système pour ma prochaine version, mais de voir que cela fonctionne très mal sur mobiles et tablettes me fait réfléchir.

    • Avatar_thumb
      Arnaud

      le 01/09/2011 | #13

      Très bonne sélection !

      Je m'étais intéressé à ce genre de site aussi il y a quelques mois, j'avais fais un article où je m'étais des exemples de sites aussi et on ne retrouve pas les même justement.
      :)
      http://www.arnaud-olivier.fr/exemples-de-site-internet-avec-defilement-parallax/

    • Avatar_thumb
      Gabor

      le 02/05/2012 | #14

      Le plus impressionant est quand le même site de la Nouvelle Zelande, il faudrait le rajouter à la liste :
      http://www.newzealand.com/nouvelle-z%C3%A9lande/

    • Avatar_thumb
      Aurélien Durand

      le 30/10/2012 | #15

      Une créa perso utilisant un plug parralax-like (FreshD, super scrip mais payant) pour l'anim du header:
      http://www.goldenprophets.com

    • Avatar_thumb
      Victor

      le 31/01/2013 | #16

      Moi j'aime bien celui ci http://www.wyomind.com
      l'effet est discret mais joue sur la profondeur (euh ... c'est bien du parallalax ?)

    • Avatar_thumb
      Olivier C

      le 22/02/2013 | #17

      Aucun de ces sites ne valent celui-ci sur l'effet parallaxe : http://www.thesearethings.com/

    • Avatar_thumb
      Laure D

      le 26/04/2013 | #18

      Super selection, bravo ! J'adore cet effet, je voudrais refaire mon site et je suis tombée sur celui-ci : www.epousemoicocotte.com visiblement ça doit être un template wordpress car il est très semblable au site de The chris box ! Est-ce que quelqu'un le connaiT ?? J'ai beau chercher je ne trouve pas ce template. Merci d'avance.

    • Avatar_thumb
      romain Renoux

      le 21/05/2013 | #19

      un autre site utilisant le parallax : www.julien-sunier.com

    • Avatar_thumb
      Golf in france

      le 15/07/2013 | #20

      Un autre parallaxe sympa en présentation de contenu imagé :
      http://privategolfkey.com/la-france-terre-de-golfs/

    • Avatar_thumb
      Jérôme

      le 26/09/2013 | #21

      Pour moi le meilleur reste celui de l'armée de Terre: http://www.recrutement.terre.defense.gouv.fr/parallaxe

    • Avatar_thumb
      Marie

      le 31/10/2013 | #22

      C'est pas croyable de développer ds parallaxes aussi beaux. Je ne connaissais pas cette technologie, mais je dois dire que c'est tout simplement énorme. bravo à son concepteur.

    • Avatar_thumb
      jamie

      le 08/07/2015 | #23

      youpi

    • Avatar_thumb
      seb

      le 21/10/2016 | #24

      celui ci aussi : http://www.referencement-lyon-69.fr

    • Avatar_thumb
      Catherine

      le 10/11/2016 | #25

      Super sélection !

      Je ne sais plus comment, mais j'étais tombée sur ce site, que j'ai mis de coté dans mon dossier "inspi parallax" :

      www.mksgraphisme.com

    • Avatar_thumb
      audrey

      le 02/12/2016 | #26

      C'est possible vous croyez sur ce site de le mettre en place : http://www.animalerieenligne.fr

      C'est un site ecommerce mais je ne sais pas si ca se fait ca en expérience utilisateur boutique en ligne

    Ecrire un commentaire

    captcha

    twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
    twitter bird
    Ouvrir