Défilement horizontal et vertical

Présentation

Pour pouvoir utiliser un maximum d'espace, surtout sur mobile, le défilement est indispensable.

Deux catégories : Le défilement horizontal et le défilement vertical

En mode mobile vous avez accès à chaque catégorie par un insert au milieu droit de l'écran

Je vous propose 16 solutions au

 

Défilement horizontal

Argyle Adam - Horizontal

Caractéristiques

  • CSS pur
  • Codage minimum avec l'utilisation de 'flexbox', excellent exemple
  • Défilement [Desktop: Barre basse de navigation] [Mobile: Doigt]
  • Seattle, USA

Image cliquable pour voir l'exemple

Scroll des images

Références

Site web

[Créé / modifié] [27-10-2021 / 27-10-2021]

Argyle Adam - Horizontal (2)

Caractéristiques

  • CSS pur
  • Codage avec l'utilisation de 'grid' et du point d'accroche
  • Défilement [Desktop: Barre basse de navigation] [Mobile: Doigt]
  • Seattle, USA

Image cliquable pour voir l'exemple

Scroll des images

Références

Site web

[Créé / modifié] [27-10-2021 / 27-10-2021]

Artem - Horizontal

Caractéristiques

  • Bootstrap 4
  • Codage minimum avec l'utilisation de 'Bootstrap', excellent exemple
  • Défilement [Desktop: Barre basse de navigation] [Mobile: Doigt]
  • Réaction au survol
  • Kiev, Ukraine

Image cliquable pour voir l'exemple

Scroll horizontal des images avec Bootstrap

Références

Site web

[Créé / modifié] [27-10-2021 / 27-10-2021]

Brynjulfsen Havard - Horizontal

Caractéristiques

  • CSS pur
  • Superposition, à gauche, des images en utilisant la position : 'sticky'
  • Défilement [Desktop: Ascenseur] [Mobile: Doigt]
  • Bergen, Norvège

Image cliquable pour voir le slider

Carrousel avec superposition des images

Références

Site web

Site de l'auteur

[Créé / modifié] [19-10-2021 / 19-10-2021]

Lemmin

Lemmin - Horizontal

Caractéristiques

  • CSS pur
  • Défilement [Desktop: Barre de navigation haute] [Mobile: ?]
  • Seattle, Washington, USA

Image cliquable pour voir l'exemple

Scroll horizontal avec uniquement du css

Références

Site web

[Créé / modifié] [20-11-2021 / 20-11-2021]

Maha Jiri - Horizontal

Caractéristiques

  • CSS, Normalize.css, JS, jQuery
  • Codage avec l'utilisation de balise 'ul' associée au Javascript
  • Défilement [Desktop: Flèches de navigation] [Mobile: Doigt]
  • Prague, République Tchèque

Image cliquable pour voir l'exemple

Scroll horizontal avec la balise ul et JS

Références

Site web

[Créé / modifié] [27-10-2021 / 27-10-2021]

Siewert Pascal - Horizontal

Caractéristiques

  • CSS, JS, jQuery
  • Défilement [Desktop: Roulette de la souris] [Mobile: ?]
  • Allemagne

Image cliquable pour voir l'exemple

Scroll horizontal avec l'instruction Grid

Références

Site web

[Créé / modifié] [20-11-2021 / 20-11-2021]

Vinther Dannie - Horizontal

Caractéristiques

  • CSS pur
  • Codage avec l'utilisation de 'grid' et du point d'accroche
  • Défilement [Desktop: Barre basse de navigation] [Mobile: Doigt]
  • Copenhague, Danemark

Image cliquable pour voir l'exemple

Scroll horizontal avec l'instruction Grid

Références

Site web

[Créé / modifié] [27-10-2021 / 27-10-2021]

 

Défilement vertical

Clark Keith - Vertical

- Pb sur les images

Caractéristiques

  • CSS pur
  • Défilement des images avec effet de parallaxe
  • Défilement [Desktop: Flèches, roulette] [Mobile: ?]
  • Turquie

Image cliquable pour voir l'exemple

defilement vertical

Références

Site web

[Créé / modifié] [10-11-2021 / 10-11-2021]

Erdem Muhammed - Vertical

Caractéristiques

  • CSS, Normalize.css, JS, jQuery, Smooth-scrollbar.js, Overscroll.js
  • Donc pas mal de dépendances
  • Défilement [Desktop: Flèches; Roulette] [Mobile: Doigt]
  • Turquie

Image cliquable pour voir l'exemple

defilement vertical

Références

Site web

[Créé / modifié] [27-10-2021 / 27-10-2021]

Kirsch Christophe - Vertical

Caractéristiques

  • CSS, Bootstrap.css, JS, jQuery
  • Défilement avec repères sur la barre de progression
  • Tressaute à chaque remplacement de section, dommage !
  • Paris

Image cliquable pour voir l'exemple

defilement vertical

Références

Site web

[Créé / modifié] [15-11-2021 / 15-11-2021]

Landberg Jesper - Vertical

Caractéristiques

  • CSS, JS
  • Défilement fluide avec des sections
  • Floutage lors d'un scoll entre deux sections
  • Défilement [Desktop: Ascenseur; Roulette] [Mobile: Doigt]
  • Linkoping, Suède

Image cliquable pour voir l'exemple

defilement vertical sur la base de sections

Références

Site web

Site de l'auteur

[Créé / modifié] [20-11-2021 / 20-11-2021]

Renders Jerome - Vertical

Caractéristiques

  • CSS, JS
  • Effet 3D
  • Défilement [Desktop: Ascenseur; Roulette] [Mobile: Doigt]
  • Wavre, Belgique

Image cliquable pour voir l'exemple

defilement vertical avec effet 3D

Références

Site web

[Créé / modifié] [27-10-2021 / 27-10-2021]

Simone - Vertical

Caractéristiques

  • CSS pur
  • Double défilement vertical
  • Code ultra simple
  • Défilement [Desktop: Roulette] [Mobile: Doigt]

Image cliquable pour voir l'exemple

double defilement vertical

Références

Site web

[Créé / modifié] [15-11-2021 / 15-11-2021]

Winn Josh - Vertical ET Horizontal

- Extrêmement bien fait !

Caractéristiques

  • CSS, JS, jQuery
  • Responsive
  • Défilement [La colonne centrale défile à contresens des deux autres]
  • National City, Californie, USA

Image cliquable pour voir l'exemple

defilement vertical et horizontal simultanement

Références

Site web

[Créé / modifié] [05-11-2021 / 05-11-2021]

Zarza Henry - Vertical

Caractéristiques

  • CSS pur
  • Responsive
  • Défilement : Les images se chevauchent progressivement
  • Défilement [Desktop: Flèches; Roulette] [Mobile: ?]
  • Colombie

Image cliquable pour voir l'exemple

defilement vertical par chevauchement d'images

Références

Site web

[Créé / modifié] [10-11-2021 / 10-11-2021]