, Tartarughe nel tempo o il gioco originale pattuglia lunare... In questi giochi, la tecnica della parallasse viene osservata nel momento in cui si spostano diversi livelli di sfondo con trame diverse velocità diversa, che crea l'effetto di spazio tridimensionale.
Perché ho iniziato a parlare di giochi retrò nell'articolo sullo sviluppo web? La risposta più semplice potrebbe essere "perché sono fantastici", ma no. Lo scorrimento parallasse è un concetto di design interessante che si sta facendo strada nel mondo del web design. Nike è stata tra le prime ad utilizzare questa tecnica con grande successo quando hanno assunto i giganti del marketing Weiden e Kennedy per progettare il loro sito web originale Nike Better World. Il sito Nike Better World da allora è stato aggiornato e sostituito con uno nuovo, tuttavia esiste un altro sito abbastanza simile a come appariva il primo design di parallasse di Nike, il sito di bevande sportive Activate.
Probabilmente avrai notato che mentre scorri verso il basso una pagina di un sito, diversi elementi in questa pagina si muovono a velocità diverse. Prendiamo come esempio la pagina mostrata nell'immagine sopra. Scorrendo la pagina, vedrai che i puntini blu sullo sfondo (quelli un po' sfocati) si muovono alla stessa velocità della barra di scorrimento. Inoltre, vedrai che il gruppo di punti blu, che sono più a fuoco e in primo piano, si sposta a una velocità leggermente superiore rispetto alla barra di scorrimento. Il testo “0 ZUCCHERO | 0 CALORIE | NATURALMENTE ADDOLCITO” e il titolo principale della pagina “Prodotti”. E infine, ci sono le immagini del prodotto stesso, sia piccole e sfocate sullo sfondo, sia grandi, a fuoco e in primo piano. Le immagini dei prodotti in background si muovono alla stessa velocità del testo, mentre le immagini dei prodotti in primo piano si muovono più velocemente del testo. Questa è una perfetta dimostrazione dello scorrimento parallasse, in cui diversi strati di immagini si sovrappongono e si muovono tutti a velocità diverse mentre si scorre la pagina, creando un effetto tridimensionale.
Lo scorrimento parallasse non è limitato allo scorrimento verticale della pagina o allo scorrimento in linea retta. Diamo a Nintendo il diritto di fornire un esempio perfetto per supportare questa affermazione. Ricorda i primi giochi Nintendo, in cui i nostri eroi di solito si spostavano orizzontalmente da sinistra a destra lungo lo schermo, piuttosto che verticalmente verso il basso, come abbiamo visto sul sito web Activate sopra. Fai un giro sul MarkioKart Wii e parliamo di alcune delle cose interessanti che possiamo vedere lì.
La prima cosa che noterai è la direzione di scorrimento della pagina: non è verticale, ma come accennato in precedenza, ma inizialmente orizzontale. Certo, è bello, ma non è nemmeno un concetto nuovo. Inoltre, noterai l'effetto di parallasse con il dinosauro e le conchiglie di Yoshi sullo sfondo, Mario e Luigi in primo piano e il contenuto principale che si muove a velocità diverse mentre scorri. Ma appena si arriva alle pagine #highlights e #attack, il percorso di spostamento non è più perfettamente orizzontale. Lo stesso vale per la navigazione tra le pagine #rediscover e #snes. Le immagini non solo mantengono la loro diversa velocità di spostamento, ma cambiano anche la direzione generale da orizzontale a verticale.
Vale anche la pena notare che l'uso dell'effetto di parallasse sul tuo sito Web non dovrebbe limitarsi alla semplice creazione di un effetto 3D artificiale. Il sito web dello studio di web design tedesco Webseitenfactory è un esempio di come la parallasse può essere utilizzata per aggiungere vari effetti a una pagina del sito web, come lo spostamento di icone lungo percorsi diversi, lo zoom avanti e indietro mentre il sito scorre.
Lo scorrimento parallasse può anche aiutare a ravvivare un sito che non ha molti contenuti. Cosa succede se l'intero sito è costituito da una dichiarazione di intenti o da una sezione su di noi, oltre alle informazioni di contatto? Molto probabilmente, potresti farlo su una pagina e in determinate condizioni avresti ottenuto un buon sito di una pagina, ma verrà ricordato dai visitatori? Molto probabilmente no. Ma cosa succede se si aggiunge un po' di parallasse, come hanno fatto le persone alla Primavera/Estate?
La mia prima impressione è stata "Oh, questo sito sembra carino". Ma quando ho iniziato a scorrerlo, l'impressione è diventata immediatamente "Wow, questo sito è fantastico!". L'aggiunta di un semplice effetto di parallasse è ciò che fa la differenza tra buono e memorabile.
Lo scorrimento con parallasse è un bel trucco per tenere il passo. E può sempre essere applicato indipendentemente dal fatto che tu stia realizzando un complesso sito multipagina o un semplice sito di biglietti da visita di una pagina.
Esempi di siti di parallasse
Alcuni di loro sono molto interessanti, ti consiglio di familiarizzare con:L'essenza effetto di parallasse consiste in diverse velocità di movimento dei singoli elementi dell'immagine di sfondo, mentre lo sfondo stesso, durante lo scorrimento della pagina, si muove più lentamente degli altri, il che crea una sensazione di profondità e tridimensionalità.
A causa della popolarità effetto di parallasse, ci sono già plugin già pronti con una semplice implementazione parallasse animazioni sul sito. Il nostro compito è sfruttare efficacemente soluzioni pronte ed essere in grado di applicarli sui tuoi siti.
Come funziona effetto di parallasse, può essere visto sulla pagina ufficiale di questo plugin, dove puoi scorrere la pagina e vedere immediatamente un tale effetto quando il blocco inferiore con un'immagine di sfondo galleggia su quello superiore.
Cosa è necessario per l'implementazione scorrimento parallasse effetto?
- Ci colleghiamo al nostro HTML-biblioteca documenti jQuery e il plugin scaricato dal sito - parallasse.js.
- deduciamo effetto di parallasse alla pagina utilizzando l'attributo - dati... Aggiungi all'elemento HTML-file che vuoi usare - dati-parallasse = "scorrimento" e specifica il percorso della foto - data-image-src = "/ image.jpg" a cui si desidera applicare l'effetto.
- Copiamo il set di stili e aggiungiamo al nostro file stile.css... .parallasse-finestra (
altezza minima: 500 px;
fondo: trasparente;
} - La cosa più importante è raccogliere grande taglia e foto di alta qualità... Se non ho le foto che voglio, mi sento libero di prenderle da pixabay. Sono gratuiti e puoi utilizzarli liberamente per scopi commerciali.
Prima di caricare sul server, devi avere una cartella con le foto, una cartella con gli script scaricati (jquery.min.js e parallasse.js), e HTML file e CSS stili.
Completo Codice HTML:
Ecco un'implementazione di un effetto di parallasse molto semplice durante lo scorrimento di una pagina. Questo effetto di parallasse non è solo molto facile da installare e configurare, ma lo script di parallasse stesso è piccolo e non necessita altre impostazioni... Questo script funziona quando la libreria jQuery è connessa.
FONTI
L'effetto di parallasse si collega facilmente come sgusciare le pere e funziona con la libreria jQuery collegata.
La versione archiviata di jQuery è jquery-1.11.3.min.js Ma questo effetto di parallasse funziona sia con le versioni più recenti della libreria jQuery che con quelle più vecchie. Controllato!
Pertanto, ci colleghiamo a Documento HTML prima jQuery e poi lo script parallax.min.js stesso
La connessione è simile a questa:
Ora connessione parallasse HTML CSS
Prendi un blocco, può essere intestazione, sezione, div, piè di pagina.
Denominare il blocco div in particolare qualsiasi classe e assegnare:
larghezza: 100%
altezza minima: 400 px;
Anche se questo non è importante.
HTML
classe di sezione = "parallasse"
CSS
.parallasse (altezza minima: 400px; sfondo: trasparente;)Attributi di parallasse obbligatori
data-parallax = "scroll" - necessario per attivare lo script;
data-image-src = "img / bg_4.jpg - immagine, ovvero il percorso dell'immagine;
La pagina dello sviluppatore afferma lista completa attributi.
class = "parallasse" - qualsiasi classe, descritta sopra.
classe di sezione = "parallasse"
- un'iscrizione all'interno di un blocco con effetto di parallasse, in questo caso un titolo.È tutto
Il materiale è preso da uno straniero. E presentato solo a scopo informativo.
Questo articolo ti mostra come usando i CSS trasformazioni e imbrogli con il 3d per creare un effetto di parallasse sul sito utilizzando puro CSS.
Il parallasse viene quasi sempre creato utilizzando JavaScript e, molto spesso, si rivela dispendioso in termini di risorse, a causa del blocco degli ascoltatori sull'evento di scorrimento, della modifica diretta del DOM e dell'attivazione di ridisegno e riarrangiamenti non necessari. Tutto ciò avviene in modo asincrono con il flusso, in cui il browser esegue il rendering della pagina, a causa del quale lo scorrimento inizia a rallentare e l'immagine si rompe a pezzi. Implementazioni di parallasse più corrette tengono traccia dello scorrimento e utilizzano aggiornamenti DOM posticipati utilizzando requestAnimationFrame. Il risultato è qualitativamente diverso, ma perché non eliminare del tutto JavaScript?
Spostare l'effetto di parallasse su CSS ti salva da problemi di prestazioni e manipolazioni non necessarie, consentendo al browser di regolare tutto da solo attraverso l'accelerazione hardware. Di conseguenza, quasi tutti i processi ad alta intensità di risorse sono gestiti direttamente dal motore del browser. Il frame rate (FPS) rimane stabile e l'immagine diventa fluida. Inoltre, puoi combinare immediatamente la parallasse con altre funzionalità CSS: query multimediali o supporti. Parallasse reattivo: com'è?
Teoria
Prima di immergerci nella comprensione di come funziona questo meccanismo, creiamo il markup necessario:
E stili di base:
Parallax (prospettiva: 1px; altezza: 100vh; overflow-x: nascosto; overflow-y: auto;) .parallax__layer (posizione: assoluta; in alto: 0; a destra: 0; in basso: 0; a sinistra: 0;) .parallax__layer- -base (transform: translateZ (0);) .parallax__layer - back (transform: translateZ (-1px);)
Tutta la magia accade nella classe di parallasse. La definizione delle proprietà dello stile di altezza e prospettiva imposterà la prospettiva dell'elemento al suo centro, creando una finestra 3D fissa. overflow-y: auto consentirà al contenuto all'interno dell'elemento di scorrere normalmente, con i discendenti dell'elemento disegnati rispetto a una prospettiva fissa. Questa è la chiave per creare un effetto di parallasse.
Successivamente, la classe parallax__layer. Come suggerisce il nome, definisce il livello di contenuto a cui verrà applicato l'effetto di parallasse. Un elemento con questa classe viene strappato dal flusso generale del contenuto e posizionato per riempire il suo contenitore.
Infine, abbiamo le classi di modifica parallax__layer - base e parallax__layer - back. Sono necessari per regolare la velocità di scorrimento degli elementi di parallasse spostandoli lungo l'asse Z (allontanandosi o avvicinandosi alla finestra). Per brevità, ho creato solo due velocità di scorrimento: ne aggiungeremo altre in seguito.
Correzione della profondità
Poiché l'effetto di parallasse è creato da trasformazioni 3D, lo spostamento di un elemento lungo l'asse Z ha un effetto collaterale: le dimensioni dell'elemento cambiano a seconda che sia più vicino o più lontano dalla finestra. Per risolvere questo problema, dobbiamo ridimensionare () la trasformazione in modo che l'elemento venga visualizzato nella sua dimensione originale:Parallax__layer - back (transform: translateZ (-1px) scale (2);)
Il fattore di scala può essere calcolato utilizzando la formula 1 + (translateZ * -1) / prospettiva). Ad esempio, se la prospettiva della finestra è impostata su 1 pixel e l'elemento viene compensato di -2 pixel lungo l'asse Z, il fattore sarà la scala (3).
Parallax__layer - profondo (trasformazione: translateZ (-2px) scala (3);)
Controllo della velocità del livello
La velocità del livello è controllata da una combinazione di prospettiva e valori di offset Z. Gli elementi con valori Z negativi scorreranno più lentamente rispetto agli elementi con valori Z positivi. Maggiore è la differenza da 0, più pronunciato è l'effetto di parallasse.(cioè translateZ (-10px) scorrerà più lentamente di translateZ (-1px)).
Creazione di diverse sezioni dell'effetto di parallasse
Gli esempi precedenti hanno dimostrato la tecnica di base per l'utilizzo di contenuti semplici, ma la maggior parte dei siti di parallasse divide la pagina in diverse sezioni con effetti diversi. Ecco come possiamo implementarlo nel nostro metodo.Innanzitutto, abbiamo bisogno di un elemento parallax__group per raggruppare i nostri livelli:
per questo il CSS sarebbe simile a questo:
Parallax__group (posizione: relativa; altezza: 100vh; stile di trasformazione: conserva-3d;)
In questo esempio, voglio che ogni gruppo riempia la finestra, quindi ho impostato l'altezza: 100vh, anche se il numero per ogni gruppo può essere diverso se necessario. transform-style: preserve-3d impedisce al browser di appiattire gli elementi parallax__layer e position: relative consente di posizionare gli elementi figlio parallax__layer rispetto al loro gruppo.
Una regola importante da ricordare è che quando si raggruppano gli elementi, non è possibile ritagliare il contenuto all'interno di un gruppo, poiché l'overflow: nascosto sull'elemento parallax__group interromperà l'intero effetto di parallasse. Il contenuto non ritagliato farà uscire i bambini dai limiti. Pertanto, è necessario armeggiare con lo z-index del gruppo per assicurarsi che il contenuto venga correttamente nascosto e mostrato mentre l'utente scorre il sito.
Non ci sono regole rigide o veloci per lavorare con i livelli e metodi diversi implicano implementazioni diverse. Tuttavia, per semplificare il debug del posizionamento dei livelli, è possibile applicare una semplice trasformazione degli elementi del gruppo:
Parallax__group (trasformare: translate3d (700px, 0, -800px) ruotareY (30deg);)
Dai un'occhiata al seguente esempio e nota la casella di controllo di debug!
Con l'emergere e l'adozione diffusa di HTML5 (un nuovo standard per la strutturazione e la presentazione dei contenuti World Wide Web) e CSS3 (una versione migliorata del linguaggio di descrizione aspetto esteriore oggetti), è diventato possibile creare elementi di design più interessanti e memorabili per tutte, senza eccezioni, le pagine Internet, comprese, ovviamente, le pagine di destinazione.
Scorrimento parallasse (dall'inglese parallax-scrolling - nel web design: una tecnica speciale utilizzata principalmente in computer grafica quando le immagini di sfondo in prospettiva si muovono più lentamente degli elementi in primo piano) - questa è una delle tecnologie avanzate web design moderno... Ma un uso eccessivo può degradare l'usabilità di un sito e portare a un calo dei tassi di conversione.
Oggi abbiamo preparato per te una selezione unica di siti di parallasse e ti consigliamo di familiarizzare con esempi delle pagine di destinazione di maggior successo che utilizzano questo effetto. Alcuni sembrano opere d'arte, altri sorprendono con un formato straordinario, ma sono tutti degni della tua attenzione. Diamo un'occhiata alla parallasse e di cosa si tratta con esempi.
1. Design piatto contro realismo
Da che parte stai?
Con il deposito di colossi come Microsoft, Google e Apple, (flat design) in un batter d'occhio è diventato il successo della stagione e oggetto di discussione di centinaia feed di notizie e blog. È stato percepito come una sorta di svolta nel campo del web design e, molto probabilmente, lo è stato davvero. L'agenzia interattiva intatta ha deciso di attirare l'attenzione dei suoi clienti su questa fase piuttosto insolita nello sviluppo del design virtuale e ha preparato un viaggio interattivo con il titolo " Design piatto contro il realismo”. Tutto questo è stato creato, ovviamente, non senza l'aiuto di un nuovo effetto.
Il direttore creativo dell'agenzia, Alejandro Lazos, spiega che la cosa più difficile è stata combinare un gioco HTML5 con lo scorrimento parallasse.
“Volevamo che l'intera azione si svolgesse continuamente e che gli utenti potessero spostarsi dall'inizio alla fine senza fermarsi. Per fare ciò, abbiamo utilizzato la tecnologia ajax, che ha permesso di trasferire i dati tramite url e aggiornare i dati in sfondo fornendo senza indugio all'utente la pagina appropriata. "
2. Sony
Non hai mai visto niente di simile!
Probabilmente nessuno al mondo sa presentare i propri prodotti come fa Sony. La pagina di destinazione presentata fa parte della campagna "Be Moved" di Sony, di cui dicono quanto segue:
“Siamo stati in qualche modo chiamati cavie, perché tutte le novità che introduciamo vengono subito adottate dalle aziende concorrenti. Volevano farci del male, ma lo abbiamo preso come un complimento. La collaborazione di artisti e ingegneri è sempre un esperimento, ma solo così si può sperare che domani si faccia un passo avanti".
3. Caffè Costa
Graphite Digital ha scelto le illustrazioni che più rappresentano espressivamente i prodotti dell'azienda
Questo impressionante sito Web di una pagina è nato da un'idea dell'agenzia di Brighton Graphite Digital. Nel recente passato, l'agenzia ha avuto il compito di presentare il prodotto di Costa Coffee in modo brillante e interessante.
Il risultato del lavoro merita ogni elogio. La pagina di destinazione sembra stupenda. È pieno di tutti i tipi di elementi interattivi e illustrazioni animate.
4. Autostrada Uno
Il grande peso dell'immagine si è rivelato un grosso problema per gli sviluppatori
Questo straordinario microsito, progettato dall'agenzia di Newcastle Shout Digital per l'agenzia di viaggi Exsus, un'azienda di vacanze di lusso e viaggi di nozze, è un altro ottimo esempio di questo argomento. La loro animazione in stile retrò cattura immediatamente la tua attenzione e non ti lascia mai andare fino ai titoli di coda.
Guida una classica Cadillac Eldorado del 1959 per visitare tutte le famose coste della California. A prima vista, tutti gli effetti sembrano semplici, ma una volta che inizi a scorrere, la vera magia si aprirà davanti a te.
5. Dai importanza ai tuoi soldi
Gestisci le tue finanze come consiglia Make Your Money Matter
Molte persone sono interessate al tema del denaro e della finanza personale, quindi l'agenzia digitale di New York Firstborn, quando preparava un ordine per una cooperativa di credito, ha preferito un formato innovativo a quello tradizionale.
Con l'obiettivo di sensibilizzare il pubblico di destinazione sui vantaggi di una cooperativa di credito (e sugli svantaggi delle banche), i marketer hanno creato una fantastica landing page che spiega in modo accessibile e interessante come funziona una cooperativa di credito, dove trovare un uffici dell'organizzazione e molto altro ancora. Inoltre, c'è un calcolatore che calcolerà il profitto che le banche ricevono dai tuoi investimenti.
6. Cyclemon
La landing page ti mostrerà tutto specie esistenti biciclette
I saggi cinesi dicono: "Sei ciò che mangi". Per i designer e gli appassionati di bici Romain Bourdieux e Thomas Pomarelle, questa famosa saggezza è "Sei ciò che guidi". Il loro sito Web di co-autore ti sorprenderà non solo con lo scorrimento diavolerie, ma anche con un grande senso dell'umorismo e illustrazioni di prima classe.
Gli sviluppatori, a quanto pare, non si sono lasciati sfuggire un solo tipo di bici e hanno cercato di presentarli in modo tale che ogni visitatore fosse desideroso di acquistarne uno e unirsi alla sottocultura multimilionaria.
7. Lexus
Puoi provare l'auto restando a casa sulla tua comoda poltrona
Grazie a questo sito puoi provare nuovo modello dalla gamma Lexus senza uscire di casa. Il video interattivo sviluppato dall'agenzia di consulenza digitale Amaze ti fornirà informazioni complete e altamente visive sull'interno e l'esterno dell'auto Lexus IS. L'effetto della presenza è assicurato.
Per ottenere questo risultato, il team di marketing aveva bisogno di catturare l'auto sullo sfondo di una varietà di paesaggi e scansionare la vista circostante in ciascuno dei punti chiave... Grazie alla tecnologia HTML5, la landing page funziona sia su computer che su smartphone, rendendo la promozione dell'auto più efficace che mai.
Wendy Stonefield, Direttore commerciale di Amaze, osserva: “L'utilizzo di HTML5 ci ha permesso di raggiungere diversi obiettivi. Innanzitutto, è una dimostrazione visiva dell'auto e delle sue caratteristiche funzionali. In secondo luogo, è l'interattività, di cui nessun progetto moderno può fare a meno: in questo caso, permettiamo agli utenti di scegliere il colore degli interni e della carrozzeria dell'auto. Durante la creazione di video, ci siamo concentrati sullo spettatore sofisticato e con le tecnologie esistenti oggi, questo è diventato più che possibile. Abbiamo mostrato la Lexus IS così com'è veramente."
8. La vita nelle mie scarpe
Life in my Shoes (dall'inglese - attraverso gli occhi di un'altra persona) è un progetto ambizioso, il cui compito principale è sradicare la paura e il pregiudizio contro le persone infette dall'HIV e sensibilizzare le giovani generazioni sull'HIV e l'AIDS. L'agenzia con sede a Londra Traffic è stata incaricata di progettare una landing page che potesse attirare l'attenzione di un pubblico giovane e conquistare la loro fiducia, e hanno fatto un ottimo lavoro.
Il carattere aziendale Houshka Rounded Medium è stato implementato con il supporto per la sintassi font-face, che rende la pagina più vivace e interessante. Altri elementi decorativi insieme all'uso del giallo hanno reso la risorsa esteticamente gradevole.
9. La Bestia
La nuova landing page del famoso cantante folk recita poesie e li accompagna con immagini incredibili
Per promuovere il nuovo album di Laura Marling A Creature I Don "t Know", l'agenzia digitale londinese Studio Juice ha sviluppato una fantastica landing page che legge poesie accompagnate da squisite illustrazioni e animazioni espressive.
Per creare un tale miracolo, sono stati utilizzati nuovi elementi e attributi semantici, grazie ai quali le animazioni sono sincronizzate con la colonna sonora e la loro velocità corrisponde ai parametri precedentemente specificati.
10. Il laboratorio
Alzheimer's Research, la principale agenzia di ricerca sull'Alzheimer del Regno Unito, si impegna a comunicare il proprio lavoro ei propri risultati in modo coinvolgente e accessibile. Per questo è stata creata la risorsa The Lab.
Nella pagina, ogni utente ha l'opportunità di conoscere i laboratori e la clinica dell'istituto e suggerimenti pop-up in una forma concisa spiegano cosa viene mostrato sullo schermo. Se fai clic su uno di essi, otterrai informazioni più dettagliate. La dimostrazione di come gli scienziati danno vita alle loro teorie e portano speranza a milioni di persone è al suo meglio.
11. Perché il tuo cervello desidera ardentemente le infografiche
Infografica su infografica!
NeoMam Studios presentava un'eccellente landing page a scorrimento parallasse che evidenziava i principali vantaggi dell'infografica come metodo di presentazione delle informazioni.
"Lo scorrimento parallasse è la cosa più difficile che i nostri sviluppatori devono implementare", afferma Danny Ashton, direttore dell'azienda. "Hanno considerato banali tutte le librerie disponibili, quindi ne hanno create di proprie".
12.5emegauche
La caratteristica principale di questa risorsa è che ciascuna delle sue pagine è dotata di un proprio meccanismo di scorrimento. Tutti! Questo è un approccio molto divertente e di grande successo, che dimostra anche che questa tecnologia consente di inventare forme ingegnose di presentazione delle informazioni.
13. Fiera mondiale di Atlantide
Lo scorrimento insolito qui funziona non tanto per l'intrattenimento quanto per la trama.
Questa infografica online è stata sviluppata da Frank Chimero, che ha utilizzato lo scorrimento parallasse non solo per presentare le informazioni in modo più efficiente, ma anche per animarle e inserirle in una trama specifica. Acrobazie aeree!
14. Fino all'ultima goccia
Scopri il problema globale della mancanza di acqua pulita!
Lo studio di animazione Nice & Serious ha progettato questa pagina di destinazione per sensibilizzare l'opinione pubblica sul problema della scarsità di acqua pulita sul pianeta. Dove spendiamo l'acqua? Dove potremmo salvarlo? Come farlo? Imparerai tutto su questo problema. Fino all'ultima goccia.
15. Parola vivente
L'agenzia digitale Tribal ha avuto il compito di aggiornare la rappresentazione online dell'agenzia di traduzione Living Word e renderla informativa e interessante. Puoi ammirare tu stesso il risultato, ma diciamo subito che gli inglesi non hanno inventato nulla di insolito, ma hanno fatto tutto in modo ordinato e pulito.
16. Madwell
Lo scorrimento parallasse aggiunge profondità alla pagina di destinazione di Madwell
Madwell, agenzia di sviluppo aziendale con sede a New York, utilizza una landing page per presentare il proprio portfolio. Lo scorrimento parallasse è una sorta di entusiasmo nell'azione che organizzano: l'effetto 3D risultante aggiunge profondità alla loro creazione.
17. La passeggiata artistica nel centro di Jacksonville
Il Jacksonville Downtown Art Walk è un tradizionale evento mensile di arte e cultura a Jacksonville, in Florida. Il festival si estende su 15 isolati ed è composto da dozzine di gallerie, musei e bar. Il tutto è accompagnato da attori di strada e musicisti. Un bel sito web su questo evento può portare un'atmosfera gioiosa nella tua casa.
18. Von Dutch
Il marchio di moda Von Dutch racconta la straordinaria storia della vita del suo fondatore dalle pagine del suo sito web. Indubbiamente, per essere di tendenza, per il sito è stato utilizzato un nuovo tipo di scorrimento. Mentre scorri la pagina, immagini e icone fluttuano su e giù, dando l'impressione che qualcuno abbia versato dell'acqua nel tuo monitor mentre eri via.
19. Fannabee
Fanabee è una landing page creata non tanto per chi è appassionato di musica, quanto piuttosto per chi la colleziona. Con questo servizio puoi pubblicare un elenco di ciò che hai raccolto (CD, poster, magliette, ecc.) e trovare ciò che ti manca.
20. Peugeot Ibrida4
Le nuove tecnologie devono essere presentate in un modo nuovo, giusto?
Il fumetto online, commissionato dal colosso automobilistico Peugeot (Peugeot), consente all'azienda di svolgere due compiti contemporaneamente: in primo luogo, presenta in modo abbastanza efficace il nuovo meccanismo Peugeot Hybrid4 all'attenzione del pubblico di destinazione e, in secondo luogo, funziona su l'immagine sia del prodotto che dell'azienda stessa: entrare a far parte di Peugeot, che sperimenta audacemente i formati e non dimentica la propria individualità, diventerà ora ancora più prestigioso.
21. Soluzioni culturali
Cultural Solutions è un'agenzia di consulenza che, come suggerisce il nome, si occupa di tematiche artistiche. Il logo aziendale è costituito da cerchi multicolori sovrapposti l'uno all'altro. Ecco perché su home page sito, questi cerchi sono giocati con l'effetto di parallasse. I cerchi si muovono a velocità diverse e questo aggiunge profondità e volume. Il risultato è una dichiarazione laconica, ma molto capiente ed elegante.
22. Conferenza jQuery
Gli sviluppatori del sito web jQuery Conference non dimenticano la cosa principale: mantengono il giusto equilibrio tra informatività e vistosità.
Il sito, creato appositamente per la conferenza jQuery, è eseguito con fiction. Mentre scorri la pagina, lo scorrimento parallasse di jquery attiva una catena di diverse animazioni: una bicicletta che viaggia da sinistra a destra o uno stormo di gabbiani che insegue uno squalo. In generale, è originale e non sovraccarico di effetti: dopotutto, l'importante non è solo sorprendere, ma anche essere ascoltati.
23. Forma
Shape creative agency sulla sua pagina di destinazione in una forma piuttosto laconica parla delle fasi principali delle sue attività. Bella grafica e animazioni aggiungono chiarezza.
24. Nintendo
Per presentare al pubblico di riferimento la nuova serie di giochi di Mario Kart, una nota azienda giapponese ha sviluppato una landing page che racconta il gioco sotto forma di un breve viaggio intorno al suo mondo. Il design della pagina di destinazione e la sua combinazione di colori copiano lo stile del gioco e lungo la strada incontrerai personaggi familiari fin dall'infanzia.
25. Attiva le bevande
Basta svitare il coperchio e l'azione avrà inizio
Activate Drinks è un distributore di bevande fortificate e ha sviluppato una risorsa rilevante a tutti gli effetti per promuovere i propri prodotti. Prima sviti il tappo della bottiglia (scorrendo la pagina, ovviamente), e poi ti ritrovi in un vortice di rapide bollicine. Tre livelli di posizionamento delle bolle creano un effetto 3D e una sensazione simile a uno splash dal monitor.
26. La cronologia dell'Iraq della Casa Bianca
Lo scorrimento insolito viene utilizzato non solo per migliorare il lato estetico della campagna, ma, nel caso del governo degli Stati Uniti, per aggiungere significato ed emozione alla pagina. Potresti notare che tutto il contenuto scorre molto più velocemente delle immagini sottostanti. Questo viene fatto apposta per mantenere l'attenzione del lettore proprio su queste illustrazioni, che hanno un impatto sulle emozioni dei visitatori.
27. Storie di copertina di Pitchfork
Il rinomato sito di musica Pitchfork ha avuto un grande successo con l'ambizioso progetto Cover Stories. La risorsa Internet ha acquisito alcune delle caratteristiche di una rivista patinata stampata, ma l'applicazione dell'effetto di parallasse per il sito, video interattivi, interviste e fotografie uniche l'hanno resa diversa da qualsiasi altra cosa. Foto di ritratti animati, testo pieno di sentimento e una colonna sonora perfettamente abbinata - molto eloquente e squisita.
28. Soleil Noir 2012 | Crediamo in...
Minimalismo accattivante dal francese di Soleil Noir
Questa eccentrica pagina di destinazione progettata dai francesi di Soleil Noir è essenzialmente biglietto di Capodanno... Non troverai nulla di complicato qui: vertiginoso scorrimento parallasse, minimalismo nelle illustrazioni, frasi laconiche - ma questa semplicità affascina.
29. Oakley
Oakley combina lo straordinario scorrimento parallasse con la fotografia espressiva
Oakley è un rinomato fornitore di occhiali e maschere e questa risorsa è stata sviluppata specificamente per promuovere il nuovo modello di maschera Airbrake MX. La pagina di destinazione combina uno straordinario scorrimento con parallasse e foto espressive che presentano perfettamente il prodotto.
30. Jason Kenny OBE
Pagina di destinazione per il tre volte olimpico e due volte campione del mondo di ciclismo Jason Kenny
All'inizio di quest'anno, l'agenzia di marketing di Bristol Fiasco Design ha progettato questo meraviglioso pagina di destinazione per il tre volte olimpico e due volte campione del mondo di ciclismo Jason Kenny. Il co-fondatore dell'agenzia Ben Steers afferma: "Costruire su compito tecnico, abbiamo deciso di creare un sito di una pagina con scorrimento verticale e parallasse."
31. La Moulade
La barra di navigazione ti consentirà di spostarti rapidamente e facilmente nell'area desiderata della pagina
Tra un numero crescente di landing page che utilizzano la posizione della barra di scorrimento per attivare animazioni ed effetti sonori, la creazione dell'agenzia francese La Moulade si distingue per il suo indicatore molto insolito della tua posizione sulla pagina. È posizionato in alto e ti dà accesso anche a qualsiasi parte del sito.
32. Morti che camminano
La cosa più difficile è combinare insieme i risultati di tutte le tecnologie.
"Prima di tutto, siamo noi stessi fan di questo spettacolo", il capo designer Gavin Beck condivide le sue impressioni sul lavoro al progetto. “Il nostro piano era creare un sito web che corrispondesse al mondo di The Walking Dead, che i fan della serie avrebbero apprezzato e studiato. Per raggiungere i nostri obiettivi, abbiamo utilizzato nuovi sviluppi come HTML5, CSS3, JavaScript/jQuery, Web Audio/HTML5 Audio e, naturalmente, lo scorrimento parallasse. La sfida più grande è stata far funzionare insieme tutte queste tecnologie e renderle disponibili su tutti i tipi di piattaforme".
33. New York Times: Tomato Can Blues
Potrebbe essere questo il futuro del giornalismo online?
In un'epoca in cui le persone non si fanno carico di leggere giornali e riviste, molti giornalisti si chiedono come attirare l'attenzione del pubblico sulla carta stampata. Una delle opzioni per superare la crisi è stata offerta da un quotidiano americano Il nuovo York Times, che ha sviluppato un nuovo formato per presentare articoli e storie di riviste: un sito di una pagina costruito con gli ultimi sviluppi nel web design e illustrato da Atilla Futaki.
Non appena inizi a scorrere la pagina, le illustrazioni si sposteranno e ti immergeranno nell'azione descritta.
34. Pagamenti del servizio sanitario
Niente di complicato, sembrerebbe, ma sembra piuttosto divertente
Indipendentemente dal fatto che l'istituzione sanitaria sia pubblica o privata, i leader di queste organizzazioni sono sempre più preoccupati per il volume crescente dei pagamenti di compensazione. Le infografiche presentate rivelano esattamente questo problema, ma attirano l'attenzione su se stesse con parallasse.
Non appena inizi a scorrere la pagina di destinazione, sullo schermo apparirà un operatore sanitario, che cammina lungo il corridoio e spinge una barella di fronte a lui. Si sposta da una sezione all'altra, ognuna delle quali rappresenta un anno specifico nella storia del sistema sanitario nazionale del Regno Unito. I pop-up forniscono informazioni su quali sono stati i pagamenti massimi di compensazione effettuati durante questi anni. Niente di complicato, sembrerebbe, ma sembra piuttosto divertente.
Un dipendente dell'agenzia che ha sviluppato questa landing page condivide le sue impressioni sul lavoro: “Per creare questo sito, abbiamo applicato nuove tecnologie in HTML5, CSS3 e JavaScript. Poiché le animazioni sono elemento chiave, abbiamo utilizzato principalmente le librerie di animazione “skrollr”. Abbiamo dipinto ogni elemento a mano e aggiunto gli ultimi ritocchi con il supporto CSS3. "
35. Siamo aperti
Il gioco perfetto di diversi tipi di scorrimento
Questa risorsa è stata creata dall'agenzia norvegese Unfold ed è un esempio di una combinazione di effetti come lo scorrimento infinito e lo scorrimento parallasse. Barra di navigazione nascosta a destra angolo superiore, ti farà sempre sapere dove ti trovi sul sito e ti permetterà di spostarti velocemente nell'area di tuo interesse, e se scorri fino alla fine del sito, noterai che la barra di scorrimento si sposterà automaticamente up, e continuerai a scorrere di nuovo il sito, dall'inizio.
36. Sfida al risparmio
Per creare questa pagina di destinazione, gli sviluppatori hanno utilizzato il plug-in skrollr.js, grazie al quale i visitatori sono stati in grado di "scorrere" gli eventi sulla pagina. Ciò consente un'elevata velocità di modellazione, dando più tempo per transizioni fluide e costruzione efficace interfaccia utente... La tecnologia CSS 3D è stata utilizzata per creare animazioni.
Plugin Stellar.js
Stellar.js è un plugin con cui puoi applicare l'effetto di parallasse a qualsiasi oggetto scorrevole. Sebbene questo plugin non sia più supportato, viene utilizzato da molti sviluppatori grazie alla sua stabilità e compatibilità con ultime versioni jQuery.
Un'altra caratteristica utile è la possibilità di lavorare senza la libreria jQuery. Pertanto, le pagine di destinazione create sulla base pesano meno e si caricano più velocemente.
Conclusione
Il mondo non sta fermo, e ogni giorno ci sono nuove opere d'arte nel campo del web design. Sarai tra questi eroi? È facile se adotti queste eccellenti tecnologie. Ma non dimenticare la cosa principale: qualsiasi effetto incorporato dovrebbe aumentare la conversione! Altrimenti, semplicemente non ne hai bisogno.
Piattaforma LPgenerator, più precisamente, la nostra editor visivo, supporta gli effetti di parallasse; guarda tu stesso con i modelli nelle pagine di destinazione di LP Store
