Bounce-Element Um Viewport in CSS

0
22

Lassen Sie uns sagen, Sie waren gonna bounce ein element alle um einen Bildschirm, sorta wie eine old-school screensaver oder Pong oder so etwas.

Sie würden wahrscheinlich um die X-Position des Elements, erhöhen oder verringern in einer Zeit-Schleife und — wenn das element erreicht den maximalen oder minimalen Wert, würde es in umgekehrter Richtung. Dann tun Sie das gleiche mit der Y-Position und Sie haben die Wirkung, die wir suchen. Einfach genug, mit einigen JavaScript und Mathematik.

Hier ist Die Codierung Zug erklärt es klar und deutlich:

Hier ist eine Leinwand-Umsetzung. Es ist Pong, so dass es Faktoren in der Paddel-und ist etwas komplizierter, aber die grundlegende Mathematik ist immer noch da:

Siehe Stift
Pong von Joseph Gutierrez (@DerBaumeister)
auf CodePen.

Aber was, wenn wir wollten, tun das rein in CSS? Wir könnten schreiben @keyframes verschieben Sie die Transformation oder Links/top-Eigenschaften… aber welche Werte sollten wir verwenden? Wenn wir versuchen zu hüpfen, den gesamten Bildschirm (viewport), würden wir brauchen, um zu wissen, die Abmessungen des Bildschirms, und verwenden Sie dann diese Werte. Aber wir werden nie wissen, die genaue Größe in CSS.

Oder tun wir?

CSS viewport-Einheiten, basierend auf der Größe des gesamten viewport. Plus, wir haben calc() und wir wohl wissen, die Größe unserer eigenen element.

Das ist die clevere Wurzel Scott Kellum demo:

Siehe Stift
Codepen Bildschirmschoner von Scott Kellum (@scottkellum)
auf CodePen.

Die extra-knifflige Teil ist das brechen der X-animation und die Y-animation auseinander in zwei getrennte Animationen (ein Elternteil und ein Kind), so dass, wenn die Richtung dreht, kann es passieren, unabhängig voneinander, und es sieht mehr Bildschirmschoner-wie.

<div class=”el-wrap-x”>
<div class=”el ” y”></div>
</div>
:root {
–width: 300px;
–x-speed: 13s;
–y-Geschwindigkeit: 7s;
–übergangs-Geschwindigkeit: 2.2 s;
}

.el {
Breite: var (- Breite);
Höhe: var (- Breite);
}

.x {
animation: x var (- x-Geschwindigkeit) linear infinite alternate;
}
.y {
animation: y var(–y-Geschwindigkeit) linear infinite alternate;
}

@keyframes x {
100% {
transform: translateX(calc(100vw – var (- width)));
}
}
@keyframes y {
100% {
transform: translateY(calc(100vh – var (- width)));
}
}

Ich habe diese Idee, und fügte einige blobbiness und ein zusätzliches element für diese kleine demo:

Siehe Stift
Morphing-Blogs mit `border-radius` von Chris Coyier (@chriscoyier)
auf CodePen.