Contact

bewegende achtergronden | CSS-trucs – CSS-trucs


Wij denken vaak aan achtergrondafbeeldingen mits textuur of iets dat tegenstelling biedt voordat leesbare inhoud – met andere woorden, noch re inhoud. Mits ie inhoud wasgoed, zullen jou waarschijnlijk zoals eentje pikken <img> hoe dan zowel, toegankelijkheid plusteken zo.

Maar er zijn momenten waarop den positie of schelp van eentje achtergrondafbeelding vermag ergens tussen den polen van inhoud plusteken decoratie zitten. Setting is monarch, weliswaar? Mits wij den positie van den achtergrondafbeelding wijzigen, vermag dit watten meer setting of ervaring overbrengen.

Hoe komt ie? Toestaan wij ooit loeren zoals eentje twee voorbeelden diegene ik heb zien rondzweven.

Mits wij aan den slag gaan, waarschuw ik dat er eentje dunne streep is ter dit demo’s tussen afbeeldingen diegene wordt tweedehands voordat decoratie plusteken afbeeldingen diegene mits inhoud wordt tweedehands. Ie verschil heeft implicaties voordat den toegankelijkheid wanneer achtergronden noch wordt aangekondigd aan schermlezers. Als je afbeelding echt een afbeelding isoverweeg dan misschien eentje <img> label met onberispelijk altstem tekst. Plus nu wij ie weliswaar overheen toegankelijkheid hebben, ie is eentje juist idee wegens dat te uitrichten houd rekening met de bewegingsvoorkeur van een gebruiker zowel.

Toon mij meer!

Chris Coyier heeft dit leuke kleine demo van enkele jaren geleden.

Den demo is ter veel opzichten superpraktisch omdat ie eentje handige methode is wegens advertenties ter inhoud weer te geven. Jij hebt ie verkooppraatje plusteken eentje verleidelijk imago wegens ie aan te vullen.

Den uitgestrekte restrictie voordat den meeste advertenties, moed ik te wedden, is ie beperkte onroerend juist. Ik weet noch of u uiteindelijk eentje annoncering op eentje pagina heeft willen plekken, maar ik heb dat gedaan plusteken vraag den adverteerder veelal wegens eentje ​​singeltje diegene voldoet aan den exacte pixelafmetingen, zodat ie voorwerp ter den ruimte past.

Maar den demo van Chris lost ie ruimteprobleem op. Beweeg den singeltje plusteken zie hoe dit zowel beweegt mits schaalt. Den gebruiker krijgt heus meer setting voordat ie product dan zij zullen hebben mits den singeltje ter den oorspronkelijke positie stond. Dat is eentje win-win, weliswaar? Den adverteerder vermag eentje opvallende singeltje maken zonder den setting ter onveiligheid te brengen. Terwijl krijgt den gebruiker eentje ietsje reserve waarde van den opzienbarend onthulde porties van den singeltje.

Mits jou zoals den opmaak van den demo kijkt, zul jou merken dat ie ruwweg is watten jou zullen vooruitzien. Hier is eentje verkorte versie:

<div class="ad-container">
  <a href="#" target="_blank" rel="noopener">
    <!-- Background image container  -->
    <div class="ad-image"></div>
  </a> 
  <div class="ad-content">
    <!-- Content -->
  </div>
</div>

Wij zullen waarschijnlijk eentje ietsje kunnen kibbelen overheen den semantiek, maar ginder gaat ie noch wegens. Wij hebben eentje container met eentje gekoppelde <div> voordat den achtergrondafbeelding plusteken nog eentje <div> wegens den inhoud vast te vasthouden.

Watten styling betreft, zijn den belangrijkste stukken hier:

.container {
  background-image: url("/path/to/some/image.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  height: 400px;
  width: 350px;
}

Noch slecht, weliswaar? Wij geven den container enkele afmetingen plusteken plekken er eentje achtergrondafbeelding op diegene noch wordt herhaald plusteken wordt gepositioneerd aan den linkeronderrand.

Den werkelijke trucage is met JavaScript. Wij zullen dat usances wegens den muispositie plusteken den offset van den container te krijgen, plusteken diegene waarde vervolgens verwisselen zoals eentje geschikte schelp wegens den background-position. Toestaan wij vantevoren luisteren zoals muisbewegingen op den .container factor:

let container = document.querySelector(".container");
container.addEventListener("mousemove", function(e) {
    // Our function
  }
);

Vanaf hier kunnen wij den container usances offsetX Plus offsetY eigenschappen. Maar wij zullen dit waarden noch meteen usances, omdat den waarde voordat den X-coördinaat kleiner is dan watten wij nodig hebben, plusteken den Y-coördinaat groter is. Wij zullen eentje ietsje willen spelen wegens eentje ​​constante te vinden diegene wij mits vermenigvuldiger kunnen usances.

Ie is eentje ietsje touch-and-feel, maar dat heb ik gevonden 1.32 Plus 0.455 werken volmaakt voordat respectievelijk den X- plusteken Y-coördinaten. Wij verveelvoudigen den offsets met diegene waarden, voegen a toe px unie op ie resultaat plusteken schrede ie dan toe op den background-position waarden.

let container = document.querySelector(".container");
container.addEventListener("mousemove", function(e) {
    container.style.backgroundPositionX = -e.offsetX * 1.32 + "px";
    container.style.backgroundPositionY = -e.offsetY * 0.455 + "px";
  }
);

Ten slotte kunnen wij den achtergrondposities zowel terugzetten zoals ie origineel mits den gebruiker den afbeeldingscontainer verlaat.

container.addEventListener("mouseleave", function() {
    container.style.backgroundPosition = "0px 0px";
  }
);

Daar wij CSS-Tricks usances, vermag ik overhandigen dat wij hier eentje veel goedkopere versie van hadden kunnen maken met eentje kleine zweefovergang ter vanille-CSS:

Schilder eentje groter singeltje

U bent ongetwijfeld ter eentje online kledingzaak of watten dan zowel geweest plusteken bent den oude zoom-on-hover-functie tegengekomen.

Dit raderblad bestaat alreeds voordat watten voelt mits eentje eeuwigheid (Dylan Winn-Brown deelde zijn methode terug in 2016), maar dat is slechts eentje bewijs (stapel ik) van ie zin ervan. Den gebruiker krijgt meer setting mits zij inzoomen plusteken eentje huis idee krijgen van ie stiksel van eentje trui of watten dan zowel.

Dit bestaat uit twee porties: den container plusteken den vergrootglas. Den container is ie enige dat wij nodig hebben ter den opmaak, omdat wij ie vergrootglaselement zullen spuiten tijdens den interactie van den gebruiker. Dus, aanschouw onze HTML!

<div class="container"></div>

​​Te den CSS zullen wij creëren width Plus height variabelen wegens den afmetingen van ie vergrootglas zelf op te slaan. Dan geven wij dat .containereentje vorm plusteken eentje background-image​:

​​:root {
​​  --magnifer-width: 85;
​​  --magnifer-height: 85;
​​}

.container {
  width: 500px;
  height: 400px;
  background-size: voorkant;
  background-image: url("/path/to/image.png");
  background-repeat: no-repeat;
  position: relative;
}

Er zijn eentje veel goedje diegene wij alreeds weten overheen ie vergrootglas voordat wij ie zelfs maar zien, plusteken wij kunnen diegene stijlen van tevoren definiëren, met name den voordien gedefinieerde variabelen voordat den .maginifier‘S width Plus height:

.magnifier {
  position: absolute;
  width: calc(var(--magnifer-width) * 1px);
​​  height: calc(var(--magnifer-height) * 1px);
​​  border: 3px solid #000;
​​  cursor: none;
​​  background-image: url("/path/to/image.png");
​​  background-repeat: no-repeat;
}

Ie is eentje absoluut gepositioneerd vierkantje dat gewoonte maakt van den dezelfde achtergrondafbeeldingsbestand mits den .container. Vasthouden er rekening mee dat den calc-functie hier uitsluitend wordt tweedehands wegens den eenheidsloze waarde ter den variabele wegens te zetwerk ter pixels. Voel jou vrij wegens dat zoals inherent inzicht te regelen, voordat zover ie repetitie ter jou code elimineert.

Toestaan wij nu loeren zoals ie JavaScript dat dit allen samenbrengt. Vooraf willen wij toegang krijgen totdat den voordien gedefinieerde CSS-variabele. Wij zullen dit straks op meerdere plekken usances. Dan willen wij den muispositie hierbinnen den container krijgen, want dat is den waarde diegene wij zullen usances voordat den achtergrondpositie van ie vergrootglas.

​​// Get the css variables
​​let root = window.getComputedStyle(document.documentElement);
​​let magnifier_width = root.getPropertyValue("--magnifer-width");
​​let magnifier_height = root.getPropertyValue("--magnifer-height");

let container = document.querySelector(".container");
let rect = container.getBoundingClientRect();
let x = (e.pageX - rect.left);
let y = (e.pageY - rect.top);

// Take pagina scrolling into account
x = x - window.pageXOffset;
y = y - window.pageYOffset;

Watten wij nodig hebben is werkelijk a mousemove gebeurtenislistener op den .container. Dan usances wij den event.pageX of event.pageY kenteken wegens den X- of Y-coördinaat van den muis te krijgen. Maar wegens den precies relatieve positie van den muis op eentje factor, willen wij den positie van ie bovenliggende factor distilleren van den muispositie diegene wij uit ie JavaScript hierboven halen. Eentje “eenvoudige” methode wegens dit te uitrichten is voort te usances getBoundingClientRect()diegene den universum van eentje factor plusteken zijn positie ten opzichte van den viewport retourneert.

Merknaam op hoe ik rekening vasthouden met scrollen. Mits er eentje portaal is, wordt ie venster afgetrokken pageX Plus pageY offsets zorgen ervoor dat ie effect werkt zoals verwachten.

Wij maken vantevoren ie vergrootglas div. Vervolgens maken wij eentje mousemove functie plusteken voeg dit toe aan den afbeeldingscontainer. Te dit functie geven wij ie vergrootglas eentje class-attribuut. Wij zullen zowel den muispositie calculeren plusteken ie vergrootglas den linker- plusteken opperste waarden geven diegene wij voordien hebben berekend.

Toestaan wij standhouden plusteken den opbouw magnifier mits wij eentje horen mousemove evenement op den .container:

// create the magnifier
let magnifier = document.createElement("div");
container.append(magnifier);

Nu willen wij ervoor zorgen dat ie eentje klassenaam heeft diegene wij kunnen usances voordat den CSS:

// run the function on `mousemove`
container.addEventListener("mousemove", (e) => {
  magnifier.setAttribute("class", "magnifier");
}

Den voorbeeldvideo diegene ik voordien liet zien, plaatst ie vergrootglas buitenshuis den container. Wij vasthouden dit eenvoudig plusteken leggen ie ter positie daarvan op den container terwijl den muis beweegt. Wij zullen usances if instructies wegens den positie van ie vergrootglas dolletjes ter te stellen mits den X- plusteken Y-waarden dat zijn groter of gelijkwaardig totdat nul, plusteken minder dan den breedte of hoogte van den container. Dat zullen ie hierbinnen den perken willen vasthouden. Zorg ervoor dat u den breedte plusteken hoogte van ie vergrootglas aftrekt van den X- plusteken Y-waarden.

// Run the function on mouse move.
container.addEventListener("mousemove", (e) => {
  magnifier.setAttribute("class", "magnifier");

  // Get mouse position
  let rect = container.getBoundingClientRect();
  let x = (e.pageX - rect.left);
  let y = (e.pageY - rect.top);
  
  // Take pagina scrolling into account
  x = x - window.pageXOffset;
  y = y - window.pageYOffset;

  // Prevent magnifier from exiting the container
  // Then set top and left values of magnifier
  if (x >= 0 && x <= container.clientWidth - magnifier_width) {
    magnifier.style.left = x + "px";
  }
  if (y >= 0 && y <= container.clientHeight - magnifier_height) {
    magnifier.style.top = y + "px";
  }
});

Mits laatste, maar zeker noch den minste… wij willen eentje ietsje spelen met den achtergrondafbeelding van ie vergrootglas. Ie hele punt is dat den gebruiker eentje GROTERE weergave van den achtergrondafbeelding krijgt op ondergrond van waar den zweefbeweging plaatsvindt. Toestaan wij dus eentje vergrootglas definiëren dat wij kunnen usances wegens goedje op te schalen. Vervolgens definiëren wij variabelen voordat den breedte plusteken hoogte van den achtergrondafbeelding, zodat wij iets hebben wegens diegene schelp op te funderen, plusteken stellen wij alreeds diegene waarden ter op den .magnifier stijlen:

// Magnifier image configurations
let magnify = 2;
let imgWidth = 500;
let imgHeight = 400;

magnifier.style.backgroundSize = imgWidth * magnify + "px " + imgHeight * magnify + "px";

​​Toestaan wij den X- plusteken Y-coördinaten van den singeltje van ie vergrootglas nemen plusteken dit toepassen op den .magnifierelementen background-position​. Zoals voordien met den positie van ie vergrootglas, willen wij den breedte plusteken hoogte van ie vergrootglas distilleren van den X- plusteken Y-waarden met behulp van den CSS-variabelen.

// the x and y positions of the magnifier image
let magnify_x = x * magnify + 15;
let magnify_y = y * magnify + 15;

// set backgroundPosition for magnifier if it is within image
if (
  x <= container.clientWidth - magnifier_width &&
  y <= container.clientHeight - magnifier_height
) {
  magnifier.style.backgroundPosition = -magnify_x + "px " + -magnify_y + "px";
}

Tadaa!

Maak ie filmisch

Heb jou den …. waargenomen Ken Burns-effect? Ie is eentje klassiek plusteken tijdloos ding waarbij eentje singeltje groter is dan den container waarin dit zichzelf bevindt, plusteken vervolgens eentje ietsje glijdt plusteken schaalt mits eentje treuzelaar. Vrijwel elke documentaire filmrolletje ter wereld lijkt ie te usances voordat beeldstills. Mits jou eentje Apple TV hebt, dan heb jou diegene zeker waargenomen op den screensaver.

Er zijn veel van voorbeelden op CodePen mits jou eentje huis idee wilt krijgen.

Jij zult zien dat er eentje veel wegen zijn wegens dit aan te pakken. Sommigen usances JavaScript. Anderen zijn 100% CSS. Ik weet zeker dat den JavaScript-benaderingen juist zijn voordat sommige toepassingen, maar mits ie doelwit simpelweg is wegens den singeltje subtiel te schalen, is CSS volmaakt geschikt.

Wij zullen den goedje eentje ietsje kunnen opfleuren voort meerdere achtergronden te usances ter positie van één. Of, huis nog, mits wij den regels uitbreiden wegens elementen te usances ter positie van achtergrondafbeeldingen, kunnen wij dezelfde animatie toepassen op alle achtergronden plusteken eentje vleugje animation-delay wegens ie effect te spreiden.

Er zijn natuurlijk veel wegen wegens dit te uitrichten! Ie vermag zeker wordt geoptimaliseerd met Sass- plusteken/of CSS-variabelen. Heck, misschien lukt ie jou met eentje single <div> Zo ja, sector ie dan ter den comments!

Toeslag: maak ie meeslepend

Ik weet noch of er iets cooler is dan dat van Sarah Drasner “Happy Halloween”-pen… plusteken dat is van 2016! Ie is eentje juist voorbeeld van ie ter liggen aangeven van achtergronden plusteken dit met verschillende snelheden verschuiven wegens eentje ​​haast filmische ervaring te creëren. Godzijdank is dat cool!

GSAP is ginder den belangrijkste drijfveer, maar ik stel mij voordat dat wij eentje ingekookte versie zullen kunnen maken diegene eenvoudig elke achtergrondlaag van linksom zoals rechts vertaalt met verschillende snelheden. Noch zo cool natuurlijk, maar zeker den basiservaring. Zorg ervoor dat ie start plusteken einde van elke achtergrondafbeelding consistent is, zodat dit naadloos wordt herhaald wanneer den animatie wordt herhaald.

Dat is ie voordat nu! Best netjes dat wij achtergronden voordat veel meer kunnen usances dan textuur plusteken tegenstelling. Ik ben er absoluut zeker van dat er tal van andere slimme interacties zijn diegene wij op achtergronden kunnen toepassen. Temani Afif deed precies dat met een heleboel leuke zweefeffecten voor links. Watten heb jou ter overwegingen? Percentage ie met mij ter den comments!