4 Moderne Baggrunde til at prøve
Det ser ud til, at baggrunde lever som skygger i en skygge; Det er dog ikke helt sandt. I tider, hvor CSS først begyndte at gøre sine første skridt i retning af verdens erobringen, havde baggrunden allerede taget rollen som det vigtigste dekorative element på hjemmesiden.
I dag er situationen ikke ændret drastisk. I de fleste tilfælde tjener den som en primær visuel drivkraft, der yder et vigtigt bidrag til det generelle tema.
Traditionelt er billeder og videoer de første valg til baggrund. Faktum er, at de simpelthen er overbefolkede heltafsnit: alle andre hjemmesider hilser online publikum med enten billedbaseret eller filmbaseret baggrund. Og det gør internettet (og din grænseflade i særdeleshed) stort set, hvilket resulterer i forventet brugeroplevelse.
En udvej er at finde nye løsninger ved at udnytte de helt nye teknikker og spille rundt med CSS3, HTML5 og JavaScript. Faktisk er der en overskuelig tendens til at gå til disse muligheder. Der er mindst fire forskellige moderne dynamiske baggrunde, der deltager i en konkurrence for at vinde sin plads i solen i disse dage.
Lad os se på dem:
Partikel Animation
Partikel animation er et af de mest populære valg lige nu. Masser af hjemmesider har med succes vedtaget denne elegante kosmos-inspirerede løsning. Det fungerer godt i kombination med almindeligt farvet lærred, illustration, vektor tegninger og lige billeder.
Desuden varierer animationen. Det kan være et bundt af kaotisk bevægende prikker, der er spredt over hele siden for at efterligne stjerneklar himmel eller regn af stjerner eller konstellation-tema løsning, hvor du kan forbinde cirkler med tynde linjer. Og det er ikke alt nogle gange er det parret med de effekter, der udløses af musens svingerhændelser: i dette tilfælde kan du køre partiklerne væk, danne hvirvler fra dem, vedhæfte dem til markøren som et spor osv.
Huub er et eksempel på den typiske partikel animation. Den har en pæn bevægende klynge af prikker, der passer perfekt sammen med en mørk farve og et kort placeret på bagsiden. Brug din musemarkør til at have det sjovt.
Tip: Hvis du vil tage fat på Huubs dynamiske hovedbakgrund, skal du kigge på det projekt, der blev oprettet af Dominic Kolbe, der hedder mus parallax demo . Det ser næsten det samme ud. Men hvis du har brug for en øjeblikkelig løsning, så JavaScript-bibliotek af Vincent Garreau, der hedder Particles.js er det du leder efter.
Bølger af partikler
Mens i det foregående eksempel kan effekten opnås med de kloge manipulationer med HTML5 og CSS3 og en kniv af JavaScript magi, dette er et genialt eksperiment med Three.js bibliotek. Med sine buede former og glatte rippelagtige bevægelser minder det nemt om små tidevand. Det skaber en følelse af et vejrtræk. Du kan bruge musemarkøren til at rotere den i forskellige retninger, udforske den både vandret og lodret.
StuurMen har en simpel, raffineret "velkommen" sektion. Det er minimal, ren og udsøgt. Indholdet går diskret ind i synsfeltet, mens den pulserende baggrund etablerer et rigtigt humør for projektet.
Tip: Her kan du finde et originalt script af ThreeJS og dens succesfulde tilpasning af Deathfang med en demo kaldet three.js lærred - partikler - bølger .
Mus svæver parallax
Layered parallax er en anden voksende trend. Sammen med partikel animation kan den omdanne en kedelig statisk baggrund til en komposition med en subtil 3D-følelse. Det store er, at du ikke behøver at kløe dit yndlingsbilledvalg, bare brug parallax til at spruce det lidt op.
Det er ret gavnligt, når du skal opleve titlen, logotypen, den surrealistiske scene eller illustrationen. Det er også velegnet til forskellige abstrakte animationer. Udløses af standard musepudebegivenhed, tilføjer det ikke kun en anden dimension, men tillader brugerne også at lege med miljøet.
Den personlige portefølje af Alexandre Rochet har en fremragende splash side. Ikke alene adfærd opfører øjet, men også musen svinger parallax gør bogstaverne skift.
Tip: Der er talrige biblioteker og levedygtige kodestykker til generering af parallax. En af de mest populære er et plugin skabt af Matthew Wagerfield kaldet Parallax.js . Men hvis du har brug for at se det i praksis, specielt anvendt til typografien, så kan du udforske en pen fra Frontnerd, der indeholder hans tage på en 3d parallax på musen .
WebGL eksperimenter
WebGL-eksperimenter er selvfølgelig en variant for sofistikerede hærdeudviklere og kunder med et generøst budget. De kan være strålende, ærefrygtindgydende og lidt pompøse. Det er værd at hver øre. Der er dog altid en flyve i salven. Med stor kraft kommer et stort ansvar, og med WebGL skal du aldrig glemme mængden af ressourcer, den bruger, og manglen på fuld browser kompatibilitet.
Solarin handler om en uforglemmelig og tankegangsoplevelse. Det er et 3D WebGL-eksperiment, der er rig på mange spændende og innovative funktioner. Hovedteksten er en kæmpe futuristisk sfære, der reagerer på musemarkøren og skaber et enormt indtryk.
Tip: Mens du vil efterligne hvilke genier i MediaMonks har gjort, er det voldsomt kompliceret på nettet, kan du altid finde et udgangspunkt, der giver dig mad til tanker. Overvej WebGL API , og denne kodepen fra Yoichi Kobayashi, der har lavet et projekt kaldet "The Wriggle Sphere" .
Konklusion
Mens udnyttelse af billeder og videoer er en tidsbestemt og mindre smertefuld måde at prettify baggrunden på, er der stadig andre lovende og eksperimentelle muligheder, der kan opnå det ønskede resultat. At være væk fra banaliteterne er udfordrende og endda pengeforbrugende, men disse foranstaltninger er berettigede og ret rimelige.
Uanset om det er en simpel, men elegant partikel-animation eller et bemærkelsesværdigt WebGL-eksperiment, sprøjter det nyt liv til en kerne detalje af grænsefladen, hvilket giver din hjemmeside en start.