Catégories
Astuces et Design

Correction du défilement fluide avec Find-on-Page

À l'époque où nous avons publié la conception v17 (nous sommes maintenant sur la version 18) de ce site. J'ai ajouté html { scroll-behavior: smooth; } au CSS. Tout de suite, j'ai reçu des commentaires comme celui-ci (juste un exemple): … Lorsque vous contrôlez + f ou commande + f et effectuez une recherche sur […]

Catégories
Astuces et Design

Comment utiliser le défilement de la locomotive pour tous les types d'effets de défilement

Je cherchais récemment un moyen d'effectuer des effets de défilement sur un projet et je suis tombé sur la bibliothèque Locomotive Scroll. Il vous permet d'effectuer une variété d'effets de défilement, comme la parallaxe et le déclenchement / contrôle des animations aux points de défilement. Vous pouvez également l'appeler une bibliothèque de «défilement fluide», mais […]

Catégories
Astuces et Design

Comment créer un bouton de défilement vers le haut discret

Un bouton pour revenir en haut de la page permet à l'utilisateur de revenir rapidement en haut de la page sans faire trop d'efforts. Cela peut être très utile lorsque la page contient beaucoup de contenu ou qui se produit, par exemple, sur des sites Web d'une seule page, lorsque le défilement infini est utilisé […]

Catégories
Astuces et Design

Créer un effet de défilement de parallaxe simple dans la section des héros à l'aide de CSS pur

Dans ce didacticiel, vous apprendrez à créer un simple effet de défilement de parallaxe CSS pur dans la section des héros de votre page de destination. Le défilement de parallaxe est un effet où différents éléments visuels sur la page se déplacent à différentes vitesses lorsque l'utilisateur fait défiler. Cela crée un effet 3D ajoutant […]

Catégories
Astuces et Design

Masquer les barres de défilement pendant une animation

CSS ne peut toujours pas animer auto dimensions. .dropdown { transition: 0.2s; height: 0; } .dropdown.open { /* the height will change, but it won’t animate. */ height: auto; } Il existe une astuce JavaScript que vous pouvez essayer. Brandon Smith a décrit plusieurs techniques ici il y a quelque temps. Mon esprit va toujours […]

Catégories
Astuces et Design

Faisons une de ces animations de défilement de fantaisie utilisées sur les pages de produits Apple

Apple est bien connu pour les animations élégantes sur leurs pages de produits. Par exemple, lorsque vous faites défiler la page, les produits peuvent apparaître, les MacBook se plient et les iPhones tournent, tout en présentant le matériel, en montrant le logiciel et en racontant des histoires interactives sur la façon dont les produits sont […]

Catégories
Astuces et Design

Une «nouvelle direction» dans la lutte contre le défilement vers la droite

L'autre jour, je construisais un site Web réactif avec un menu de navigation qui glisse en vue de gauche lorsque vous cliquez sur le bouton de menu. J'étais sur le point de me diriger vers le pub, mais j'ai ensuite appris que le menu était censé glisser du droite côté à la place. Pas grave. […]

Catégories
Astuces et Design

Comment je mets le pourcentage de défilement dans la barre de titre

Défiler vers le bas! Je suis sérieux! Faites simplement défiler! Et puis lève les yeux. Un peu plus loin. Oui, dans la zone de votre barre d'onglets où le contenu finit. Et puis faites défiler à nouveau. Il y a un pourcentage là-bas. Et cela change lorsque vous faites défiler. Un peu cool non? Vous […]

Catégories
Astuces et Design

Barre de défilement CSS avec indicateur de progression

Les barres de défilement sont des indicateurs de progression naturels. La distance parcourue par la barre de défilement est le niveau de progression du défilement de cet élément (souvent la page entière). Mais, ils ressemblent plus à des indicateurs de progrès qu'à des compteurs, si vous considérez un compteur comme quelque chose qui «se remplit» […]