Sprette Element Rundt Vindu i CSS

0
13

La oss si at du var skal sprette et element rundt en skjerm, sorta som en gammel skole skjermsparer eller Pong eller noe.

Du vil sannsynligvis bli sporing X plasseringen til elementet, for å øke eller redusere det i en tid loop og — når elementet nådd maksimum eller minimum verdi — det ville motsatt retning. Gjør så det samme med Y-posisjon, og du har den effekten vi er ute etter. Enkel nok med noen JavaScript og matematikk.

Her er Koding Tog forklare det tydelig:

Her er et lerret gjennomføring. Det er Pong så det faktorer i årer og er litt mer komplisert, men den grunnleggende matematikk er der fortsatt:

Se Penn
Pong av Joseph Gutierrez (@DerBaumeister)
på CodePen.

Men hva hvis vi ønsket å gjøre dette rent i CSS? Vi kan skrive @keyframes som beveger transformere eller til venstre/topp egenskaper… men hva slags verdier skulle vi bruke? Hvis vi prøver å sprette rundt hele skjermen (vindu), hadde vi trenger å vite størrelsen på skjermen, og deretter bruke disse verdiene. Men vi vet aldri nøyaktig størrelse i CSS.

Eller gjør vi?

CSS har viewport enheter, som er basert på størrelsen av hele vinduet. Pluss at vi har fått calc() og vi antagelig vet størrelsen på vårt eget element.

Det er smart roten av Scott Kellum er demo:

Se Penn
Codepen screensaver av Scott Kellum (@scottkellum)
på CodePen.

Den ekstra vanskelige delen er å bryte X animasjon og Y-animasjon fra hverandre i to separate animasjoner (en på en forelder og ett barn) slik at når den retning reverserer, det kan skje uavhengig av hverandre, og det ser mer skjermsparer som.

<div class=”el-wrap x”>
<div class=”el y”></div>
</div>
:root {
–bredde: 300px;
–x-hastighet: 13s;
–y-hastighet: 7s;
–overgang-hastighet: 2.2 s;
}

.el {
bredde: var(–bredde);
høyde: var(–bredde);
}

.x {
animasjon: x var(–x-hastighet) lineær uendelig alternativ;
}
.y {
animasjon: y var(–y-hastighet) lineær uendelig alternativ;
}

@keyframes x {
100% {
forvandle: translateX(calc(100vw – var(–bredde)));
}
}
@keyframes y {
100% {
forvandle: translateY(calc(100vh – var(–bredde)));
}
}

Jeg stjal ideen, og lagt til noen blobbiness og et ekstra element for denne lille demo:

Se Penn
Morphing Blogger med “border-radius” av Chris Coyier (@chriscoyier)
på CodePen.