Il limitante aspetto bidimensionale dei monitor dei computer oggi limita il modo in cui vengono costruiti i siti web. Quando si progettano i layout del sito Web di parallasse, questi possono portare effetti e grafica in una bellezza tridimensionale proprio davanti ai vostri occhi! Spesso creato con le librerie Adobe Flash o JavaScript questo effetto non viene spesso utilizzato ma offre una sensazione davvero unica.
Di seguito sono riportati alcuni esempi molto creativi che ho messo insieme per l'ispirazione digitale. I web designer di tutto il mondo possono raccogliere idee per siti Web in stile parallasse. Non è un argomento molto confuso e una volta che hai in mente uno stile di design, è facile scartare alcuni elementi grafici e codificare tutto insieme.
Rastapé
Qui l'intero background design è rappresentativo di una catena di ristoranti. La navigazione principale è facile da trovare e le animazioni sono molto eleganti.
Al primo atterraggio sulla pagina, la musica stonata si avvia automaticamente. Questa potrebbe non essere la migliore capacità di presentazione ma mostra carattere. Fortunatamente il lettore audio verso la parte superiore dello schermo può essere facilmente modificato. Troverai anche i dettagli di contatto verso il basso.
Billy's Downtown Diner
Billy's Diner offre un elegante senso della classe al tema retrò. Visualizzando una bella pagina con caratteri e colori creativi, il sito web è facile da navigare.
I punti salienti includono navigazione ben posizionata e brillante tipografia. Gran parte della sensazione del ristorante viene applicata all'animazione dell'intestazione. Questo esempio di scrolling parallasse tocca toni nostalgici del classico ristorante degli anni '50.
Atlantis World's Fair
Questo è personalmente uno dei miei siti preferiti. Le animazioni di progettazione sono così fluenti e lo sviluppatore del web ha utilizzato per lo più tutte le tecniche CSS per realizzarle. Sia i principianti che i professionisti devono meravigliarsi di quest'opera d'arte.
Mentre scendi nei livelli inferiori del sito web puoi trovare le informazioni di contatto e lo spazio pubblicitario vuoto. Si può notare che l'effetto sta seguendo una persona giù un ascensore nelle profondità più profonde dell'oceano verso Atlantide. La grafica vettoriale in sorprendente per i visual designer di tutto il mondo.
B5 Designs
Con B5 Design Studio lo scrolling della parallasse si sposta orizzontalmente attraverso la navigazione. La pagina iniziale iniziale presenta alcuni collegamenti a fonti esterne senza barra di scorrimento laterale. Non c'è nulla di troppo confuso sull'interfaccia utente, che spicca davvero bene.
Noterai che tutto il testo in-page è scritto in HTML e in stile con CSS. No Flash è stato applicato, anche con le immagini, e su ulteriori approfondimenti gli autori sono supportati da jQuery. Questo può anche essere visto nel loro modulo di contatto che vanta utili suggerimenti.
Snoggle Media
Questo sito Web è stato creato anche con jQuery. Potresti notare che eseguono una navigazione laterale che fa da fronte a B5, cioè verticalmente su e giù per la pagina. Il loro uso di colori di sfondo luminosi si armonizza bene con i toni minimalisti.
Il sito gestisce un blog alimentato da un tema simile. La società probabilmente esegue WordPress 3.x con una divisione jQuery nell'HTML. Hanno anche sfruttato in modo fenomenale il SEO offrendo URL alternativi e unici per la scansione di Google.
Webdesign Karlsruhe
Sebbene sia stato scritto esclusivamente in tedesco, il designer del sito Web ha preso attentamente in considerazione l'approvazione dello scrolling della parallasse. L'intero sito Web appare come una visuale in prima persona verso un supporto in legno.
Le note sono posizionate come elementi di navigazione e il designer include esempi del suo lavoro passato. Lo stile del portafoglio che rende appare molto più dinamico di molti. Questo potrebbe essere un altro grande uso della libreria jQuery al lavoro. Facendo clic su un'immagine si apre un'anteprima e ulteriori informazioni sul progetto.
FillStudio
Fill Studio è un elegante esempio di pensiero molto minimalista. Puoi trovare esempi di tonalità di colore tenui in tutto il loro sito web. Manca molto la pagina principale, ma la navigazione è semplice e mantiene il visitatore concentrato su poche attività.
La loro pagina di portafoglio è molto impressionante e dimostra bellissime opere artistiche. Ciascuno è designato uno schema di colori unico che viene visualizzato al passaggio del mouse. Mostrano anche più informazioni sul progetto e link di contatto.
Kalendiar
Quando penso a Kalendiar unico spicca sopra il resto. Il loro sito si concentra su una simile vista in prima persona di un paesaggio apparentemente disordinato. La tipografia e le immagini grafiche sono distribuite e dimostrano un po 'di confusione.
Ho davvero molto rispetto per il loro stile artistico unico. È molto difficile progettare siti Web, in particolare qualcosa di così complesso. Trovo che il loro titolo contenga molto potere, oltre al fatto che la loro lingua madre non è l'inglese e si perde su un vasto pubblico.
Titolo creativo
Una bellissima agenzia di design creativo che offre colori profondi e ricchi per molti dei componenti dell'interfaccia utente. Di nuovo troverai i link principali e i percorsi di navigazione verso la parte superiore del sito.
Il componente di parallasse è in grado di dimostrare coordinate uniche per contenere informazioni. Questo stile di design è caratterizzato da una dashboard o da un desktop. Gli utenti vengono guidati insieme ai collegamenti alle aree in cui possono trovare informazioni sulla società, dettagli di contatto e opere di esempio.
Tennessee Trails & Byways
Adoro assolutamente il sito di viaggi del Tennessee. Presentano alcune bellissime animazioni di parallasse e offrono persino un breve tutorial prima che il sito venga caricato. Certo, non è difficile lavorare attraverso il loro sito ma aiuta chi ha problemi di tecnologia.
C'è un'enorme quantità di informazioni inserite all'interno del sito. Molte delle attrazioni elencate contengono pagine Facebook collegate direttamente dal sito. Tutti i popup contengono testo reale e sono sviluppati sotto jQuery. La pagina presenta in realtà molti menu, ognuno dei quali utilizza potenti tecniche di animazione flyout e sotto-pagina.
Mush Game
Adoro il disegno vettoriale digitale assegnato a Mush.Il loro marchio è adorabile e spicca tra i tanti altri siti web. In primo piano come sfondo di parallasse è possibile vedere il movimento degli alberi e dei rami appesi nella foresta.
Noterai che Mush ha incluso un breve video dimostrativo per la loro app. È presente su Windows Phone 7 e utilizza un sacco di fantastici motori grafici! Come sempre troverai brevi informazioni di contatto e link verso la sezione inferiore del footer.
Sbatti il tuo sito web
Whip Your Website è un'applicazione pulita con alcune caratteristiche luminose. Puoi inserire un URL nella barra degli indirizzi per scherzare con il loro layout. È tutto basato su HTML5 e presenta alcuni effetti jQuery personalizzati. È un posto pulito con cui giocare se hai 15 minuti!
Diego Ch? Vez
Dhype non è l'epitome dei design parallasse, sebbene abbia un'interfaccia vibrante. Personalmente adoro gli effetti di sfondo. È funky e aggiunge davvero personalità alla compagnia.
La maggior parte dei link al sito mostrerà popup o slide pages. Questi includono i dettagli di contatto e lavori di portfolio. Dato che il sito è basso sulle pagine, rende la navigazione un gioco da ragazzi! È difficile perdersi, il che è positivo poiché tutte le informazioni di cui hai bisogno sono focalizzate in primo piano e al centro.
Netlash
Le energie creative inserite nel design di Netlash sono straordinarie. Adoro il loro uso della navigazione in stile dashboard in quanto dà vita a così tante immagini di sfondo.
Puoi scorrere verticalmente tra le diverse pagine. Ciò consente la navigazione senza collegamenti o cursori jQuery e dimostra anche come tutto può essere sottoposto a scansione su una singola pagina. Noterai anche i dettagli di contatto e gli sfondi delle informazioni sulle società, che presentano l'attrattiva che hai visitato in una nuova pagina.
Nicosia Longhi
Il portfolio sottostante include così tante affascinanti modifiche all'interfaccia utente. La musica di sottofondo è piacevole e non interferisce con la navigazione del layout. In effetti, direi che è un bel accento sul tema generale del sito.
Questo è accompagnato da una discografia di opere musicali e altre informazioni sui contatti. Tutte le loro informazioni vengono visualizzate anche in jQuery Windows senza ricaricare la pagina. Ciò consente di risparmiare un sacco di energia a lungo termine e lascia gli utenti sentirsi ispirati.
Gabl?
Sembra che Gable sia eseguito attraverso un motore jQuery con popup di blackbox. Questi sono comunemente usati per contenere gallerie di immagini e piccoli frammenti di informazioni sulla pagina. Il menu di navigazione può essere trovato all'interno della loro galleria di parallasse di opere d'arte - anche se è un po 'di confusione.
Molte delle informazioni del sito sono ben strutturate e offrono risorse piuttosto forti. Mi piace il layout e anche se non ci sono etichette su ogni oggetto puoi passare il mouse per scoprire dove conducono. E non è così male esplorare solo perché ogni pagina si apre nella stessa finestra senza alcun aggiornamento.
Head2Heart
La galleria di vettori di nuvole sembra tracciare un sentiero nel cielo. Seguendo i numeri di navigazione nella parte inferiore è molto semplice trovare informazioni e percorsi verso ciò che stai cercando.
Sono davvero meravigliato per l'eccezionale combinazione di colori e layout di questo sito. Ci sono così tante fantastiche animazioni che sembrano tutte così fluide in confronto. Il loro modulo di contatto mostra un debole lavoro vettoriale e componenti UI vivaci. Se ti piacciono i siti web di parallasse, questo è sicuramente uno da verificare per l'ispirazione.
Esteban Mu? Oz
Il portafoglio di Esteban offre una vasta gamma di esempi. Il suo lavoro è fenomenale e visualizzato proporzionalmente nella parte superiore del suo sito web. Qui puoi trovare anche i link di navigazione che includono tutti i contenuti sulla stessa pagina.
Gli effetti a scorrimento di parallasse sono applicati pesantemente nel suo piè di pagina con l'arte delle nuvole disegnata a mano. È dotato di alcuni link esterni esclusivi a fonti esterne che sponsorizzano il suo sito Web nelle gallerie di design. Questo è un modo potente per creare fiducia tra i tuoi clienti e avviare più progetti.
Agriturismo Fare
Un'altra disposizione parallela a scorrimento orizzontale che si adatta perfettamente al nostro set! La tariffa Agriturismo mantiene l'impostazione di una vecchia cucina di campagna visualizzata sullo sfondo di ciascuna sezione. Tutte le ulteriori informazioni sono incluse in un popup con testo reale.
L'intero sito sembra essere eseguito su HTML e jQuery che alimenta le animazioni. Troverete i link di navigazione standard verso l'alto che rappresentano i dettagli di contatto e premi tariffari. Creano deliziosi pudding e altri dessert e hanno tramandato l'azienda per anni.
BeerCamp al SXSW 2011
Beer Camp utilizza una tipografia estremamente vivace per dimostrare il proprio lavoro. Gran parte dei titoli di intestazione e sottotitoli sono difficili da leggere, anche per quelli con una grande vista. Scorrendo il nostro fuori con la rotella del mouse è possibile ingrandire il testo che potrebbe sembrare inizialmente piccolo.
Inoltre, mentre si naviga tra i collegamenti delle intestazioni, vengono visualizzati gli effetti di animazione dello zoom. Questo può essere visto da una qualsiasi delle loro pagine e dimostra un effetto fantastico. Il sito sembra essere scritto in HTML che potrebbe utilizzare librerie di caratteri jQuery.
Ben la guardia del corpo
Sono un grande fan del lavoro di Ben. Ha creato un mondo digitale all'interno del suo sito web che ti permette di navigare attraverso i vicoli bui della sua città. Non troverai collegamenti fisici di navigazione in quanto le uniche informazioni sono dirette verso la parte superiore e inferiore della pagina.
Ben imposta anche la sua intera galleria su una pagina. Questo significa che non c'è nulla di rinfrescante, come è comune con tutte le gallerie di parallasse che abbiamo visto finora. La vera ispirazione qui sta nella grafica di sfondo e nello stile di animazione jQuery complesso. Sono un fan del layout di ben e mi piacerebbe vedere altri designer che creano atmosfere simili nei loro siti web.
TEDxPortland
TED è un evento meraviglioso con alcuni dei relatori più esperti. Il loro sito web presenta alcuni video fantastici e per il loro evento di Portland non potrei essere più felice con le loro scelte di design.L'intero sito web è basato sullo scrolling della parallasse mantenendo intatto l'intestazione.
Puoi navigare attraverso ogni pagina con facilità e senza alcun aggiornamento. Lo sfondo nero fornisce una tela perfetta per lettere bianche e nitide per saltare fuori dalla pagina. Puoi scegliere di scorrere con la barra di scorrimento laterale invece di utilizzare i link di navigazione. Tuttavia questo metodo è molto più lento e richiede un po 'di know-how per navigare manualmente.
Resolutionism
Questa società di web design ha fatto molte cose nel loro layout. Applicano molti effetti jQuery nelle loro pagine per risvegliare un po 'le cose. Puoi trovare i link del tuo portfolio rapidamente accessibili e con un rimbalzo jolty dell'energia di animazione.
Ogni case study offre un collegamento diretto al progetto e un video complementare per qualsiasi potenziale cliente. Troverai le informazioni di contatto e le indicazioni di Google Maps nella parte inferiore della pagina. Puoi ordinare i loro singoli post nell'angolo in alto a destra su ciascun pannello.
David Beckham
Il sito web di David è molto minimalista e mostra quanto sia semplice il trasferimento di informazioni. Ogni pannello scorrevole è accessibile tramite il sistema di navigazione sulla destra. Sono disponibili una serie di punti bianchi che possono essere cliccati come sezioni di navigazione.
I pannelli includono uno sfondo diverso di David e contengono anche caratteri bianchi su uno sfondo nero. Verso il fondo troverai alcune risorse per contatti e crediti. Anche un contatore di pixel fantasia che mostra quanti pixel singoli hai scostato
Ap-o
Apo gestisce un fantastico sito Web con bellissime animazioni scorrevoli parallasse. Nell'angolo in basso a destra troverai una freccia che ti porterà da ogni sezione di pagina a quella successiva. Il suo sito web funziona in un'atmosfera verticale, il che rende molto più facile scorrere verso il basso senza effetti jQuery.
Uno svantaggio che ho trovato è che inizialmente non c'è molto di un sistema di navigazione. Potrebbe risultare difficile passare attraverso ciascuna pagina e estrarre distintamente le informazioni di cui hai bisogno. I suoi sfondi sono anche un po 'duri per gli occhi che potrebbero essere ammorbiditi o guariti un po' di più.
Vampiro Vittima
Ora questo è un sito terrificante. Il designer ha incluso molte opere realistiche di vampiri, mostri e vicoli oscurati per spaventare anche i fantasmi più oscuri. Lo scorrimento della parallasse funziona benissimo però! È una fantastica aggiunta al tema spettrale.
Le informazioni sono disposte verticalmente, cosa che ci si può aspettare da qualsiasi layout di stile di un sito web classico. I link e il testo di una pagina sono un po 'difficili da leggere mentre le immagini di sfondo stridenti ti salta davvero addosso. Ma devo applaudire i designer in uno straordinario sforzo creativo come mai prima d'ora.
Fabbricazione d'Essai
Un aspetto che mi piace molto del loro design è l'inclusione della traduzione linguistica. Puoi scegliere di passare dall'italiano o all'inglese dall'angolo a destra. Il menu del sito Web è anche nascosto per impostazione predefinita, una funzione che è un po 'confusa.
Le loro animazioni di pagina sono brillanti e presentano davvero alcuni effetti di parallasse incredibili. Le immagini di sfondo si ripetono spesso e trasporteranno in tutto il catalogo e le pagine di contatto. Troverai anche una brillante sezione di portfolio che include anche opere in un formato di galleria jQuery.
Elect-LO-nica
Questo sito web basato giapponese funziona anche su effetti di distorsione della parallasse e scorrimento verticale. Puoi trovare alcuni effetti di animazione ordinata mentre scorri verso il basso che mette in mostra alcuni bellissimi elementi grafici vettoriali.
Tutto il testo è scritto in giapponese. Tuttavia non è necessario comprendere il contenuto del sito Web da seguire insieme al loro stile di progettazione. Verso il fondo è possibile trovare un elenco di brani e altri dettagli di contatto. Mi piace il loro adattamento al layout in quanto rappresenta una mentalità molto semplice.
Rohto Giappone
Rohto Japan è una società molto più in vista. Il loro layout è di nuovo caratterizzato da scorrimento orizzontale e offre collegamenti di spostamento. Lungo tutto il livello inferiore troverai collegamenti a social network e contatti esterni.
Sopra questi sono i principali collegamenti di navigazione. Non si distinguono molto e possono anche apparire migliori lungo la parte superiore della pagina, che è per lo più vuota. I dettagli della pagina sono molto nitidi. Sono anche un grande fan del loro stile di animazione che è veloce e fluido per la transizione.
