Advertisement
  1. Web Design
  2. Inspiration
Webdesign

Spunti per lo sviluppo web: scorrere, scorrere, scorrere

by
Length:ShortLanguages:
This post is part of a series called Weeks of Web Design Inspiration.
15+ Tools for Building Your Portfolio on the Web
Discoverability and Feedback in Web Design

Italian (Italiano) translation by Danilo Maccioni (you can also view the original English article)

Tutti browser web hanno una cosa in comune: quasi senza eccezioni ci permettono di scorrere i contenuti. Scorrere ci guida dal principio del documento, alla sua fine. Ma ci permette molto di più di questo – e nel bene o nel male, i programmatori web si sono concentrati sulla barra di scorrimento per qualche tempo, studiando come potesse essere sfruttata per interagire con il web.

Come solitamente avviene in questi articoli di spunto, andremo a vedere alcuni esempi, esaminare alcune delle tecniche utilizzate, citare varie guide e corsi che possano aiutarvi ad imparare cosa abbiamo trovato, ed elencare degli esempi d'ispirazione presenti nell'Envato Market.

Spunti

Partiremo con forbetter.coffee (10 punti per la URL) che inizia con un chicco di caffé, poi continua il suo processo all'ingiù con le pagine, diventando polvere, infusione per poi essere versato nella tazza.

Comincia qui, poi scorre...

Questo è nello spirito del classico esempio di scorrimento lostworldsfairs.com. Il posizionamento del chicco di caffé è fixed lungo il percorso, perciò rimane fisso nel browser mentre lo sfondo scorre oltre. Nel momento in cui incontra determinate tappe, la sua posizione viene modificata in relaltive scorrendo verso l'alto dello schermo e rimpiazzato da un altro elemento. Tutto ciò è realizato con scrollmagic.io.

Susan Lin usa un effetto simile (anche se con uno stile completamente diverso) nella sua homepage personale. Siate pronti a vivere la nostalgia per i giochi di ruolo ad 8-bit mentre lo sprite di Susan passeggia lungo il suo paesaggio pixellato. 

Preparatevi per una guida dettagliata su come ciò è stato ottenuto molto presto!

www.voog.com usa lo scorrimento per ottenere un altro effetto. La sua struttura divisa combina colori luminosi e scambia immagini di sfondo, mascherate nelle loro posizioni fisse.

Questo è creato con JavaScript, ma potrete ottenere un effetto degli sfondi mascherati molto simile, utilizzando nient'altro che CSS, come mostrato da Kezz Bracey.

Parallax

Come siamo giunti fino a qui senza menzionare parallax? Rimediamo subito, con l'aiuto di @claudioguglieri. Visionate la sua homepage, che inizia con una lettera aperta presentata magnificamente. Scorrete in basso apprezzate l'effetto di profondità prodotto e dalle foglie e dai petali di rosa mentre fluttuano oltre.

httpwwwgugliericom
www.guglieri.com

Claudio sfrutta questo stratagemma in altri siti oltre il suo; date uno sguardo a www.wedontneedroads.co mentre ci siete.

Un più discreto utilizzo di parallax può essere osservato su sublime.fyi; una raccolta di seminari sul design ed interviste di volti noti. Scorrete in basso e osservate i livelli grafici bitonali e le immagini andare oltre.

Firewatch è stupendo. Stupendo per grafica dipinta nel gioco, per l'idea, per la sua campagna pubblicitaria. Ed il suo sito internet non è da meno. Scorrete in basso per avvertire il senso di profondità e dell'ambiente, e adattatevi, rimpicciolendo in realzione alla vista.

Il prossimo esempio è leggermente diverso, nel modo in cui lo scorrimento della finestra viene usato per influenzare un minuscolo dettaglio. frankbody.com ha un menu a pannello attaccato in alto a sinistra nel viewport, quando si scorre la pagina il suo sfondo varia in maniera discreta.

httpseufrankbodycom
eu.frankbody.com

Il codice javascript (o meglio jQuery) che lo regola è il seguente:

Sentitevi liberi di smontarlo in questo esempio:

Envato Market

Diamo uno sguardo ad alcuni allettanti temi e templates in vendita su Themeforest.

Zoo - Responsive One Page Parallax Theme
Zoo - Tema responsivo a pagina unica con parallax
Startuply Multi-Purpose Startup Theme
Startuply — Tema polivalente per startup
Borderland - A Daring Multi-Concept Theme
Borderland - Un audace tema multi concettuale
Scroller - Parallax Scroll Responsive Theme
Scroller - Tema con parallax, a scorrimento e responsivo
ROSA - An Exquisite Restaurant WordPress Theme
ROSA - Uno squisito tema in ambito ristorazione per Wordpress

Approfondimenti sugli eventi di scorrimento

Se volete realizzare i vostri personali capolavori, date uno sguardo al recente corso di Craig Campbell: Scroll Events Made Easy. In esso, potrete imparare le basi degli eventi di scorrimento, costruire diversi esempi usando le librerie del momento quali parallax.js, wow.js e skrollr.js. Acquistate questo corso per 9$

Addizionalmente, consultate Parallax Scrolling for Web Design, per completare le vostre conoscenze.

Gestione dei problemi di rendering e prestazionali

Quando vi trastullate con lo scorrimento ed il posizionamento, potenzialmente state giocando con le abilità del browser di ridisegnare la scenografia. In questo conciso suggerimento, Harry Roberts illustra alcune soluzioni a problemi di prestazioni usando l'inspector del browser.

Siete giunti alla fine

Per questa raccolta di spunti è tutto, arrivederci alla prossima!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.