Inspiration pour la conception Web Scrollin ', Scrollin', Scrollin '

Les navigateurs Web ont tous une chose en commun: presque sans exception, ils nous permettent de faire défiler le contenu. Le défilement nous amène du haut d'un document vers le bas. Mais cela permet bien plus que cela - et pour le meilleur ou pour le pire, les concepteurs Web remettent en question la barre de défilement depuis un certain temps déjà, en voyant comment elle peut être utilisée autrement pour interagir avec le Web..

Comme d'habitude dans ces publications d'inspiration; nous allons examiner quelques exemples dans la nature, examiner certaines des techniques utilisées, indiquer des tutoriels et des cours pour vous aider à apprendre ce que nous avons trouvé, et énumérer des exemples inspirants sur le marché Envato..

Inspiration

Nous commencerons par Proctetter.coffee (dix points pour l'URL), qui commence par un grain de café, puis suit sa progression sur la page lorsqu'elle est moulue, percolée et versée dans une tasse à café..

Commencez ici, puis faites défiler…

Ceci est dans l'esprit de l'exemple classique de défilement lostworldsfairs.com. La position du grain de café est fixé de manière à rester fixe dans le navigateur lorsque l’arrière-plan défile. Finalement, il rencontre certains points de passage, après quoi sa position est changée en relatif et il défile en haut de l'écran, pour être remplacé par des éléments différents. Tout cela est fait avec scrollmagic.io.

Susan Lin utilise un effet similaire (bien qu’une esthétique totalement différente) sur sa page d’accueil personnelle. Préparez-vous à ressentir la nostalgie des jeux de rôle 8 bits alors que le sprite de Susan se dandine à travers le paysage pixellisé:

Préparez-vous pour un tutoriel détaillé sur la façon dont cela est réalisé très bientôt!

www.voog.com utilise le défilement pour obtenir différents effets. Sa structure divisée combine des couleurs vives et des images d’arrière-plan interchangeables, fixées dans leurs positions masquées..

Tout cela est fait avec JavaScript, bien que vous puissiez obtenir un effet de fond masqué très similaire, comme le montre Kezz Bracey, avec rien que du CSS.

Parallaxe

Comment en sommes-nous arrivés là sans mentionner la parallaxe?! Nous allons y remédier maintenant, avec l'aide de @claudioguglieri. Découvrez sa page d'accueil, qui commence par une lettre ouverte magnifiquement présentée. Faites défiler vers le bas et ressentez la profondeur suggérée par les feuilles et les pétales de rose qui défilent:

www.guglieri.com

Une parallaxe plus subtile peut être trouvée sur sublime.fyi; une agrégation organisée d'exposés sur le design et d'interviews réalisés par des personnalités très reconnaissables. Faites défiler l'écran vers le bas et observez des couches de graphiques et d'images bichromiques:

Firewatch est magnifique. Superbe dans les graphismes peints du jeu, dans le concept, dans son marketing. Et son site Web fait de même. Faites défiler l'écran vers le bas pour avoir une idée de la profondeur et de l'environnement, ainsi que pour l'échelle lorsque vous réduisez par rapport au paysage..

Cet exemple suivant est un peu différent en ce sens que la position de défilement de la fenêtre est utilisée pour influencer un détail minuscule. frankbody.com a un panneau de menu qui se colle en haut à gauche de la fenêtre, puis, lorsque vous faites défiler, son motif de fond change subtilement.

eu.frankbody.com

Le JavaScript (ou plutôt jQuery) derrière est le suivant:

// fonction déclenchée à la fenêtre scroll $ (fenêtre) .on ('scroll', function () // stocke la position verticale actuelle de la barre de défilement var scroll_top = $ (fenêtre) .scrollTop (); // change les données en ligne css règle, basée sur le facteur scroll_top $ ('. menu'). css ('background-position-y', scroll_top * -.1););

N'hésitez pas à le séparer dans cet exemple:

Marché Envato

Jetons un coup d'œil à certains thèmes et modèles de défilement inspirants en vente sur Themeforest.

Zoo - Thème de parallaxe réactif d'une pageStartuply - Thème de démarrage multi-usageBorderland - Un thème multi-concept audacieuxScroller - Parallax, Scroll & Responsive ThemeROSA - Un thème WordPress de restaurant exquis

En savoir plus sur les événements de défilement

Si vous êtes intéressé par la création de vos propres chefs-d'œuvre de défilement, consultez le cours récent de Craig Campbell intitulé Scroll Events Made Easy. Vous y découvrirez les bases des événements de défilement, puis vous construirez plusieurs exemples à l'aide de bibliothèques existantes telles que parallax.js, wow.js et skrollr.js. Prenez ce cours pour 9 $.

De plus, consultez Parallax Scrolling for Web Design pour compléter votre apprentissage..

Résolution des problèmes de performances de rendu

Lorsque vous jouez avec le défilement et le positionnement, vous pouvez potentiellement jouer avec la capacité du navigateur de repeindre la scène. Dans cette astuce rapide de Harry Roberts, il démontre quelques problèmes de performances à l’aide de l’inspecteur du navigateur..

Vous avez atteint le fond

Voilà pour ce tour d’inspiration, à la prochaine.!