Bounce-Element Rond de Viewport in CSS

0
17

Laten we zeggen dat je gaat stuiteren een element rondom een scherm, ongeveer zoals een oude school screensaver of Pong of iets.

Je zou waarschijnlijk het bijhouden van de X-locatie van het element, te verhogen of te verlagen, in een tijd loop en — als het element bereikt de maximale of minimale waarde — het zou de omgekeerde richting. Doe daarna hetzelfde met de Y-locatie en je hebt het effect dat we na. Eenvoudig genoeg met wat JavaScript en wiskunde.

Hier is De Codering van de Trein uit te leggen, duidelijk:

Hier is een canvas uitvoering. Het is Pong dus factoren in de peddels en is iets ingewikkelder, maar de elementaire wiskunde is er nog:

Zie de Pen
Pong door Joseph Gutierrez (@DerBaumeister)
op CodePen.

Maar wat als we wilden doen dit puur in CSS? We kunnen schrijven @keyframes het verplaatsen van het deelvenster transformeren of in linker – /boven-eigenschappen… maar wat waarden zouden we gebruiken? Als we proberen te stuiteren rond het hele scherm (viewport), zouden we moeten weten dat de afmetingen van het scherm en dan gebruik maken van die waarden. Maar we weten nooit dat de exacte grootte in CSS.

Of doen we?

CSS heeft viewport eenheden, die zijn gebaseerd op de grootte van de gehele viewport. Plus, we hebben calc() en we vermoedelijk weten de grootte van onze eigen element.

Dat is de slimme wortel van Scott Kellum de demo:

Zie de Pen
Codepen screensaver door Scott Kellum (@scottkellum)
op CodePen.

De extra lastige deel is het breken van de X-animatie en de Y animatie uiteen in twee afzonderlijke animaties (een op een ouder en een kind), zodat, wanneer de richting draait, kan het gebeuren onafhankelijk van elkaar en het ziet er meer screensaver-achtig.

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

.el {
breedte: var(–breedte);
hoogte: var(–breedte);
}

.x {
animatie: x var(–x-snelheid) lineaire oneindige plaatsvervanger;
}
.y {
animatie: y-var(–y-speed) lineaire oneindige plaatsvervanger;
}

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

Ik heb dat idee, en voegde een aantal blobbiness en een extra element voor deze kleine demo:

Zie de Pen
Morphing Blogs met `border-radius` van Chris Coyier (@chriscoyier)
op CodePen.