4 Moderne Bakgrunnsbrikker å prøve ut
Det ser ut til at, som en bestanddel av et design, bakgrunner lever i skyggene; Det er imidlertid ikke helt sant. I tider da CSS bare begynte å gjøre sine første skritt mot verdens erobringen, hadde bakgrunnen allerede tatt rollen som det viktigste dekorative elementet på nettstedet.
I dag har situasjonen ikke endret seg drastisk. I de fleste tilfeller fungerer den som en primær visuell drivkraft som gir et viktig bidrag til det generelle temaet.
Tradisjonelt er bilder og videoer førstevalg for et bakteppe. Faktum er at de bare er overbefolket heltens seksjoner: Hvert annet nettsted hilser det elektroniske publikum med enten bildebasert eller filmbasert bakgrunn. Og det gjør Internett (og grensesnittet ditt spesielt) ganske like som resulterer i forventet brukeropplevelse.
En vei ut er å finne friske løsninger ved å utnytte de helt nye teknikkene og spille rundt med CSS3, HTML5 og JavaScript. Faktisk er det en merkbar trend for å gå for disse alternativene. Det er minst fire forskjellige moderne dynamiske bakgrunner som deltar i en konkurranse for å vinne sin plass i solen i disse dager.
La oss se på dem:
Partikkel Animasjon
Partikkel-animasjon er et av de mest populære valgene akkurat nå. Massevis av nettsteder har vellykket vedtatt denne elegante kosmos-inspirerte løsningen. Det fungerer bra i kombinasjon med vanlig fargekunstduk, illustrasjon, vektortegninger og jevne fotografier.
Dessuten varierer animasjonen. Det kan være et bunt med kaotisk bevegelige prikker som er spredt over hele siden for å etterligne stjerneklar himmel eller regn av stjerner, eller konstellasjon-tema løsning hvor du kan koble sirkler med tynne linjer. Og det er ikke alt; Noen ganger er det parret med effektene som utløses av musepokerhendelser: i dette tilfellet kan du kjøre partiklene bort, danner hvirvler fra dem, legge dem til markøren som sti, etc.
Huub er et eksempel på den typiske partikels animasjonen. Den har en pen bevegelig klump med prikker som går perfekt med en mørk fargestoff og et kart plassert på baksiden. Bruk musepekeren til å ha det gøy.
Tips: Hvis du vil få tak i Huubs dynamiske topptekst, bør du se på prosjektet opprettet av Dominic Kolbe som heter mus parallax demo . Det ser nesten ut det samme. Men hvis du trenger en umiddelbar løsning, så er JavaScript-biblioteket av Vincent Garreau som heter Particles.js er det du leter etter.
Bølger av partikler
Mens i det forrige eksempelet, kan effekten oppnås med de smarte manipulasjonene med HTML5 og CSS3 og en klemme av JavaScript-magi, dette er et genialt eksperiment med Three.js-biblioteket. Med sine buede former og glatte ripple-lignende bevegelser, minner det lett en liten tidevann. Det skaper en følelse av et puste lerret. Du kan bruke musemarkøren til å rotere den i forskjellige retninger, utforske den både horisontalt og vertikalt.
StuurMen har en enkel, raffinert "velkommen" -del. Det er minimal, rent og utsøkt. Innholdet går ubøyelig inn i synsfeltet mens den pulserende bakgrunnen etablerer et riktig humør for prosjektet.
Tips: Her finner du et originalt manuskript av ThreeJS og dens vellykkede tilpasning av Deathfang med en demo som heter three.js lerret - partikler - bølger .
Mus svinger parallax
Layered parallax er en annen voksende trend. Sammen med partikkel-animasjon kan den forvandle en kjedelig statisk bakgrunn til en komposisjon med en subtil 3D-følelse. Den gode tingen er at du ikke trenger å dike ditt favorittbildevalg, bare bruk parallax til å spruce det opp litt.
Det er ganske gunstig når du trenger å gi opp tittelen, logotypen, surrealistisk scenen eller illustrasjonen. Den er også egnet for ulike abstrakte animasjoner. Triggered av standard mus hover hendelse, legger det ikke bare til en annen dimensjon, men tillater også brukerne å leke med miljøet.
Den personlige porteføljen av Alexandre Rochet har en fremragende splash-side. Ikke bare oppfører oppførselen øynene, men også musepekeren parallax gjør bokstavene skiftet.
Tips: Det finnes mange biblioteker og levedyktige kodestykker for å generere parallax. En av de mest populære er en plugin opprettet av Matthew Wagerfield som heter Parallax.js . Men hvis du trenger å se det i praksis, spesielt brukt på typografien, kan du utforske en penn av Frontnerd som har sin ta på en 3d parallax på musen .
WebGL-eksperimenter
WebGL-eksperimenter er selvfølgelig en variant for sofistikerte herdede utviklere og kunder med et sjenerøst budsjett. De kan være strålende, awe-inspirerende, og litt pompøs. Det er verdt hver krone. Imidlertid er det alltid en flue i salven. Med stor kraft kommer stort ansvar, og med WebGL bør du aldri glemme mengden ressurser som den bruker, og mangelen på full nettleserkompatibilitet.
Solarin handler om en uforglemmelig og tankebrytende brukeropplevelse. Det er et 3D WebGL-eksperiment som er rikt på mange spennende og innovative funksjoner. Overskriftsbakgrunnen er en stor futuristisk sfære som reagerer på musemarkøren og skaper et enormt inntrykk.
Tips: Mens du vil etterligne hvilke genier i MediaMonks har gjort er fiendishly komplisert, på nettet, kan du alltid finne et utgangspunkt som gir deg mat til tanker. Vurder WebGL API , og denne kodepenningen fra Yoichi Kobayashi som har kommet opp med et prosjekt som heter "Wriggle sfæren" .
Konklusjon
Mens utnyttelse av bilder og videoer er en tidsbestemt og mindre smertefull måte å prettify bakgrunnen på, er det fortsatt andre lovende og eksperimentelle alternativer som kan oppnå ønsket resultat. Å holde seg unna banaliteter er utfordrende og til og med pengerkrevende, men disse tiltakene er berettiget og ganske rimelige.
Enten det er en enkel, men likevel elegant partikkel-animasjon eller et bemerkelsesverdig WebGL-eksperiment, sprøyter det nytt liv inn i en kjerne detalj av grensesnittet, noe som gir nettstedet ditt et forsprang.