Ispirazione al design del Web Scrollin ', Scrollin', Scrollin '

I browser Web hanno tutti una cosa in comune: quasi senza eccezioni ci permettono di scorrere i contenuti. Lo scorrimento ci porta dalla parte superiore di un documento, verso il basso. Ma consente molto più di questo - e nel bene o nel male, i web designer hanno sfidato la barra di scorrimento per un po 'di tempo, vedendo in quale altro modo può essere usato per interagire con il web.

Come al solito in questi post di ispirazione; esamineremo alcuni esempi in natura, esamineremo alcune delle tecniche utilizzate, indicheremo alcuni tutorial e corsi per aiutarti a imparare ciò che troviamo ed elencare alcuni esempi ispiratori sul mercato Envato.

Ispirazione

Partiremo con forbetter.coffee (dieci punti per l'URL) che inizia con un chicco di caffè, quindi seguiamo i suoi progressi lungo la pagina man mano che si macina, si percola e si versa in una tazza di caffè.

Inizia qui, quindi scorri ...

Questo è nello spirito del classico esempio di scorrimento lostworldsfairs.com. La posizione del chicco di caffè è fisso in tutto, quindi rimane fisso nel browser mentre scorre lo sfondo. Alla fine soddisfa determinati waypoint, dopodiché la sua posizione viene modificata parente e scorre fuori dalla parte superiore dello schermo, solo per essere sostituito da diversi elementi. Tutto questo è fatto con scrollmagic.io.

Susan Lin usa un effetto simile (sebbene un'estetica completamente diversa) sulla sua homepage personale. Preparati a provare nostalgia per i giochi di ruolo a 8 bit mentre lo sprite di Susan ondeggia verso il basso attraverso il paesaggio a pixel:

Preparati per un tutorial dettagliato su come sarà raggiunto molto presto!

www.voog.com utilizza lo scorrimento per ottenere effetti diversi. La sua disposizione divisa combina colori brillanti e immagini di sfondo intercambiabili, fissate nelle loro posizioni mascherate.

Tutto questo è fatto con JavaScript, anche se è possibile ottenere un effetto di sfondo mascherato molto simile, come mostrato da Kezz Bracey, con nient'altro che i CSS.

Parallasse

Come siamo arrivati ​​fin qui senza menzionare la parallasse ?! Risolviamolo ora, con l'aiuto di @claudioguglieri. Controlla la sua homepage, che inizia con una lettera aperta splendidamente presentata. Scorri verso il basso e sperimenta la profondità suggerita da foglie e petali di rosa mentre passano:

www.guglieri.com

Una parallasse più sottile può essere trovata su sublime.fyi; un'accurata raccolta di discorsi di design e interviste di alcune figure molto riconoscibili. Scorri verso il basso e guarda strati di grafica bitonale e le immagini passano oltre:

Firewatch è stupefacente. Splendido nella grafica dipinta del gioco, nel concept, nel suo marketing. E il suo sito web segue l'esempio. Scorri verso il basso per ottenere un senso di profondità e ambiente, e scala anche quando riduci in relazione al paesaggio.

Questo prossimo esempio è un po 'diverso, in quanto la posizione di scorrimento della finestra viene utilizzata per influenzare un piccolo dettaglio. frankbody.com ha un pannello di menu che si attacca in alto a sinistra del viewport, quindi, mentre scorri, il suo motivo di sfondo cambia in modo impercettibile.

eu.frankbody.com

Il JavaScript (o meglio jQuery) dietro di esso è il seguente:

// function triggered window scroll $ (window) .on ('scroll', function () // memorizza la posizione verticale corrente della barra di scorrimento var scroll_top = $ (window) .scrollTop (); // cambia in linea css regola, in base al fattore di scroll_top $ ('. menu'). css ('background-position-y', scroll_top * -.1););

Sentiti libero di separarlo in questo esempio:

Mercato Envato

Diamo un'occhiata ad alcuni temi e modelli di scorrimento ispiratori in vendita su Themeforest.

Zoo - Responsive One Page Parallax ThemeStartuply - Tema di avvio multiusoBorderland: un temerario tema multi-concettualeScroller - Parallax, Scroll & Responsive ThemeROSA - Un tema WordPress squisito ristorante

Ulteriori informazioni su Scrolling Events

Se sei interessato a creare i tuoi capolavori di scorrimento, dai un'occhiata al recente corso di Craig Campbell, "Scroll Events Made Easy". In esso, imparerai le basi degli eventi di scorrimento, quindi creerai diversi esempi usando le librerie esistenti come parallax.js, wow.js e skrollr.js. Prendi questo corso per $ 9.

Inoltre, checkout Parallax Scrolling per Web Design, per completare l'apprendimento.

Risoluzione dei problemi di prestazioni di rendering

Quando stai giocando con lo scrolling e il posizionamento, sei potenzialmente potenzialmente giocando con la capacità del browser di ridipingere la scena. In questo ottimo suggerimento di Harry Roberts, dimostra alcuni problemi di risoluzione delle prestazioni usando l'ispettore del browser.

Hai raggiunto il fondo

Questo è tutto per questo riepilogo di ispirazione, ci vediamo nel prossimo!