Comment donner à votre logo l'effet «Slip Scroll»

Dans le didacticiel d'aujourd'hui, nous allons utiliser JavaScript pour créer un effet simple, flexible et de parallaxe dans lequel un logo change apparemment de couleur avec l'arrière-plan sur lequel il est activé lorsque l'utilisateur fait défiler l'écran..

L'effet Slip Scroll en action

Nous allons créer un élément “default” qui reste fidèle à son emplacement (position: fixe), et un groupe d’éléments «mobiles» dont la position dépend de cet élément «par défaut». Nous allons utiliser JavaScript pour que cela se produise chaque fois que l'utilisateur fait défiler.

Remarque: pour couvrir toutes les bases, j'ai fourni l'explication sous forme vidéo et écrite. 

Voir la vidéo

Abonnez-vous à Tuts + Web Design sur Youtube

Lire le tutoriel

Balisage de base

Nous allons commencer par créer quelques éléments contenant. Faisons en sorte que l'un de leurs arrière-plans soit sombre et l'autre clair afin de pouvoir contenir une image contrastée. Continuons également et faisons de notre première image l’image "par défaut" en lui donnant une classe de défaut, tandis que les autres images obtiendront la classe de mobile.

Styles de base

Maintenant, assurons-nous que nos images ne finissent pas par défiler en dehors de leurs conteneurs en réglant débordement caché. Nous dirons également que ces conteneurs ont une position relative, de sorte que les éléments positionnés de manière absolue s'aligneront sur ces conteneurs plutôt que directement sur l'élément fixe lorsque nous écrivons notre code JavaScript.. 

Par souci de défilement, donnons à ces conteneurs une hauteur min des alentours 400px. Et pour éloigner nos logos des contours, donnons-leur des rembourrage de 1em.

.conteneur débordement: masqué; position: relative; hauteur min .: 400px; rembourrage: 1em;  

Chaque conteneur a besoin d’une couleur contrastée pour:

.sombre fond: # 333;  .light background: #fff;  

Et enfin, comme promis, définissons notre CSS par défaut et déplaçable afin que l'un d'eux reste collé à la page lorsque l'utilisateur le fait défiler, et que l'autre se déplace avec elle sans se heurter à d'autres éléments:

.default position: fixed;  .moveable position: absolute; 

Cela devrait prendre en charge le balisage et le style. Si vous affichez la page, vous devriez voir le logo par défaut défiler vers le bas et se cacher derrière les autres conteneurs, tandis que tous les logos amovibles doivent apparaître comme des éléments normaux en haut à gauche de leurs conteneurs respectifs..

Présentation de JavaScript

Maintenant pour la partie amusante, le faire fonctionner avec JavaScript.

Nous allons d’abord charger jQuery et notre script personnalisé au bas de notre index.html:

Créez et ouvrez un fichier nommé js / slipScroll.js.

Dans ce fichier, la première chose à faire est de créer une fonction appelée setLogo et jette cette fonction dans un événement de défilement jQuery afin que, chaque fois que l'utilisateur fait défiler un pixel, cet événement se déclenche. Nous voudrons également nous assurer que l'événement est déclenché lorsque l'utilisateur arrive pour la première fois sur la page (avant qu'ils ne défilent):

var setLogo = function () ; $ (document) .scroll (function () setLogo ();); setLogo (); 

Faire fonctionner les choses

Maintenant pour la magie. Disons que chaque instance de .mobile sur la page devrait changer de CSS Haut La position par défaut de l’image par défaut se trouve en haut de la page, moins la mesure dans laquelle cette .mobile Le conteneur de l'élément est situé en haut de la page.

var setLogo = function () $ ('. moveable'). each (function () $ (this) .css ('top', $ ('. default'). offset (). top - $ (this) .closest ('. conteneur'). offset (). top);); ; 

Actualisez votre page et le tour est joué! Vous venez de créer un effet de défilement de pseudo-parallaxe à partir de zéro en quelques lignes de code..

Conclusion

Je vous encourage à bricoler avec cette solution. Essayez de jouer avec la fonction JavaScript elle-même pour voir quel genre de décalages bizarres vous obtenez si vous ajoutez ou supprimez quelques pixels. Essayez d’utiliser différents éléments (n'importe qui?) Au lieu de simplement des images pour votre contenu défilable..

J'espère que vous avez beaucoup appris et n'hésitez pas à laisser des commentaires ci-dessous si vous avez des questions..