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

Références

Site web

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

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

Références

Site web

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

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

Références

Site web

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

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

Références

Site web

Site de l'auteur

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

Caractéristiques

• CSS, JS, jQuery
• Défilement [Desktop: Roulette] [Mobile: Doigt]
• Défilement avec création de bande crantée verticale
• Orlando, Floride, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [16-02-2022 / 16-02-2022]

Caractéristiques

• CSS, JS, Gsap.js, ScrollTrigger.js
• Défilement [Desktop: Roulette] [Mobile: Doigt]
• Défilement horizontal en double sens
• Mazatlan, Mexique

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [28-01-2022 / 28-01-2022]

Caractéristiques

• CSS pur
• Défilement [Desktop: Roulette] [Mobile: Doigt]
• Très très joli diaporama
• Paris

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [21-01-2022 / 21-01-2022]

Caractéristiques

• CSS, JS, Gsap.js, ScrollTrigger.js, Locomotive-scroll
• Alternance de scroll vertical et horizontal
• Défilement [Desktop: Barre de navigation haute] [Mobile: Doigt]
• Australie

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [28-01-2022 / 28-01-2022]

Caractéristiques

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

Image cliquable pour voir l'exemple

Références

Site web

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

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

Références

Site web

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

Caractéristiques

• CSS, JS, rien d'autre
• Ombres portées de chaque côté du container
• C'est aussi beau sur mobile que pas terrible sur desktop, du fait des ascenseurs
• Défilement [Desktop: Ascenseur] [Mobile: Doigt]
• Lisbonne, Espagne

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [16-02-2022 / 16-02-2022]

Caractéristiques

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

Image cliquable pour voir l'exemple

Références

Site web

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

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

Références

Site web

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

Caractéristiques

• CSS pur
• Avec "scroll-snap-stop: always", le conteneur doit "s'accrocher" dès la première position d'accroche. Ici on passe de slide en slide en se calant obligatoirement sur celui-ci
• Le passage d'un slide à l'autre est doux sur mobile et un peu violent sur desktop, bizarre !
• Défilement [Desktop: molette de la souris] [Mobile: Doigt]
• Seattle, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [05-01-2022 / 05-01-2022]

Caractéristiques

• CSS, Chosen.css, JS, jQuery, Chosen.js
• Boîte de sélection avec défilement personnalisé
• Défilement [Desktop: Roulette, ascenseur] [Mobile: Doigt]
• Belgrade, Serbie

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [16-02-2022 / 16-02-2022]

Caractéristiques

• CSS, JS, jQuery, jQuery.nicescroll.js
• Très très peu de code si on exclu jQuery
• Défilement [Desktop: Flèches; Roulette] [Mobile: Doigt]
• Katmandou, Népal

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [21-01-2022 / 21-01-2022]

Caractéristiques

• CSS, JS, Bootstrap.css (4.4.1), TweenMax.js
• Effet de scroll lent et fluide
• Défilement [Desktop: Desktop: Roulette, ascenseur] [Mobile: Doigt]

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [15-05-2022 / 15-05-2022]

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

Références

Site web

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

Caractéristiques

• CSS, JS, jQuery
• Dans l'original les indications sont cachées en mode mobile
• Défilement [Desktop: Ascenseur; Roulette] [Mobile: Doigt]
• Rome, Italie

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [21-01-2022 / 21-01-2022]

Caractéristiques

• CSS, JS, rien d'autre
• Défilement [Desktop: Ascenseur; Roulette] [Mobile: Doigt]
• Le scroll dessine une figure géométrique
• Bend, Orégon, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [25-02-2022 / 25-02-2022]

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

Références

Site web

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

Caractéristiques

• CSS, JS, jQuery, jQuery-parallax.js
• L’effet de parallaxe permet de créer de la profondeur et de l’animation à votre site
• Chicago, Illinois, USA

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [15-05-2022 / 15-05-2022]

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

Références

Site web

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

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

Références

Site web

Site de l'auteur

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

Caractéristiques

• CSS, JS, ClassList.js
• Animer les éléments à partir du moment où ils se trouvent dans la fenêtre
• L'animation cesse dès qu'ils sortent de la fenêtre
• Défilement [Desktop: Ascenseur; Roulette] [Mobile: Doigt]
• Détroit, Michigan, USA

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [08-03-2022 / 08-03-2022]

Caractéristiques

• CSS, JS, Gsap.js, ScrollTrigger.js
• Après une demi-page de scroll, défile, sur chacun des côtés, un texte en bord d'écran
• Défilement [Desktop: molette de la souris, ascenseur] [Mobile: Doigt]
• Seattle, USA

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [05-01-2022 / 05-01-2022]

Caractéristiques

• CSS pur
• L'image se présente avant le texte qui défile plus vite
• La fin du premier texte appelle la deuxième image
• Défilement [Desktop: molette de la souris, ascenseur] [Mobile: Doigt]
• Seattle, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [28-01-2022 / 28-01-2022]

Caractéristiques

• CSS, JS, Gsap.js, ScrollTrigger.js
• Scroll sur vidéo
• Défilement [Desktop: Ascenseur; Roulette] [Mobile: Doigt]
• Gauteng, Afrique du Sud

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [21-01-2022 / 21-01-2022]

Caractéristiques

• CSS, JS, jQuery, Underscore.js
• Défilement [Desktop: molette de la souris, ascenseur] [Mobile: Doigt]
• Chaque paragraphe est affublé d'un point à droite. Ce point navigue entre le haut et le bas de la fenêtre. Il est donc toujours visible à l'écran
• Excellent
• USA

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [08-03-2022 / 08-03-2022]

Caractéristiques

• CSS, JS, Tween.js, Paper.js, jQuery
• Défilement [Desktop: molette de la souris, ascenseur] [Mobile: Doigt]
• Effet gelée pour menu mobile
• Original mais lourd en dépendances
• Seattle, Washington, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [18-06-2022 / 18-06-2022]

Caractéristiques

• CSS, JS, Three.js
• Défilement [Desktop: molette de la souris, ascenseur] [Mobile: Doigt]
• Plus on scrolle plus l'image se floute, à un moment donné la suivante se mêle à la première jusqu'à apparaître seule et nette
• Étonnant !
• Edmonton, Alberta, Canada

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [08-03-2022 / 08-03-2022]

Caractéristiques

• CSS, JS, jQuery
• Défilement [Desktop: molette de la souris, ascenseur] [Mobile: Doigt]
• L'image subit un effet de zoom tout en disparaissant progressivement
• Pittsburgh, Pennsylvanie, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [25-02-2022 / 25-02-2022]

Caractéristiques

• CSS, JS, jQuery
• Les carrés se déplacent à des vitesses différentes
• Défilement [Desktop: molette de la souris, ascenseur] [Mobile: Doigt]
• Royaume Uni

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [05-01-2022 / 05-01-2022]

Caractéristiques

• CSS, Normalize.css, JS jQuery
• En même temps qu'un indicateur de progression précise la page en cours un changement d'image de fond s'effectue
• Défilement [Desktop: Ascenseur; Roulette] [Mobile: Doigt]
• Colombie

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [18-06-2022 / 18-06-2022]

Caractéristiques

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

Image cliquable pour voir l'exemple

Références

Site web

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

Caractéristiques

• CSS, JS
• Défilement vertical avec animations à l'affichage : Zoom + et -; Fondu; Retournement
• Défilement retenu sur l'image ci-dessous : Glissement (gauche, droite, bas, haut)
• Défilement [Desktop: Roulette, ascenseur] [Mobile: Doigt]
• Salvador, Bahia, Brésil

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [16-02-2022 / 16-02-2022]

Caractéristiques

• CSS, JS, rien d'autre
• Défilement vertical à double sens en simultané
• Défilement [Desktop: Souris] [Mobile: Doigt]
• Londres

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [10-04-2022 / 10-04-2022]

Caractéristiques

• CSS, JS, rien d'autre
• Défilement en courbes
• Très original
• Défilement [Desktop: Roulette] [Mobile: Doigt]
• Toronto, Ontario, Canada

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [25-02-2022 / 25-02-2022]

Caractéristiques

• CSS, JS, jQuery
• Défilement vertical avec menu devenant collant en mode desktop, menu fixe en mode mobile
• Défilement [Desktop: Roulette] [Mobile: Doigt]

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [15-05-2022 / 15-05-2022]

Caractéristiques

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

Image cliquable pour voir l'exemple

Références

Site web

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

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

Références

Site web

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

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

Références

Site web

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

Caractéristiques

• CSS pur
• Défilement assez doux jusqu'en haut
• Apparition de l'icône quasi immédiat
• Pas de rollover

Image cliquable pour voir l'exemple

Références

Site web

Voir sur FreeCodeCamp.org

[Créé / modifié] [18-06-2022 / 18-06-2022]

Caractéristiques

• CSS, JS, jQuery
• Défilement assez doux jusqu'en haut
• Apparition de l'icône après un délai
• Solution assez discrète : La couleur de la flèche est identique à celle de l'ascenseur en état 'saisi' ou 'cliqué'
• Oakland, Californie, USA

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [08-02-2022 / 08-02-2022]

Caractéristiques

• CSS, SimpleScrollUp.js (plugin)
• Défilement assez doux jusqu'en haut
• Apparition de l'icône après un délai
• Solution douce : L'icône glisse agréablement, par la droite, pour se positionner

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [08-02-2022 / 08-02-2022]

Caractéristiques

• CSS, Ue-Scroll.js (plugin)
• Défilement doux jusqu'en haut
• Apparition de l'icône après un délai
• Solution propre : L'icône apparaît et disparaît délicatement. Il a la bonne taille et est à la bonne place et est discret sur ce fond gris

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [08-02-2022 / 08-02-2022]

Caractéristiques

• CSS, JS, jQuery
• Défilement rapide jusqu'en haut
• Apparition de l'icône après un délai
• L'icône glisse de la droite et s'arrête en limite de page
• Il repart en glissant mais en s'effaçant d'abord
• Allemagne

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [08-02-2022 / 08-02-2022]

Caractéristiques

• CSS, JS
• Défilement rapide jusqu'en haut
• Apparition de l'icône après un délai. Il apparaît et disparaît avec fondu
• Léger rollover qu'il faut accentuer un peu
• Solution simple et propre

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [10-04-2022 / 10-04-2022]

Caractéristiques

• CSS, Normalize.css, jQuery
• Défilement doux jusqu'en haut
• Apparition de l'icône après un délai
• Les caractères noirs deviennent blancs lorsqu'ils se superposent à l'icône
• Brooklyn, NY, USA

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [12-01-2022 / 12-01-2022]

Caractéristiques

• CSS, Normalize.css, jQuery
• Défilement plutôt rapide jusqu'en haut
• Apparition de l'icône après un délai
• Joli rollover sur le bouton
• Dordrecht, Pays-Bas
• Voir une autre proposition du même auteur et de même nature

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [12-01-2022 / 12-01-2022]

Caractéristiques

• CSS, JS, jQuery
• Aller à tel ou tel endroit en scroll léger
• Revenir en haut de page de la même façon
• Très intéressant
• Bend, Orégon, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [08-03-2022 / 08-03-2022]

Caractéristiques

• CSS, JS, jQuery
• Dans un premier temps la flèche est positionnée en haut, au centre
• Puis elle se déplace en bas à droite d'une page, puis d'une distance fixe
• Arrivée en bas, elle se retourne et change de sens pour devenir un "back to top"
• Très intéressant
• San Francisco, CA, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [12-01-2022 / 12-01-2022]

Caractéristiques

• CSS, JS, rien d'autre
• Défilement plutôt lent jusqu'en bas ou vers la page suivante
• Paris

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [23-03-2022 / 23-03-2022]

Caractéristiques

• CSS, JS, jQuery
• Défilement assez rapide jusqu'au premier point d'accroche
• Puis de point d'accroche en point d'accroche, jusqu'en bas
• Les animations de la flèche de scroll sont différentes
• Japon

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [23-03-2022 / 23-03-2022]

Caractéristiques

• CSS, JS, jQuery
• Défilement doux jusqu'en bas
• Arrivé en bas on peut remonter tout en haut de la même manière
• Le menu collant est doucement assombri au scoll
• Très propre
• Devon, Royaume-Uni

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [12-01-2022 / 12-01-2022]

Caractéristiques

• CSS, JS, jQuery
• Défilement doux jusqu'au point d'accroche
• Disparition en fondu de la flèche de scroll
• Berlin, Allemagne

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [23-03-2022 / 23-03-2022]

Caractéristiques

• CSS pur
• 8 propositions, dont 3 présentées en image, ci-dessous
• Les plus utilisées sont là
• Bien pratique

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [01-05-2022 / 01-05-2022]

Caractéristiques

• CSS pur
• Flèche de défilement gluante
• Milan, Italie

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [01-05-2022 / 01-05-2022]