, Tartarughe nel tempo o il gioco originale Pattuglia della luna ... In questi giochi, la tecnica della parallasse viene osservata nel momento in cui diversi livelli di sfondo con diverse trame si muovono a velocità diverse, il che crea l'effetto dello 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 a utilizzare questa tecnica con grande successo quando ha assunto i giganti del marketing Weiden e Kennedy per progettare il loro sito Web Nike Better World originale. Da allora il sito Nike Better World è stato aggiornato e sostituito con uno nuovo, tuttavia esiste un altro sito abbastanza simile a come appariva il primo progetto di parallasse di Nike: il sito di bevande sportive Activate.
Probabilmente avrai notato che durante lo scorrimento verso il basso di una pagina di un sito, diversi elementi di questa pagina si muovono a velocità diverse. Prendiamo come esempio la pagina mostrata nella foto sopra. Mentre scorri la pagina verso il basso, vedrai che i punti blu sullo sfondo (quelli che sono 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 muovono a una velocità leggermente superiore rispetto alla barra di scorrimento. Il testo “0 SUGAR | 0 CALORIE | NATURALMENTE DOLCIFICATO ”e il titolo principale della pagina“ Prodotti ”. Infine, ci sono immagini del prodotto stesso, sia piccole e sfuocate sullo sfondo, sia grandi, a fuoco e distese in primo piano. Le immagini del prodotto in background si muovono alla stessa velocità del testo, mentre le immagini del prodotto in primo piano si muovono più velocemente del testo. Questa è tutta una perfetta dimostrazione dello scorrimento della parallasse, in cui diversi strati di immagini si sovrappongono e si muovono tutti a velocità diverse mentre scorri la pagina, creando un effetto tridimensionale.
Lo scorrimento parallasse non è limitato allo scorrimento verticale della pagina o allo scorrimento lineare. Diamo a Nintendo il diritto di fornire un esempio perfetto per supportare questa affermazione. Ricorda i primi giochi Nintendo, dove i nostri eroi di solito si muovevano orizzontalmente da sinistra a destra lungo lo schermo, piuttosto che verticalmente verso il basso, come abbiamo visto sul sito web di Activate sopra. Fai un giro su MarkioKart Wii e parliamo di alcune delle cose interessanti che vediamo lì.
La prima cosa che noterai è la direzione di scorrimento della pagina: non è verticale, ma come detto sopra, ma inizialmente orizzontale. Certo, è bello, ma non è nemmeno un nuovo concetto. Inoltre, noterai un 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 non appena arrivi 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 i loro diversi tassi di spostamento, ma cambiano anche la loro direzione complessiva 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 il parallasse possa essere utilizzato per aggiungere vari effetti a una pagina del sito web, come spostare le icone lungo percorsi diversi, ingrandire e rimpicciolire mentre il sito scorre.
Lo scorrimento parallasse può anche aiutare a ravvivare un sito che non ha molti contenuti. E se l'intero sito fosse costituito da una dichiarazione di intenti o da una sezione su di noi, oltre a informazioni di contatto? Molto probabilmente, potresti farlo su una pagina e in determinate condizioni avresti ottenuto un buon sito di una pagina, ma i visitatori lo ricorderanno? Probabilmente no. Ma cosa succede se aggiungi 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 fa la differenza tra buono e memorabile.
Lo scorrimento parallasse è un bel trucco per tenere la manica. E può sempre essere applicato sia che tu stia costruendo 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 belli, ti consiglio di dare un'occhiata: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 è trarne vantaggio in modo efficace soluzioni già 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 questo 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- libreria di documenti jQuery e il plugin scaricato dal sito - parallax.js.
- Deduciamo effetto di parallasse alla pagina utilizzando l'attributo - dati... Aggiungi all'elemento HTML-file che vuoi usare - data-parallax \u003d "scroll" e specifica il percorso della foto - data-image-src \u003d "/ image.jpg"a cui si desidera applicare l'effetto.
- Copiamo il set di stili e aggiungiamolo al nostro file style.css... .parallax-window (
min-height: 500px;
sfondo: trasparente;
} - La cosa più importante è scegliere una taglia grande e foto di qualità... Se non ho le foto che voglio, mi sento libero di prenderle da pixabay. Sono gratuiti e puoi usarli 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 parallax.js), e HTML file e CSS stili.
Pieno Codice HTML:
Ecco un'implementazione di un effetto parallasse molto semplice sullo scorrimento della pagina. Questo effetto di parallasse non è solo molto facile da installare e configurare, ma lo stesso script di parallasse è piccolo e non necessita altre impostazioni... Questo script funziona quando la libreria jQuery è connessa.
FONTI
l'effetto parallasse è collegato facilmente come sgusciare le pere e funziona con la libreria jQuery collegata.
La versione zippata di jQuery è jquery-1.11.3.min.js Ma questo effetto di parallasse funziona sia con le versioni più recenti della libreria jQuery, sia con quelle più vecchie. Controllato!
Pertanto, colleghiamo prima jQuery al documento HTML, quindi lo stesso script parallax.min.js.
La connessione è simile a questa:
Ora connessione parallasse HTML CSS
Prendi un blocco, può essere intestazione, sezione, div, piè di pagina.
Assegna un nome al blocco div in particolare a qualsiasi classe e assegna:
larghezza: 100%
min-height: 400px;
Anche se questo non è essenziale.
HTML
sezione class \u003d "parallasse"
CSS
.parallax (altezza minima: 400 px; sfondo: trasparente;)Attributi di parallasse obbligatori
data-parallax \u003d "scroll" - necessario per attivare lo script;
data-image-src \u003d "img / bg_4.jpg - immagine, più precisamente, il percorso dell'immagine;
La pagina dello sviluppatore ha un elenco completo di attributi.
class \u003d "parallasse" - qualsiasi classe, descritta sopra.
sezione class \u003d "parallasse"
- un'iscrizione all'interno di un blocco con effetto di parallasse, in questo caso un titolo.È tutto
Il materiale è tratto da paesi esteri. E presentato solo a scopo informativo.
Questo articolo mostra come utilizzando CSS trasformazioni e imbrogli con 3d per creare un effetto di parallasse sul sito utilizzando puro CSS.
Parallax viene quasi sempre creato utilizzando JavaScript e, molto spesso, risulta essere un uso intensivo di risorse, a causa di listener sospesi sull'evento di scorrimento, che modificano direttamente il DOM e attivano ridisegni e riarrangiamenti non necessari. Tutto ciò avviene in modo asincrono con lo stream, in cui il browser esegue il rendering della pagina, a causa del quale lo scorrimento inizia a rallentare e l'immagine si rompe in pezzi. Le implementazioni di parallasse più corrette tengono traccia dello scorrimento e utilizzano aggiornamenti DOM differiti utilizzando requestAnimationFrame. Il risultato è qualitativamente diverso, ma perché non sbarazzarsi del tutto di JavaScript?
Spostare l'effetto di parallasse su CSS evita problemi di prestazioni e manipolazioni non necessarie, consentendo al browser di regolare tutto da solo tramite l'accelerazione hardware. Di conseguenza, quasi tutti i processi ad alta intensità di risorse vengono gestiti direttamente dal motore del browser. La frequenza dei fotogrammi (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 approfondire la comprensione del funzionamento di questo meccanismo, creiamo il markup necessario:
E stili di base:
Parallax (prospettiva: 1px; altezza: 100vh; overflow-x: nascosto; overflow-y: auto;) .parallax__layer (position: absolute; top: 0; right: 0; bottom: 0; left: 0;) .parallax__layer- -base (transform: translateZ (0);) .parallax__layer - back (transform: translateZ (-1px);)
Tutta la magia avviene nella classe di parallasse. La definizione delle proprietà dello stile di altezza e prospettiva imposterà la prospettiva dell'elemento al suo centro, creando una vista 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 di 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 della parallasse degli elementi 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 viene creato dalle 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 applicare una trasformazione scale () per rendere l'elemento alla 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 1px e spostiamo l'elemento di -2px lungo l'asse Z, il fattore sarà la scala (3).
Parallax__layer - deep (transform: translateZ (-2px) scale (3);)
Controllo della velocità dei livelli
La velocità dello strato è 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 mostravano la tecnica di base per utilizzare 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 insieme:
per questo il CSS sarebbe simile a questo:
Parallax__group (position: relative; height: 100vh; transform-style: preserv-3d;)
In questo esempio, voglio che ogni gruppo riempia la finestra, quindi imposto l'altezza: 100vh, sebbene il numero per ogni gruppo possa essere diverso se necessario. transform-style: keep-3d impedisce al browser di appiattire gli elementi di parallax__layer, e position: relative consente agli elementi figli di parallax__layer di essere posizionati rispetto al loro gruppo.
Una regola importante da ricordare è che quando si raggruppano elementi, non possiamo tagliare il contenuto all'interno di un gruppo, perché overflow: nascosto sull'elemento parallax__group interromperà l'intero effetto di parallasse. Il contenuto non ritagliato farà uscire i limiti dai bambini. Pertanto, è necessario armeggiare con lo z-index del gruppo per assicurarsi che il contenuto venga nascosto e visualizzato correttamente mentre l'utente scorre il sito.
Non esistono regole rigide o veloci per lavorare con i livelli e metodi diversi implicano implementazioni diverse. Ma per rendere più facile il debug del posizionamento dei livelli, puoi applicare una semplice trasformazione degli elementi del gruppo:
Parallax__group (transform: translate3d (700px, 0, -800px) rotateY (30deg);)
Dai un'occhiata al seguente esempio e nota la casella di controllo di debug!
Con l'emergere e l'uso diffuso di HTML5 (un nuovo standard per strutturare e presentare contenuti sul World Wide Web) e CSS3 (una versione migliorata del linguaggio di descrizione aspetto 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 scorrimento parallasse - nel web design: una tecnica speciale utilizzata principalmente nella 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 di loro sembrano opere d'arte, altri sorprendono per il loro formato straordinario, ma sono tutti degni della tua attenzione. Diamo un'occhiata al parallasse ea cosa è con gli esempi.
1. Design piatto vs realismo
Da che parte stai?
Con l'aiuto di giganti come Microsoft, Google e Apple, (design piatto) in un batter d'occhio è diventato il successo della stagione e oggetto di discussione in centinaia di 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 intact 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 effetto newfangled.
Il direttore creativo dell'agenzia, Alejandro Lazos, spiega che la cosa più impegnativa era combinare giochi HTML5 con lo scorrimento parallasse.
"Volevamo che tutta l'azione si svolgesse continuamente e gli utenti potessero spostarsi dall'inizio alla fine senza fermarsi. Per fare ciò, abbiamo utilizzato la tecnologia ajax, che ha reso possibile il trasferimento dei dati tramite URL e l'aggiornamento dei dati in formato sfondofornendo all'utente la pagina appropriata senza indugio. "
2. Sony
Non hai mai visto niente di simile!
Probabilmente nessuno al mondo sa come 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:
“Una volta eravamo chiamati cavie, perché tutte le innovazioni che introduciamo vengono immediatamente adottate dalle aziende concorrenti. Volevano farci del male, ma lo abbiamo preso come un complimento. La collaborazione tra artisti e ingegneri è sempre un esperimento, ma solo allora puoi sperare di fare un passo avanti domani ".
3. Costa Coffee
Graphite Digital ha scelto le illustrazioni che più espressamente rappresentano i prodotti dell'azienda
Questo impressionante sito web di una pagina è il frutto dell'ingegno dell'agenzia Graphite Digital di Brighton. In un recente passato, l'agenzia è stata incaricata di presentare il prodotto di Costa Coffee in modo brillante e interessante.
Il risultato del lavoro merita ogni elogio. La pagina di destinazione è stupenda. È pieno di tutti i tipi di elementi interattivi e illustrazioni animate.
4. Highway One
Il grande peso dell'immagine si è rivelato un grave problema per gli sviluppatori
Questo splendido microsito, progettato dall'agenzia di Newcastle Shout Digital per l'agenzia di viaggi Exsus, una società di viaggi 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 non appena inizi a scorrere, la vera magia si apre davanti a te.
5. Rendi i tuoi soldi importanti
Gestisci le tue finanze nel modo in cui Make Your Money Matter consiglia
Molte persone sono interessate al tema del denaro e della finanza personale, per questo l'agenzia digitale newyorkese Firstborn, nel preparare l'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 un'unione di credito (e gli svantaggi delle banche), i marketer hanno creato una straordinaria landing page che spiega in modo accessibile e interessante come funziona un'unione di credito, dove trovare gli uffici di un'organizzazione e molto altro ancora. Inoltre, c'è una calcolatrice che calcolerà il profitto che le banche ricevono dai tuoi investimenti.
6. Cyclemon
La pagina di destinazione ti mostrerà tutti i tipi di biciclette esistenti
I saggi cinesi dicono: "Tu sei quello che mangi". Per i designer e gli appassionati di bici Romain Bourdieux e Thomas Pomarelle, questa saggezza ben nota è "Tu sei quello che guidi". Il loro sito web co-autore ti sorprenderà non solo con lo scorrimento nuovo, ma anche con un meraviglioso senso dell'umorismo e illustrazioni di prima classe.
Gli sviluppatori, a quanto pare, non si sono persi un solo tipo di bicicletta 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 rimanendo a casa sulla tua comoda sedia
Grazie a questo sito, puoi provare un nuovo modello della gamma Lexus nel comfort di casa tua. Il video interattivo sviluppato dall'agenzia di consulenza digitale Amaze ti fornirà informazioni complete e altamente visive sugli interni e gli esterni 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. In primo luogo, è una dimostrazione visiva del veicolo 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. Creando video, ci siamo concentrati sullo spettatore sofisticato - e con le tecnologie che esistono oggi, questo è diventato più che possibile. Abbiamo mostrato la Lexus IS così com'è ".
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 nei confronti delle persone con infezione da HIV e sensibilizzare le giovani generazioni su HIV e AIDS. L'agenzia londinese Traffic è stata incaricata di progettare una pagina di destinazione che attirasse l'attenzione di un pubblico giovane e guadagnasse la loro fiducia, e ha fatto un ottimo lavoro.
Il font 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 pagina di destinazione del famoso cantante folk legge 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 un'incredibile pagina di destinazione che recita poesie accompagnate da squisiti 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 specificati in precedenza.
10. Il laboratorio
Alzheimer's Research, la principale istituzione del Regno Unito per lo studio del morbo di Alzheimer, si impegna a comunicare il proprio lavoro ei suoi risultati in modo divertente 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 a comparsa in una forma concisa spiegano ciò che 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
Infografiche sulle infografiche!
NeoMam Studios presentava un'eccellente pagina di destinazione a scorrimento parallasse che evidenziava i principali vantaggi delle infografiche 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 hanno creato le 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 adattarle a una trama specifica. Acrobazia!
14. Ogni 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 sulla mancanza di acqua pulita nel pianeta. Dove spendiamo l'acqua? Dove potremmo salvarlo? Come farlo? Imparerai tutto su questo problema. Ogni 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 escogitato 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
L'agenzia di sviluppo aziendale con sede a New York Madwell utilizza una pagina di destinazione per presentare il suo portafoglio. Lo scorrimento parallasse è una sorta di entusiasmo nell'azione che organizzano: l'effetto 3D risultante aggiunge profondità alla loro creazione.
17. Il Jacksonville Downtown Art Walk
Il Jacksonville Downtown Art Walk è un tradizionale evento mensile di arte e cultura a Jacksonville, in Florida. Il festival si estende su 15 isolati e si compone di dozzine di gallerie, musei e bar. Tutto questo è accompagnato da attori e musicisti di strada. Un bel sito web su questo evento può portare uno stato d'animo gioioso nella tua casa.
18. Von Dutch
Il marchio di moda Von Dutch racconta l'incredibile storia della vita del suo fondatore dalle pagine del suo sito web. Indubbiamente, per essere di tendenza, è stato utilizzato un nuovo tipo di scrolling per il sito. Mentre scorri la pagina, immagini e icone fluttuano su e giù, dando l'impressione che qualcuno abbia versato acqua nel tuo monitor mentre non eri nei paraggi.
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 Hybrid4
Le nuove tecnologie devono essere presentate in un modo nuovo, giusto?
Il fumetto online, commissionato dal gigante automobilistico Peugeot (Peugeot), consente all'azienda di svolgere due compiti contemporaneamente: in primo luogo, presenta in modo abbastanza efficace il nuovo meccanismo di Peugeot Hybrid4 all'attenzione del pubblico di destinazione e, in secondo luogo, lavora sull'immagine sia del prodotto che l'azienda stessa: diventerà ancora più prestigioso entrare a far parte di Peugeot, che sperimenta audacemente i formati e non dimentica la sua individualità.
21. Soluzioni culturali
Cultural Solutions è un'agenzia di consulenza che, come suggerisce il nome, si occupa di problematiche artistiche. Il logo aziendale è costituito da cerchi multicolori sovrapposti l'uno sull'altro. Ecco perché home page sito questi cerchi vengono riprodotti 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. jQuery Conference
Gli sviluppatori del sito web di jQuery Conference non dimenticano la cosa principale: mantengono il giusto equilibrio tra informatività e vistosità.
Il sito, creato appositamente per la conferenza jQuery, è realizzato con finzione. Mentre scorri la pagina, lo scorrimento della parallasse di jquery innesca una catena di animazioni diverse: una bicicletta che viaggia da sinistra a destra o uno stormo di gabbiani che inseguono uno squalo. In generale, è originale e non sovraccarico di effetti: dopotutto, l'importante non è solo sorprendere, ma anche essere ascoltati.
23. Forma
Forma un'agenzia creativa sulla sua pagina di destinazione in una forma piuttosto concisa 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 riproduce lo stile del gioco e lungo il percorso incontrerai personaggi familiari fin dall'infanzia.
25. Attiva le bevande
Basta svitare il coperchio e l'azione inizierà
Activate Drinks è un distributore di bevande fortificate, e ha sviluppato una risorsa rilevante a tutti gli effetti per promuovere i suoi prodotti. Prima sviti il \u200b\u200btappo della bottiglia (scorrendo la pagina, ovviamente), e poi ti ritrovi in \u200b\u200bun vortice di rapide bolle. Tre livelli di posizionamento delle bolle creano un effetto 3D e una sensazione di schizzi dal monitor.
26. The Whitehouse's Iraq Timeline
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 su queste illustrazioni, che hanno un impatto sulle emozioni dei visitatori.
27. Storie di copertina di Pitchfork
Il rinomato sito musicale 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 parallasse per il sito, i video interattivi, le interviste e le fotografie uniche lo hanno reso diverso 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 pagina di destinazione eccentrica progettata dai francesi di Soleil Noir è essenzialmente carta di nuovo anno... Non troverai nulla di complicato qui: scorrimento vertiginoso della parallasse, minimalismo nelle illustrazioni, frasi laconiche - ma questa semplicità affascina.
29. Oakley
Oakley combina uno straordinario scorrimento parallasse con una fotografia espressiva
Oakley è un rinomato fornitore di occhiali e occhiali protettivi e questa risorsa è stata sviluppata appositamente per promuovere i nuovi occhiali Airbrake MX. La pagina di destinazione combina uno straordinario scorrimento parallasse con foto espressive che presentano perfettamente il prodotto.
30. Jason Kenny OBE
Pagina di destinazione per Jason Kenny, tre volte olimpico e due volte campione del mondo di ciclismo
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: “Basandosi compito tecnico, abbiamo deciso di creare un sito di una pagina con scorrimento verticale e parallasse ".
31. La Moulade
La barra di navigazione consente di spostarsi 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 nella pagina. Si trova in alto e ti dà accesso anche a qualsiasi parte del sito.
32. Walking Dead
La cosa più difficile è combinare i risultati di tutte le tecnologie
"Prima di tutto, noi stessi siamo fan di questo spettacolo", il capo designer Gavin Beck condivide le sue impressioni sul lavoro sul progetto. “Il nostro piano era di 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 tutte queste tecnologie insieme ed essere 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 parola stampata. Una delle opzioni per superare la crisi è stata offerta da un quotidiano americano Il nuovo The York Times, che ha sviluppato un nuovo modulo 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'istituto sanitario sia pubblico o privato, i leader di queste organizzazioni sono sempre più preoccupati per il volume crescente dei pagamenti di compensazione. L'infografica presentata rivela esattamente questo problema, ma attira l'attenzione con il parallasse.
Non appena inizi a scorrere la pagina di destinazione, un operatore sanitario apparirà sullo schermo, camminando lungo il corridoio e spingendo una barella davanti a lui. Si sposta da una sezione all'altra, ciascuna rappresentante un anno specifico nella storia del sistema sanitario nazionale del Regno Unito. I pop-up forniscono informazioni sui 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 disegnato ogni elemento a mano e aggiunto gli ultimi ritocchi con il supporto CSS3. "
35. We are Unfold
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 consentirà 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 verso l'alto, e continuerai a scorrere nuovamente il sito, dall'inizio inizio.
36. Sfida del 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 una rapida velocità di simulazione, dando più tempo per uniformare le transizioni e costruire efficacemente 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 per la sua stabilità e compatibilità con le ultime versioni di jQuery.
Un'altra caratteristica utile è la possibilità di lavorare senza la libreria jQuery. Pertanto, le pagine di destinazione basate su di esso sono più leggere e si caricano più velocemente.
Conclusione
Il mondo non si ferma 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.
La piattaforma LPgenerator, più precisamente, il nostro editor visuale, supporta gli effetti di parallasse; guarda tu stesso con i modelli nelle pagine di destinazione del negozio LP
