Den begränsande 2-dimensionella aspekten av dataskärmar idag begränsar hur webbplatser byggs. Vid utformning av parallax-webbsidor kan dessa få effekter och grafik i tredimensionell skönhet precis före ögonen! Ofta skapad med Adobe Flash eller JavaScript-bibliotek, används denna effekt inte ofta men erbjuder en mycket unik känsla.
Nedan följer några väldigt kreativa exempel jag har sammanställt för digital inspiration. Webbdesigners från hela världen kan samla idéer för parallax stil webbplatser. Det är inte ett mycket förvirrande ämne, och när du har en designstil som du tänker är det lätt att byta ut lite grafik och koda hela saken tillsammans.
Rastape
Här är hela bakgrundsdesignen representativ för en restaurangkedja. Den huvudsakliga toppnavigeringen är lätt att hitta och animationerna är mycket slanka.
Vid första landning på sidan startar skräckmusiken automatiskt. Det här kanske inte är den bästa presentationsförmågan, men det visar tecken. Lyckligtvis kan ljudspelaren mot toppen av skärmen enkelt ändras. Du hittar också kontaktuppgifter till botten.
Billys Downtown Diner
Billys Diner erbjuder en elegant känsla för klassen till retrotemat. Visar en vacker sida med teckensnitt och kreativa färger, webbplatsen är lätt att navigera.
Höjdpunkterna inkluderar välplacerad navigering och briljant typografi. Mycket av diner känslan är applicerad på header animationen. Detta exempel på parallaxrullning berör nostalgiska toner i den klassiska 1950-talets restaurang.
Atlantis världs mässa
Detta är personligen en av mina favoritwebbplatser. Designanimationerna är så flytande och webbutvecklaren använde för det mesta alla CSS-tekniker för att åstadkomma dem. Både nybörjare och proffs måste förundras över det här konstverket.
När du kommer ner i lägre nivåer på webbplatsen kan du hitta kontaktinformation och tomt annonsutrymme. Du kanske märker att effekten följer en person ner en hiss i djupets djupaste djup mot Atlantis. Vektor konstverk i bedövning för visuella designers över hela världen.
B5 Designs
Med B5 Design Studio flyttar deras parallaxrullning horisontellt genom navigering. Den ursprungliga hemsidan innehåller några länkar till externa källor utan sidruta. Det finns inte något förvirrande om användargränssnittet, vilket verkligen stämmer bra ut.
Du märker att alla text på sidan är skrivna via HTML och utformad med CSS. Ingen Flash har applicerats, även med bilder, och vid ytterligare undersökning drivs författarna av jQuery. Detta kan också ses i deras kontaktformulär som kan skryta med praktiska verktygstips.
Snoggle Media
Den här webbplatsen har också skapats med jQuery. Du kanske märker att de kör en sidnavigering som pannar motsatt B5 - det är vertikalt upp och ner på sidan. Deras användning av ljusa bakgrundsfärger passar bra med de minimalistiska tonerna.
Webbplatsen kör en blogg som drivs med ett liknande tema. Företaget är sannolikt att köra WordPress 3.x med en jQuery-division i HTML. De har också kapitaliserat på SEO fenomenalt genom att erbjuda alternativa och unika webbadresser för att Google ska krypa.
Webdesign Karlsruhe
Även om den är skrivet uteslutande på tyska, har webbplatsens designer tagit noggrann övervägning för att stödja parallaxrullning. Hela webbplatsen framträder som förstasynsvisning mot träbakgrund.
Anteckningar placeras som navigering och designern innehåller exempel på sitt tidigare arbete. Den portföljstil han gör är mycket mer dynamisk än många. Detta kan vara en annan stor användning av jQuery-biblioteket på jobbet. Att klicka på en bild ger en förhandsvisning och ytterligare information om projektet.
FillStudio
Fill Studio är ett elegant exempel på mycket minimalistiskt tänkande. Du hittar exempel på mjuka färgtoner hela hela deras hemsida. Huvudsidan saknas mycket, men navigeringen är enkel och håller besökaren fokuserad på bara några uppgifter.
Deras portföljsida är mycket imponerande och demonstrerar vackra konstnärliga verk. Var och en betecknas ett unikt färgschema som visar på muspekaren. De visar också mer projektinformation och kontaktlänkar.
Kalendiar
När jag tänker på det unika Kalendiaret står ut över resten. Deras webbplats fokuserar på en liknande första personens syn på ett till synes rotigt landskap. Typografi och grafisk bildspråk sprids ut och visar lite förvirring.
Jag har verkligen stor respekt för deras unika konststil. Det är mycket svårt att designa webbplatser, särskilt något så komplicerat. Jag tycker att deras titel har mycket makt, plus att deras modersmål inte är engelska och saknar en stor publik.
Headline Creative
En vacker kreativ designbyrå som har djupa, rika färger för många av deras användargränssnittskomponenter. Återigen hittar du deras kärnlänkar och navigationsspår mot toppen av webbplatsen.
Parallax-komponenten kan visa unika koordinater för att hålla bitar av information. Denna stil av design har en instrumentpanel eller en stationär inställning. Användare guidas tillsammans med länkarna till områden där de kan hitta företagsinformation, kontaktuppgifter och exempel fungerar.
Tennessee spår och byways
Jag älskar absolut Tennessees webbplats för resor. De har några vackra parallaxanimationer och erbjuder till och med en kort handledning strax före platsbelastningen. Beviljas det är inte svårt att arbeta genom sin webbplats men det hjälper de tekniskt försämrade.
Det finns en stor mängd information placerad på webbplatsen. Många av de listade attraktionerna innehåller Facebook-sidor som är länkade direkt från webbplatsen. Alla popup-fönster innehåller realtekst och utvecklas under jQuery. Sidan innehåller faktiskt många menyer, som alla använder kraftfulla fly-och subsidans animeringstekniker.
Mush Game
Jag älskar det digitala vektorns konstverk som tilldelats Mush.Deras märkning är bedårande och står verkligen ut bland de många andra hemsidorna. Framträdande framträdande som en parallaxbakgrund kan du se rörelsen av träd och hängande grenar i skogen.
Du kommer märka att Mush har tagit med en kort demo-video för deras app. Den finns på Windows Phone 7 och använder en hel del coola grafiska motorer! Som alltid hittar du kort kontaktinformation och länkar till bottenfotfältet.
Piska på din webbplats
Piska på din webbplats är en snygg applikation med några ljusa funktioner. Du kan ange en webbadress i adressfältet för att röra sig med sin layout. Det är byggt på HTML5 och har några anpassade jQuery-effekter. Det är en snygg plats att leka med om du har 15 minuter!
Diego Ch? Vez
Dhype är inte epitom av parallaxdesign, även om det har ett pulserande gränssnitt. Jag älskar personligen bakgrundseffekterna. Det är funky, och lägger verkligen till företagets personlighet.
De flesta av sidlänkarna visar popup-sidor eller bildsidor. Dessa inkluderar kontaktuppgifter och portföljarbeten. Eftersom webbplatsen är låg på sidor gör det navigering en vind! Det är svårt att gå vilse, vilket är bra eftersom all information du behöver är fokuserad front och center.
Netlash
De kreativa energierna som placeras i Netlashs design är extraordinära. Jag älskar deras användning av navigeringsstilnavigering eftersom det ger så många av bakgrundsbilder till liv.
Du kan rulla vertikalt genom de olika sidorna. Detta möjliggör navigering utan länkar eller jQuery-reglage och visar också hur allt kan krypas på en enda sida. Du kommer också att märka kontaktuppgifter och företagsinformation ändra bakgrund, vilket visar att du har besökt en ny sida.
Nicosia Longhi
I portföljen nedan ingår så många fascinerande användargränssnitt. Bakgrundsmusiken är trevlig och påverkar inte webbläsningen. Faktum är att jag skulle argumentera för att det är en vacker accent till det övergripande temat.
Detta åtföljs av en diskografi av musikaliska verk och annan information om kontakter. All information visas också i jQuery-fönster utan att ladda om sidan. Det sparar mycket energi på lång sikt och gör att användarna känner sig inspirerade.
Gabl?
Det verkar som att Gable körs genom en jQuery-motor med blackbox popup-fönster. Dessa brukar användas för att hålla bildgallerier och små bitar av sidinformation. Navigationsmenyn finns i deras parallax galleri av konstverk - även om det är lite förvirrande.
Mycket av webbplatsinformationen är väl utformad och erbjuder några ganska starka resurser. Jag tycker om layouten, och även om det inte finns några etiketter på varje objekt kan du sväva för att ta reda på var de leder. Och det är inte så illa att bara utforska eftersom varje sida öppnas i samma fönster utan någon uppdatering.
Head2Heart
Galleriet av molnvektorer verkar spåra en väg bland himlen. När du följer navigationsnummer längst ner är det väldigt enkelt att hitta information och vägar mot vad du letar efter.
Jag undrar verkligen på den här webbplatsens unika färgschema och layout. Det finns så många fantastiska animationer som alla verkar så flytande i jämförelse. Deras kontaktformulär visar lite svagt vektorarbete och levande UI-komponenter. Om du gillar parallaxwebbplatser är det säkert en att kolla in för inspiration.
Esteban Mu? Oz
Estebans portfölj erbjuder ett brett spektrum av exempel. Hans arbete är fenomenalt och visas proportionellt på den övre delen av hans hemsida. Här kan du också hitta navigeringslänkar som alla innehåller innehåll på samma sida.
Parallax rullningseffekter appliceras tungt i hans sidfot med handritad molnkonst. Han har några unika externa länkar till externa källor som sponsrar sin webbplats i designgallerier. Detta är ett kraftfullt sätt att bygga förtroende bland dina kunder och landa mer projektarbete.
Bondgårdskostnad
En annan horisontellt rullande parallaxlayout som passar perfekt in i vår set! The Farmhouse Fare håller en inställning av gammalt lantkök som visas inom bakgrunden av varje avsnitt. All ytterligare information ingår i en popup med riktig text.
Hela webbplatsen verkar köras på HTML och jQuery som driver animationerna. Du hittar vanliga navigationslänkar mot toppen som representerar kontaktuppgifter och priser. De skapar härlig pudding och andra desserter och har gått ner i branschen i flera år.
BeerCamp vid SXSW 2011
Ölkampen använder vissa mycket livfulla typografi för att visa sitt arbete. Mycket av rubrikerna och underrubrikerna är svåra att läsa även för dem med stor syn. Genom att rulla in i vårt ut med ditt mushjul kan du zooma in i texten som kan verka små initialt.
Dessutom när du navigerar mellan rubriklänkarna zoomas animeringseffekter visas. Detta kan ses från någon av deras sidor och visar en fantastisk effekt. Webbplatsen verkar vara skriven i HTML som kan använda jQuery typsnitt bibliotek.
Ben Bodyguard
Jag är ett stort fan av Bens arbete. Han har skapat en digital värld inom hans hemsida som gör att du kan navigera genom mörka gränder inom hans stad. Du hittar inga fysiska navigeringslänkar eftersom den enda informationen riktar sig längst upp och längst ner på sidan.
Ben sätter också hela sitt galleri på en sida. Det betyder inte något uppfriskande, vilket är vanligt med alla parallax gallerier vi hittills hittat. Den sanna inspirationen här ligger i bakgrundsgrafik och komplex jQuery animationsstil. Jag är ett fan av Bens layout och jag skulle gärna se andra designers skapa liknande atmosfär i sina webbplatser.
TEDxPortland
TED är en underbar händelse med några av de mest kunniga högtalarna. Deras webbplats har några fantastiska videor, och för deras Portland-händelse kunde jag inte vara lyckligare med sina designval.Hela webbsidan är baserad på parallaxrullning samtidigt som rubriken in-tact hålls.
Du kan enkelt navigera igenom varje sida och utan någon uppdatering. Den svarta bakgrunden ger en perfekt duk för skarp vit bokstäver för att hoppa av sidan. Du kan välja att bläddra med sidruta i stället för att använda navigeringslänkar. Men den här metoden är mycket långsammare och det tar lite kunskap att navigera manuellt.
Resolutionism
Detta webbdesignföretag har gjort mycket saker direkt i sin layout. De tillämpar många jQuery-effekter på sina sidor för att glittra saker upp ganska. Du kan hitta sina portföljlänkar snabbt tillgängliga och med en jolty studsa animationsenergi.
Varje fallstudie ger en direkt länk till projektet samt en kompletterande video för alla potentiella kunder. Du hittar kontaktuppgifter samt Google Maps-anvisningar längst ner på sidan. Du kan sortera genom sina enskilda inlägg i det övre högra hörnet på varje panel.
David Beckham
Davids hemsida är mycket minimalistisk, vilket visar hur enkelt överföringen av information kan vara. Varje glidande panel kan nås via navigationssystemet till höger. En serie vita prickar finns tillgängliga och kan klickas som navigeringsavsnitt.
Panelerna innehåller en annan bakgrund av David och håller även vit bokstäver över en svart bakgrund. Mot botten hittar du några resurser för kontakt och krediter. Också en snygg pixelräknare som visar hur många enskilda pixlar du har rullat
Ap-o
Apo driver en fantastisk webbplats med vackra parallaxglidande animeringar. I nedre högra hörnet hittar du en pil som kommer att bära dig från varje sida sektion till nästa. Hans webbplats körs i en vertikal atmosfär, vilket gör det mycket lättare att rulla ner utan några jQuery-effekter.
En nackdel som jag har funnit är att det inte finns mycket av ett navigationssystem i början. Det kan vara svårt att gå igenom varje sida och tydligt dra ut informationen du behöver. Hans bakgrunder är också lite hårda på ögonen som kan mjukas eller läktas lite mer.
Vampyroffer
Nu är det här en skrämmande hemsida. Designern innehöll mycket realistiskt konstverk av vampyrer, monster och mörka gränder för att skrämma även de mörkaste spöken. Parallax rullning fungerar dock briljant! Det är ett fantastiskt tillägg i det spooky temat.
Informationen läggs ut vertikalt, vilket kan förväntas av någon klassisk webbplatsstillayout. Länkarna och sidtexten är lite svåra att läsa, eftersom bakgrundsbilderna i bakgrunden verkligen hoppar ut på dig. Men jag måste applådera designersna i en fantastisk kreativ ansträngning som jag aldrig har upplevt tidigare.
Tillverkning d'Essai
En aspekt som jag verkligen gillar av deras design är införandet av språköversättning. Du kan välja att övergå mellan italienska eller engelska från högra hörnet. Webbplatsmenyn är också dold som standard, en funktion som är lite förvirrande.
Deras sidanimationer är lysande och har verkligen några fantastiska parallaxeffekter. Bakgrundsbilden upprepas ofta och kommer att bära genom hela deras katalog- och kontaktsidor. Du hittar också en lysande portföljavdelning som också innehåller funktioner i ett jQuery-galleriformat.
Elect-LO-nica
Den här japanskbaserade webbplatsen fungerar också med parallellförvrängningseffekter och vertikal rullning. Du kan hitta några snygga animationseffekter när du rullar ner som visar några vackra vektorgrafik.
All text är skrivet på japanska. Men du behöver inte förstå innehållet på webbplatsen för att följa med deras designstil. Mot ytterst kan du hitta en spårlista och några ytterligare kontaktuppgifter. Jag tycker om deras layout anpassning eftersom den representerar en mycket enkel tankegång.
Rohto Japan
Rohto Japan är ett mycket mer framträdande förskjutet företag. Deras layout är återigen med att rulla horisontellt och erbjuda förskjutande länkar. Hela längdskiktet hittar du sociala nätverkslänkar och externa kontakter.
Ovanför dessa är de viktigaste navigeringslänkarna. De sticker inte ut mycket och kan till och med fundera bättre längst upp på sidan, vilket oftast är tomt. Siddetaljerna är mycket skarpa. Jag är också ett stort fan av deras animationsstil som är snabb och flytande för övergången.
