3D-Animation in JS
Der erste Trick ist ein wunderbarer 3D-Effekt in JS.
Wie Sie sehen können, werden die darin enthaltenen Elemente dreidimensional, wenn sich der Mauszeiger über diese "Karte" bewegt.
Wie es geht
Zuerst wird das HTML-Div erstellt:
<div class="card">
<div class="header">
<img src='image.png' alt="image">
</div>
<div class="info">
<h1 class="title"><a href="https://hackerone.com/hensis">Hackerone</a></h1>
<h3>Started on 6/20 Signal : 5.67 Reputation : 360 Impact : 26.25</h3>
</div>
</div>
Hier haben wir eine Hauptklasse (Karte) und zwei weitere Klassen innerhalb der Karte (Header und Info). Die Kopfzeile ist die Klasse, die das Bild enthält (in unserem Beispiel das Medium-Logo), und die Informationen enthalten den Text auf der Karte. Fügen wir nun etwas CSS hinzu, damit die Karte besser aussieht.
.card {
transform-style: preserve-3d;
min-height: 64vh;
width: 20vw;
border-radius: 30px;
padding: 0rem 5rem;
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.2);
}
Hier habe ich Höhe, Breite, Rand, Polsterung und Schatten angegeben. Aktualisieren Sie die Seite und Sie sollten die Ergebnisse sehen. Der letzte Schritt besteht darin, einen 3D-Effekt zu erzielen, wenn Sie mit der Maus über die Karte fahren. Dafür habe ich JS verwendet:
// declaring variables
const card = document.querySelector(".card");
const title = document.querySelector(".title");
const header = document.querySelector(".header img");
const description = document.querySelector(".info h3");
// Animate In
card.addEventListener("mouseenter", (e) => {
card.style.transition = "none";
title.style.transform = "translateZ(3px)";
header.style.transform = "translateZ(3px) rotateZ(0deg)";
description.style.transform = "translateZ(3px)";
});
// Animate Out
card.addEventListener("mouseleave", (e) => {
card.style.transition = "all 0.5s ease";
card.style.transform = `rotateY(0deg) rotateX(0deg)`;
title.style.transform = "translateZ(0px)";
header.style.transform = "translateZ(0px) rotateZ(0deg)";
description.style.transform = "translateZ(0px)";
});
- Variablen deklarieren.
- Erstellen Sie zwei Ereignis-Listener für die Karte.
- Übersetzen Sie im Mouseenter Z in 3 Pixel für Titel, Kopfzeile und Beschreibung. Sie können auch entscheiden, ob diese Elemente gedreht werden sollen oder nicht (rotateZ).
- Bringen Sie auf Mouseleave alles wieder in den Normalzustand.
Das war's: Sie haben eine wunderschöne 3D-Animation. Natürlich ist es jetzt roh. Sie können überall CSS hinzufügen, um die Breite, Farbe usw. zu ändern.
Entdecken Sie Vanta.js für Hintergrundanimationen
Sind Sie müde von statischen Farben und Bildern auf Ihrem Webseitenhintergrund? VantaJs soll den Hintergrund zum Leben erwecken:
Wie es gemacht wird
Es ist ziemlich einfach. Fügen Sie HTML den folgenden Code hinzu:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<script>
VANTA.GLOBE({
el: "#htmlid",
mouseControls: true,
touchControls: true,
gyroControls: true,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00
})
</script>
Dadurch wird der Hintergrund von Vanta.js Globe auf die HTML-ID gesetzt.
Vanta.js hat 13 vorgefertigte Hintergründe
Um zwischen ihnen zu wechseln, ändern Sie VANTA.GLOBE in VANTA. [Hintergrundname]. Zuvor müssen Sie natürlich die entsprechende Datei cdn.jsdelivr.net/npm/vanta@latest/dist/vanta hinzufügen . [Hintergrundname] .min.js.
ScrollReveal
Für diejenigen, die diese fantastische JS-Bibliothek nicht kannten, kann ScrollReveal beim Scrollen einer Webseite Elemente anzeigen:
Wie es gemacht wird
- Fügen Sie dem Header Ihres HTML hinzu.
- In die JS-Datei schreiben:
ScrollReveal().reveal('.htmlclass',{ delay: 400 })
Der Code rendert ein Element mit der Klasse .htmlclass mit einer Verzögerung von 400 ms beim Scrollen der Seite.
Ändern Sie die Größe und Farbe der Buchstaben
Dieser kleine CSS-Trick ist bei richtiger Anwendung wirklich beeindruckend:
Vorgehensweise
Erstellen Sie einige neue HTML-Span-Elemente und geben Sie deren Klasse an:
<span class="change">T</span><span class="change">e</span><span class="change">s</span><span class="change">t</span>
3. Anwenden von CSS: Hover, wir ändern die Größe der Buchstaben und ihre Farbe:
.blast:hover {
color:#08fdd8;
font-size: 30px;
}
Wenn Sie jetzt mit der Maus über die Buchstaben fahren, sehen Sie, wie sie Größe und Farbe ändern. Um einen noch dynamischeren Effekt zu erzielen, empfehle ich, für jeden Buchstaben eine eigene Klasse mit unterschiedlichen Größen und Farben zu erstellen. Alternativ können Sie CSS: hover auf jeden Elementtyp in HTML anwenden. Zum Beispiel habe ich es auch auf mein Kontaktformular angewendet:
Animationseigenschaft
Wir haben das Material durch eine Beschreibung einer Immobilie aus einem Artikel von Chris Coyer ergänzt.
Die Animationseigenschaft in CSS kann verwendet werden, um viele andere CSS-Eigenschaften wie Farbe , Hintergrundfarbe , Höhe oder Breite zu animieren . Jede Animation muss mit @keyframes definiert werden, das dann über die Animationseigenschaft aufgerufen wird, zum Beispiel:
.element {
animation: pulse 5s infinite;
}
@keyframes pulse {
0% {
background-color: #001F3F;
}
100% {
background-color: #FF4136;
}
}
Jede @ keyframes-Regel definiert, was an bestimmten Punkten in der Animation geschehen soll. Zum Beispiel ist 0% der Anfang der Animation und 100% das Ende. Diese Keyframes können entweder mit der Shorthand-Eigenschaft der Animation oder ihren acht Untereigenschaften bearbeitet werden, um mehr Kontrolle über die Keyframes zu erhalten.
Untereigenschaften
- Animationsname: Gibt den Namen der zu steuernden @ keyframes-Regel an.
- Animationsdauer: Dauer eines Animationszyklus.
- Animationszeitfunktion: Legt vordefinierte Beschleunigungskurven wie Leichtigkeit oder Linear fest.
- Animationsverzögerung: Die Zeit zwischen dem Laden des Elements und dem Start der Animationssequenz ( interessante Beispiele ).
- Animationsrichtung: Legt die Richtung der Animation nach der Schleife fest. Der Standardwert wird bei jedem Zyklus zurückgesetzt.
- Animation-Iterations-Anzahl: Wie oft die Animation ausgeführt werden soll.
- Animationsfüllmodus: Legt fest, welche Werte vor / nach der Animation angewendet werden.
Sie können beispielsweise festlegen, dass der letzte Status der Animation auf dem Bildschirm angezeigt wird, oder dass er nach dem Start der Animation zurückgeschaltet wird. - Animations-Wiedergabestatus: Animation anhalten / abspielen.
Dann können diese Untereigenschaften wie folgt angewendet werden:
@keyframes stretch {
/* declare animation actions here */
}
.element {
animation-name: stretch;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
/*
is the same as:
*/
.element {
animation:
stretch
1.5s
ease-out
0s
alternate
infinite
none
running;
}
Hier ist eine vollständige Liste der Werte, die jede dieser verschachtelten Eigenschaften annehmen kann:
animation-timing-function
|
Leichtigkeit, Leichtigkeit, Leichtigkeit, Leichtigkeit, Linear, kubischer Bezier (x1, y1, x2, y2) (z. B. kubischer Bezier (0,5, 0,2, 0,3, 1,0)) |
animation-duration
|
Xs oder Xms |
animation-delay
|
Xs oder Xms |
animation-iteration-count
|
X. |
animation-fill-mode
|
vorwärts, rückwärts, beide, keine |
animation-direction
|
normal, alternativ |
animation-play-state
|
pausierte, rannte, rannte |
Wenige Schritte
Wenn die Animation dieselben Start- und Endeigenschaften hat, ist es hilfreich, die Werte 0 und 100% in @keyframes durch Kommas zu trennen:
@keyframes pulse {
0%, 100% {
background-color: yellow;
}
50% {
background-color: red;
}
}
Mehrere Animationen
Sie können die Werte durch Kommas trennen, um auch mehrere Animationen im Selektor zu deklarieren. Im folgenden Beispiel möchten wir die Farbe des Kreises in @keyframe ändern, während wir ihn mit einer anderen Eigenschaft von einer Seite zur anderen verschieben.
.element {
animation:
pulse 3s ease infinite alternate,
nudge 5s linear infinite alternate;
}
Performance
Das Animieren der meisten Eigenschaften ist ein Leistungsproblem. Daher müssen wir vorsichtig sein, bevor wir eine Eigenschaft animieren. Es gibt jedoch bestimmte Kombinationen, die sicher animiert werden können:
- transformieren: translate ()
- transformieren: scale ()
- transformieren: drehen ()
- Opazität
Welche Eigenschaften können Sie animieren?
MDN verfügt über eine Liste von CSS-Eigenschaften, die animiert werden können . Sie neigen dazu, Farben und Zahlen zu sein. Ein Beispiel für eine nicht animierte Eigenschaft ist das Hintergrundbild.
Browser-Unterstützung
Diese Browser-Supportdaten stammen von der Caniuse- Website, um weitere Informationen zu erhalten. Die Nummer bedeutet, dass der Browser die Funktion in dieser Version und höher unterstützt.
Tischplatte
| Chrom
|
Feuerfuchs
|
IE
|
Kante
|
Safari
|
| 4 *
|
5 *
|
zehn
|
12
|
5,1 *
|
Handy, Mobiltelefon
| Android Chrome
|
Android Firefox
|
Android
|
iOS Safari
|
| 87
|
83
|
4 *
|
6,0-6,1 *
|
Präfixe
Obwohl die Unterstützung für diese Eigenschaft in modernen Browsern gut genug ist, möchten wir möglicherweise so viele ältere Browser wie möglich unterstützen. In diesem Fall müssen Sie Herstellerpräfixe verwenden:
.element {
-webkit-animation: KEYFRAME-NAME 5s infinite;
-moz-animation: KEYFRAME-NAME 5s infinite;
-o-animation: KEYFRAME-NAME 5s infinite;
animation: KEYFRAME-NAME 5s infinite;
}
@-webkit-keyframes KEYFRAME-NAME {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes KEYFRAME-NAME {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes KEYFRAME-NAME {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes KEYFRAME-NAME {
0% { opacity: 0; }
100% { opacity: 1; }
}
Diese Tricks eignen sich hervorragend, um Ihre Visitenkarten-Site oder die Site eines Haustierprojekts, an dem Sie arbeiten, zum Leben zu erwecken. Wenn Sie eigene Tricks haben, empfehle ich Ihnen, diese in den Kommentaren zu teilen. Und vergessen Sie nicht den HABR-Gutscheincode , mit dem Sie zusätzlich 10% Rabatt auf den auf dem Banner angegebenen Code erhalten .
