Obsah
- 01. Efekt převrácení textu
- 02. Vytvořte CSS
- 03. Umístěte slovo
- 04. Nahoru a znovu
- 05. Vznášející se dolů
- 06. Automatický pro lidi
- 07. Přidejte střídavé třídy
Rollover links jsou skvělý způsob, jak upoutat pozornost uživatele, zejména pokud dělají něco neobvyklého nebo originálního. Middle Child má skvělý efekt, jinde zřídka viděný, který zachycuje každé písmeno a rozděluje je od sebe pomocí animace, která se spustí, když se návštěvník vznáší nad slovem. Animace pomáhá vyjádřit hravou povahu sendvičové značky.
V tomto článku vám ukážeme, jak znovu vytvořit efekt na vašem webu. Další inspiraci najdete v našem průvodci nejlepšími příklady animací CSS (s pokyny, jak je kódovat). Chcete-li něco trochu jiného, vyzkoušejte špičkový nástroj pro tvorbu webových stránek nebo náš výběr nejlepšího cloudového úložiště. A pokud děláte svůj web složitějším, ujistěte se, že je váš webhosting na místě.
01. Efekt převrácení textu
Jedním z velkých textových efektů na webu Middle Child je efekt přechodu v nabídce, kde se písmena rozdělují od sebe a mírně se otáčejí. Začněte s několika jednoduchými značkami HTML.
div> div> Snídaně / div> / div>
02. Vytvořte CSS
Pomocí samostatného souboru CSS nebo značek stylů přidejte následující pravidla CSS a zajistěte, aby stránka vyplňovala plnou velikost prohlížeče zajištěním těla a obálky, aby byla k dispozici celá výška.
tělo {šířka: 100%; výška: 100%; okraj: 0; výplň: 0; } .wrapper {display: grid; výška: 100%; }
03. Umístěte slovo
The slovo třída vycentruje slovo do mřížky. Jakýkoli text, který je uveden slovo třída může toto použít. The nahoru třída bude aplikována na každé další písmeno a ty se posunou nahoru.
.word {font-size: 3em; okraj: auto auto; } .word .up {display: inline-block; transformace: translate3d (0px, 0px, 0px) rotace (0deg); přechod: všech 0,5 s easy-in-out; }
04. Nahoru a znovu
Nyní dolů třída sdílí velmi podobná nastavení jako nahoru ale vznášet se ukazuje pohyb nahoru pro nahoru převrátit se. Nahoru je také mírně otočen, aby se vylepšil vzhled.
.word .down {display: inline-block; transformace: translate3d (0px, 0px, 0px) rotace (0deg); přechod: všech 0,5 s easy-in-out; } .word: hover .up {transformace: translate3d (0px, -8px, 0px) rotate (12deg); barva: # 058b05}
05. Vznášející se dolů
Když uživatel umístí ukazatel myši na text, třída dolů posune text dolů. Později v JavaScriptu bude text rozdělen na samostatná rozpětí s automatickým přidáváním tříd do alternativních rozpětí.
.word: hover .down {transformace: translate3d (0px, 8px, 0px) rotace (-12deg); barva: # 058b05; }
06. Automatický pro lidi
Je trochu obtížné dávat každé písmeno do střídavého rozpětí s různými třídami, takže tento proces zautomatizujeme tím, že necháme JavaScript, aby dotazoval selektor a vzal každé písmeno. Tady str proměnná uchopí aktuální písmeno při procházení textu.
skript> var elements = document.querySelectorAll („.word“); for (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; elements [i] .innerHTML = ““;
07. Přidejte střídavé třídy
Nyní další smyčka umístí každé písmeno do vlastního prvku span a přidá buď nahoru nebo dolů třídy do rozpětí. Podíváte-li se na to v prohlížeči, uvidíte text rozdělený podle jednotlivých písmen nahoru a dolů při mírném otáčení.
Účinek můžete vidět v akci na webu Middle Child.
for (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement ('span'); prvky [i] .appendChild (spn); spn.textContent = str [j]; let pos = (j% 2)? „Nahoru“: „dolů“; spn.classList.add (pos); }} / skript>
Tento článek byl původně publikován v časopise Creative Web Design Webový designér.Koupit číslo 286 nebo předplatit.
