4 Moderna Bakgrundsmöjligheter att prova
Det verkar som att, som en del av en design, finns bakgrunder i skuggorna; Det är dock inte helt sant. I tider då CSS bara började göra sina första steg mot världsövet, hade bakgrunden redan tagit rollen som huvudinredningselementet på webbplatsen.
Idag har situationen inte förändrats drastiskt. I de flesta fall tjänar det som en primär visuell drivkraft som utgör ett viktigt bidrag till det allmänna temat.
Traditionellt är foton och videoklipp första val för bakgrund. Faktum är att de helt enkelt är överbefolkade hjältesektioner: varje annan webbplats hälsar online-publiken med antingen bildbaserad eller filmbaserad bakgrund. Och det gör webben (och ditt gränssnitt i synnerhet) ungefär som resulterar i förväntad användarupplevelse.
En väg ut är att hitta färska lösningar genom att utnyttja de helt nya teknikerna och spela runt med CSS3, HTML5 och JavaScript. Faktiskt finns det en märkbar trend att gå för dessa alternativ. Det finns minst fyra olika moderna dynamiska bakgrunder som deltar i en tävling för att vinna sin plats i solen idag.
Låt oss titta på dem:
Partikel Animation
Partikelanimering är ett av de mest populära valen just nu. Massor av webbplatser har framgångsrikt antagit denna eleganta kosmos-inspirerade lösning. Det fungerar bra i kombination med vanligt färgfärgduk, illustration, vektorritningar och jämnfoton.
Dessutom varierar animationen. Det kan vara ett bunt av kaotiskt rörliga prickar som är utspridda över hela sidan för att imitera stjärnhimmel eller regn av stjärnor, eller konstellations-teman lösning där du kan ansluta cirklar med tunna linjer. Och det är inte allt; ibland är det parat med effekterna som utlöses av muspekarehändelser: i det här fallet kan du köra partiklarna bort, bilda virvlar från dem, fästa dem på markören som spår etc.
Huub är ett exempel på den typiska partikelanimationen. Den har ett snyggt rörande kluster av prickar som passar perfekt med en mörk färg och en karta placerad på baksidan. Använd muspekaren för att ha lite roligt.
Tips: Om du vill ta tag i Huubs dynamiska huvudbakgrund, bör du titta på projektet skapat av Dominic Kolbe som heter musparallax demo . Det ser nästan ut. Men om du behöver en omedelbar lösning då JavaScript-biblioteket av Vincent Garreau som heter Particles.js är vad du letar efter.
Vågor av partiklar
Medan i föregående exempel kan effekten uppnås med smarta manipuleringar med HTML5 och CSS3 och en nypa JavaScript-magi, den här är ett genialt experiment med Three.js-biblioteket. Med sina välvda former och släta rippelliknande rörelser påminner det lätt en liten tidvatten. Det skapar en känsla av en andningsduk. Du kan använda muspekaren för att rotera den i olika riktningar, utforska den både horisontellt och vertikalt.
StuurMen har en enkel, raffinerad "välkommen" sektion. Det är minimal, ren och utsökt. Innehållet går obekvämt in i synfältet medan den pulserande bakgrunden skapar ett rätt humör för projektet.
Tips: Här hittar du ett original skript av ThreeJS och dess framgångsrika anpassning av Deathfang med en demo som heter three.js duk - partiklar - vågor .
Mus svävar parallax
Layered parallax är en annan växande trend. Tillsammans med partikelanimering kan den omvandla en matt statisk bakgrund till en komposition med en subtil 3D-känsla. Det bästa är att du inte behöver dike ditt favoritbildsval, använd bara parallax för att spruce upp det lite.
Det är ganska fördelaktigt när du behöver liva upp titeln, logotypen, den surrealistiska scenen eller illustrationen. Det är också lämpligt för olika abstrakta animationer. Triggered av standard mushuvud händelse, lägger det inte bara till en annan dimension, men låter också användarna spela med miljön.
Den personliga portföljen av Alexandre Rochet har en enastående stänk sida. Inte bara uppför sig beteendet ögat, men också muspekaren parallax gör bokstäverna skiftande.
Tips: Det finns många bibliotek och lönsamma kodfragment för att generera parallax. En av de mest populära är ett plugin skapat av Matthew Wagerfield som heter Parallax.js . Men om du behöver se det i praktiken, speciellt applicerat på typografi, kan du utforska en penna från Frontnerd som innehåller hans ta på en 3d parallax på musen .
WebGL-experiment
WebGL-experiment är givetvis en variant för sofistikerade härda utvecklare och kunder med en generös budget. De kan vara lysande, otroligt inspirerande och lite pompösa. Det är värt vartenda öre. Men det finns alltid en fluga i salva. Med stor kraft kommer stort ansvar och med WebGL borde du aldrig glömma hur mycket resurser det förbrukar och bristen på fullständig webbläsarkompatibilitet.
Solarin handlar om en oförglömlig och uppenbar användarupplevelse. Det är ett 3D WebGL-experiment som är rikt på många spännande och innovativa funktioner. Huvudbakgrunden är en stor futuristisk sfär som svarar på muspekaren och skapar ett enormt intryck.
Tips: För att imitera vilka genier i MediaMonks har gjort är fiendishly komplicerat, på webben, kan du alltid hitta en utgångspunkt som ger dig mat till tanke. Överväga WebGL API , och den här kodpenningen från Yoichi Kobayashi som har kommit med ett projekt som heter "The Wriggle Sphere" .
Slutsats
Utnyttjande av bilder och videor är ett tid bevisat och mindre smärtsamt sätt att prettify bakgrunden, det finns fortfarande andra lovande och experimentella alternativ som kan få önskat resultat. Att hålla sig borta från banaliteterna är utmanande och till och med pengarkrävande, men dessa åtgärder är motiverade och ganska rimliga.
Oavsett om det är en enkel men elegant partikelanimering eller ett märkvärdigt WebGL-experiment, sprutar det nytt liv till en kärnanordning i gränssnittet, vilket ger din hemsida ett försprång.