Nei moderni sfondi di web design sono grandi (sia letteralmente che figurativamente). Con l’avvento dei display HD (e ora 4K), i progettisti stanno creando sfondi che occupano un sacco di spazio sullo schermo. Perché? Perché hanno un impatto visivo incredibile e aiutano a raccontare una storia.

Ma c’è molto di più per sfondi che semplicemente gettando una foto o texture in un grande spazio. Una combinazione di CSS e il bit occasionale di potere JavaScript la creazione di alcuni effetti speciali sorprendenti.

Esploriamo alcuni dei modi unici in cui i progettisti sono vivacizzare sfondi. Includeremo anche una penna per ogni tecnica in modo che tu possa vedere esattamente come funzionano.

CSS Blend Mode Color Change

Ciò che rende questo effetto di sfondo così bello è che l’elemento fisso in alto sembra cambiare colore mentre l’utente scorre. L’uso della proprietà CSS mix-blend-mode consente la modifica della tonalità, che dipende dal contenuto dello sfondo.

Animazione a scorrimento

Che ricorda i videogiochi a scorrimento laterale del passato, questa tecnica presenta due immagini distinte, ciascuna a scorrimento nella direzione opposta. È fatto con l’aiuto di CSS transform e alcuni JS.

Skewed

Gli sfondi distorti sono una delle tendenze più calde nel web design. È un effetto che è stato incredibilmente facile da implementare nella progettazione di stampa e un dolore da fare sul web – fino ad ora. Questa soluzione HTML / CSS puro lo rende un gioco da ragazzi.

Immagini in movimento

Utilizzando un po ‘ abbastanza semplice di CSS, questo sfondo consente una transizione graduale tra più immagini. Si fa per un cursore molto più leggero rispetto ai tradizionali JavaScript.

Gradiente animato

Se non fatto con attenzione, uno sfondo animato può distrarre da qualsiasi contenuto seduto su di esso. Questo esempio di gradiente animato è bello perché è un effetto più sottile. Utilizzando JavaScript, è possibile definire i colori sfumati in base alla tavolozza.

Blur on Scroll

Questa tecnica potrebbe essere molto utile per i momenti in cui vuoi davvero che i visitatori si concentrino sull’immagine di sfondo (come l’intestazione di un articolo di notizie) e quindi consentano la facile lettura del testo sopra. Un po ‘ di jQuery cambia la proprietà background-size su scroll per creare l’effetto.

Fade-in Hero Image with Overlay

Ci sono alcune cose in corso con questo esempio. Innanzitutto, un’immagine eroe a larghezza intera ha una sovrapposizione di colori aggiunta in alto per creare una tonalità diversa. Quindi viene implementata un’animazione di dissolvenza per introdurre l’immagine in modo visivamente uniforme. Infine, un effetto di scorrimento in stile parallasse viene aggiunto al mix. Il risultato è un aspetto molto moderno che utilizza relativamente poco codice (e nessun JS).

Zoom e panoramica dello sfondo

Ecco un effetto che stiamo vedendo un po ‘ ultimamente. Mentre l’utente si libra su un pannello, l’immagine di sfondo viene ingrandita e ingrandita insieme a qualsiasi movimento del cursore. È un modo semplice per aggiungere un po ‘ di interattività e mantenere l’interesse degli utenti.

Reveal on Hover

Questo esempio mostra uno schermo diviso in cui lo sfondo viene rivelato in base alla posizione del mouse dell’utente. Ottimo per i confronti, come ‘prima’ e ‘dopo’ colpi.

Cambia colore su Scroll

A volte dimentichiamo quanto possa essere potente l’uso di semplici colori solidi. Qui, vediamo l’impatto che può fare mentre i colori di sfondo cambiano in base alla posizione di scorrimento. Questa soluzione leggera può essere visivamente efficace quanto le immagini pesanti.

Sfondi in prima linea

Gli sfondi non sono più solo un mezzo per inquadrare i contenuti: ora fanno spesso parte del contenuto stesso. Con così tanti modi interessanti per utilizzarli, vale la pena sperimentare varie tecniche di background e vedere come possono migliorare l’esperienza utente del tuo prossimo progetto.