Inhalt
- 01. Rollover-Texteffekt
- 02. CSS erstellen
- 03. Positionieren Sie das Wort
- 04. Auf und ab
- 05. Nach unten schweben
- 06. Automatisch für die Menschen
- 07. Fügen Sie abwechselnde Klassen hinzu
Rollover-Links sind eine großartige Möglichkeit, die Aufmerksamkeit eines Benutzers auf sich zu ziehen, insbesondere wenn sie etwas Ungewöhnliches oder Originelles tun. Mittleres Kind hat einen großartigen Effekt, der selten anderswo zu sehen ist, der jeden Buchstaben erfasst und ihn mit Animationen aufteilt, die aktiviert werden, wenn der Besucher über dem Wort schwebt. Die Animation vermittelt den verspielten Charakter der Sandwichmarke.
In diesem Artikel zeigen wir Ihnen, wie Sie den Effekt auf Ihrer Site wiederherstellen können. Weitere Inspirationen finden Sie in unserem Handbuch zu den besten CSS-Animationsbeispielen (mit Anweisungen zum Codieren). Versuchen Sie für etwas anderes einen Top-Website-Builder oder unsere Auswahl des besten Cloud-Speichers. Wenn Sie Ihre Website komplexer gestalten, stellen Sie sicher, dass Ihr Webhosting auf dem neuesten Stand ist.
01. Rollover-Texteffekt
Einer der großartigen Texteffekte auf der Middle Child-Website sind die Rollover-Effekte im Menü, bei denen die Buchstaben im Text getrennt und leicht gedreht werden. Beginnen Sie dies mit einigen einfachen HTML-Tags.
div> div> Frühstück / div> / div>
02. CSS erstellen
Verwenden Sie eine separate CSS-Datei oder Stil-Tags, um die folgenden CSS-Regeln hinzuzufügen und die Seite in voller Größe des Browsers auszufüllen, indem Sie sicherstellen, dass der Textkörper und der Wrapper die volle verfügbare Höhe einnehmen.
Körper {Breite: 100%; Höhe: 100%; Rand: 0; Polsterung: 0; } .wrapper {display: grid; Höhe: 100%; }}
03. Positionieren Sie das Wort
Das Wort Klasse zentriert das Wort im Raster. Jeder Text, der die gegeben wird Wort Klasse kann dies angewendet haben. Das oben Die Klasse wird auf jeden anderen Buchstaben angewendet und diese bewegen sich nach oben.
.word {Schriftgröße: 3em; Rand: Auto Auto; } .word .up {display: inline-block; transformieren: translate3d (0px, 0px, 0px) drehen (0deg); Übergang: alle 0,5 Sekunden Easy-In-Out; }}
04. Auf und ab
Jetzt die Nieder Klasse teilt sehr ähnliche Einstellungen wie die oben aber der Schwebeflug zeigt die Bewegung nach oben für die oben sich umdrehen. Nach oben wird auch leicht gedreht, um das Aussehen zu verbessern.
.word .down {Anzeige: Inline-Block; transformieren: translate3d (0px, 0px, 0px) drehen (0deg); Übergang: alle 0,5 Sekunden Easy-In-Out; } .word: hover .up {transform: translate3d (0px, -8px, 0px) drehen (12 Grad); Farbe: # 058b05}
05. Nach unten schweben
Wenn der Benutzer mit der Maus über den Text fährt, verschiebt die Abwärtsklasse den Text nach unten. Später in JavaScript wird der Text in separate Bereiche aufgeteilt, wobei die Klassen automatisch zu alternativen Bereichen hinzugefügt werden.
.word: hover .down {transform: translate3d (0px, 8px, 0px) drehen (-12 Grad); Farbe: # 058b05; }}
06. Automatisch für die Menschen
Es ist ein bisschen mühsam, jeden Buchstaben in abwechselnde Bereiche mit verschiedenen Klassen zu setzen. Daher automatisieren wir den Prozess, indem JavaScript den Selektor abfragt und jeden Buchstaben nimmt. Hier die str Variable erfasst den aktuellen Buchstaben, während er den Text durchläuft.
script> var elements = document.querySelectorAll (’.word’); für (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; elements [i] .innerHTML = ’’;
07. Fügen Sie abwechselnde Klassen hinzu
Jetzt platziert eine andere Schleife jeden Buchstaben in einem eigenen span-Element und fügt entweder das hinzu oben oder Nieder Klasse zu den Spannweiten. Wenn Sie dies im Browser betrachten, sehen Sie den Text, der durch jeden Buchstaben nach oben und unten geteilt wird, während Sie ihn leicht drehen.
Sie können den Effekt in Aktion auf der Middle Child-Website sehen.
für (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (’span’); elements [i] .appendChild (spn); spn.textContent = str [j]; sei pos = (j% 2)? 'oben unten'; spn.classList.add (pos); }} / script>
Dieser Artikel wurde ursprünglich im Creative Web Design Magazine veröffentlicht Webdesigner.Ausgabe 286 kaufen oder abonnieren.
