Navigation

Toutes les catégories

Voir les derniers articles

Inspiration : 15 effets de scroll originaux

Le scroll est aujourd’hui une des fonctionnalités les plus utilisées dans le webdesign, et c’est d’ailleurs une fonction vitale pour faciliter la...

Publié par Charlotte Chollat

Le scroll est aujourd’hui une des fonctionnalités les plus utilisées dans le webdesign, et c’est d’ailleurs une fonction vitale pour faciliter la lecture de votre site.

Depuis quelques années, les animations de contenus sont venues accompagner ce défilement, ajoutant ainsi du dynamisme aux pages web. Mais si le scroll lui-même pouvait servir à l’expérience de votre site ?

Au travers de cet article, nous vous proposons différentes façon de vous démarquer de vos concurrents et surprendre vos utilisateurs grâce à un scroll original.

Le scroll horizontal

Qui a dit que tout défilement devait être vertical ?

Avec un scroll horizontal, vous pouvez par exemple présenter vos créations en laissant ainsi une belle place pour vos images.

Animations avec scroll horizontal

Source : Onyx.net

Theme WordPress avec scroll horizontal

Source : Theme Norebro

Site avec scroll horizontal

Source : Ready Mag

Animation avec scroll horizontal

Source : Volkswagen

Si vous souhaitez intégrer vous-même cet effet à votre site, vous pouvez télécharger une extension sur jInvertScroll ou encore sur fullPage.js.

Le double scroll ou Split-Screen

Le concept est simple : votre page est divisée en deux colonnes et celles-ci défilent à une vitesse différente ou dans un sens différent.

Inspiré par les interfaces mobiles, le double scroll a vu le jour après l’apparition des mises en page en deux colonnes.

Split screen et double scroll

Source : Studio Meta

Effet double scroll

Source : Daucy

Vous pouvez intégrer le double scroll à votre site grâce à l’extension multiScroll.js.

L’effet parallaxe

Certains diront que cet effet est passé de mode mais il est tout à fait possible de le remettre au goût du jour. Jugez plutôt ces deux sites sur lesquelles un design pertinent est lié à un effet de profondeur.

Histoire avec scroll effet parallaxe

Source : The boat

Site avec scroll effet parallaxe

Source : PORSCHEvolution

Histoire avec effet parallaxe au scroll

Source : DFYnorm

Aujourd’hui, vous pouvez créer de superbes effets parallaxe grâce à skrollr.js.

Lire la suite de l'article
Afficher les commentaires (0)

Commentaires

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Articles similaires

Graphisme

10 Typographies gratuites à télécharger

Comme chaque mois, Graphiste.com vous propose une sélection de 10 plus belles typographies qui ont fait leur apparition sur le net. Ces polices d’écriture sont...

Publié le par Thomas Lazzaroni
Graphisme

Photoshop : 34 raccourcis clavier pour gagner du temps

Photoshop est un outil compliqué qui regorge de fonctionnalités. Et pour éviter de passer des heures à effectuer la moindre tâche, il peut...

Publié le par Leo Chatillon