4 moderne achtergrondtrucs om uit te proberen
Het lijkt erop dat, als een onderdeel van een ontwerp, achtergronden in de schaduw leven; dat is echter niet helemaal waar. In de tijd dat CSS pas zijn eerste stappen naar de wereldoverwinning zette, had de achtergrond al de rol van het belangrijkste decoratieve element van de website aangenomen.
Tegenwoordig is de situatie niet drastisch veranderd. In de meeste gevallen dient het als een primaire visuele drijvende kracht die een belangrijke bijdrage levert aan het algemene thema.
Traditioneel zijn foto's en video's eerste keuzes voor een achtergrond. Feit is dat het simpelweg overbevolkte hero-secties zijn: elke andere website begroet het online publiek met een beeldgebaseerde of op film gebaseerde achtergrond. En dat maakt het web (en uw interface in het bijzonder) behoorlijk hetzelfde wat resulteert in verwachte gebruikerservaring.
Een uitweg is om nieuwe oplossingen te vinden door de gloednieuwe technieken te gebruiken en te spelen met CSS3, HTML5 en JavaScript. In feite is er een waarneembare trend om voor deze opties te gaan. Er zijn ten minste vier verschillende moderne dynamische achtergronden die deelnemen aan een wedstrijd om tegenwoordig zijn plaats in de zon te veroveren.
Laten we naar ze kijken:
Deeltjesanimatie
Deeltjesanimatie is momenteel een van de meest populaire keuzes. Tal van websites hebben met succes deze elegante op kosmos geïnspireerde oplossing geadopteerd. Het werkt goed in combinatie met effen kleuren canvas, illustratie, vectortekeningen en zelfs foto's.
Bovendien varieert de animatie. Het kan een bundel zijn van chaotisch bewegende stippen die over de hele pagina verspreid zijn om de sterrenhemel of sterrenregen te imiteren, of een oplossing met een sterrenbeeld waar je cirkels kunt verbinden met dunne lijnen. En dat is niet alles; soms is het gepaard met de effecten die worden geactiveerd door gebeurtenissen met de muisaanwijzer: in dit geval kunt u de deeltjes wegrijden, swirls van ze vormen, ze aan de cursor als een spoor vastmaken, enz.
Huub is een voorbeeld van de typische deeltjesanimatie. Het beschikt over een nette bewegende cluster van stippen die perfect past bij een donkere kleur en een kaart op de achterkant. Gebruik je muiscursor om plezier te hebben.
Tip: als je grip wilt krijgen op de dynamische header-achtergrond van de Huub, dan moet je eens kijken naar het project gemaakt door Dominic Kolbe genaamd muis parallax demo . Het ziet er bijna hetzelfde uit. Maar als je een onmiddellijke oplossing nodig hebt, dan wordt de JavaScript-bibliotheek van Vincent Garreau genoemd Particles.js is wat je zoekt.
Golven van deeltjes
Terwijl in het vorige voorbeeld het effect kan worden bereikt met de slimme manipulaties met HTML5 en CSS3 en een snufje JavaScript-magie, is dit een ingenieus experiment met de bibliotheek Three.js. Met zijn gebogen vormen en vloeiende rimpelachtige bewegingen, herinnert het gemakkelijk aan kleine getijden. Het creëert een gevoel van een ademend canvas. Je kunt de muiscursor gebruiken om hem in verschillende richtingen te draaien, zowel horizontaal als verticaal.
StuurMen heeft een eenvoudig, verfijnd "welkom" gedeelte. Het is minimaal, schoon en voortreffelijk. De inhoud komt onopvallend in het gezichtsveld terwijl de pulserende achtergrond de juiste stemming voor het project vormt.
Tip: hier kunt u vinden een origineel script van ThreeJS en de succesvolle aanpassing door Deathfang met een demo genaamd three.js canvas - deeltjes - golven .
Muis zweef parallax
Gelaagde parallax is een andere groeiende trend. Samen met deeltjesanimatie kan het een saaie statische achtergrond transformeren in een compositie met een subtiel 3D-gevoel. Het mooie is dat je je favoriete afbeeldingskeuze niet hoeft te vergeten, gebruik parallax gewoon om het een beetje op te fleuren.
Het is vrij gunstig wanneer je de titel, het logo, het surrealistische tafereel of de illustratie moet opfleuren. Het is ook geschikt voor verschillende abstracte animaties. Deze wordt geactiveerd door een standaard muis-zwevende gebeurtenis en voegt niet alleen een andere dimensie toe, maar stelt gebruikers ook in staat om met de omgeving te spelen.
De persoonlijke portfolio van Alexandre Rochet heeft een uitstekende splash-pagina. Niet alleen valt het gedrag in het oog, maar ook de parallax met muisaanwijzer zorgt ervoor dat de letters verschuiven.
Tip: er zijn talloze bibliotheken en levensvatbare codefragmenten voor het genereren van parallax. Een van de meest populaire is een plugin gemaakt door Matthew Wagerfield genoemd Parallax.js . Als je het echter in de praktijk wilt zien, vooral toegepast op de typografie, dan kun je een pen van Frontnerd verkennen die zijn kijk op een 3d parallax op de muis .
WebGL-experimenten
WebGL-experimenten zijn natuurlijk een variant voor geavanceerde geharde ontwikkelaars en klanten met een royaal budget. Ze kunnen briljant, ontzagwekkend en een beetje pompeus zijn. Het is elke cent waard. Er zit echter altijd een vlieg in de zalf. Met groot vermogen komt grote verantwoordelijkheid en met WebGL moet je nooit vergeten hoeveel middelen het verbruikt en het gebrek aan volledige browsercompatibiliteit.
Solarin gaat alles over een onvergetelijke en verbazingwekkende gebruikerservaring. Het is een 3D WebGL-experiment dat rijk is aan tal van opwindende en innovatieve functies. De header-achtergrond is een enorme futuristische bol die reageert op de muiscursor en een geweldige indruk maakt.
Tip: Terwijl imiteren wat genieën in MediaMonks hebben gedaan, is ongelooflijk ingewikkeld, op het web kun je altijd een beginpunt vinden dat je stof tot nadenken geeft. Houd rekening met de WebGL API , en deze codepen van Yoichi Kobayashi die een project heeft bedacht genaamd "De kronkelsfeer" .
Conclusie
Terwijl het gebruik van afbeeldingen en video's een bewezen en minder pijnlijke manier is om de achtergrond mooier te maken, zijn er nog andere veelbelovende en experimentele opties die het gewenste resultaat kunnen bereiken. Wegblijven van de banaliteiten is een uitdaging en zelfs geldverslindend, maar deze maatregelen zijn gerechtvaardigd en redelijk.
Of het nu gaat om een eenvoudige maar toch elegante deeltjesanimatie of een opmerkelijk WebGL-experiment, het geeft een nieuw detail in de interface nieuw leven en geeft uw website een voorsprong.