Jak kódovat inteligentní textové efekty s CSS

Jan 29, 2026
jak
Image: Middle Child
[Image: Střední dítě]

Odkazy převrácení jsou skvělým způsobem, jak chytit pozornost uživatele, zvláště pokud dělají něco neobvyklého nebo originálního. Střední dítě má velký účinek, zřídka viděný jinde, který zachycuje každé písmeno a rozděluje je s animací, které kopy, když návštěvník se přes slovo objeví. Animace pomáhá sdělit hravý charakter značky Sandwich.

V tomto článku vám ukážeme, jak znovu vytvořit efekt na vaše stránky. Pro více inspiraci se podívejte na náš průvodce Nejlepší CSS animace příklady (s pokyny, jak je kódovat). Pro něco trochu jiného, ​​zkuste horní Webové stránky Builder. Nebo naše výběr nejlepšího cloudové úložiště . A pokud děláte své stránky složitější, ujistěte se web hosting je na místě.

01. Textový efekt převrácení

Jeden z velkých textových efektů na webových stránkách Středního dítěte je pro efekty převrácení v menu, kde se písmena rozdělena na text a otáčejí se mírně. Spusťte to s některými jednoduchými značkami HTML. 

 & lt; divá třída = "wrapper" & gt;
& lt, divová třída = "slovo" & gt; snídaně & lt; / div & gt;
& lt; / div & gt;

02. Vytvořit CSS.

Použijte samostatný soubor CSS nebo značky stylů CSS, abyste přidali následující pravidla CSS a vytvořte stránku plnou velikost prohlížeče tím, že zajistí tělo a obal vezme plnou výšku k dispozici. 

 Tělo {
šířka: 100%;
výška: 100%;
marže: 0;
Polstrování: 0;
}
.wrapper {
Displej: mřížka;
výška: 100%;
}

03. Umístěte slovo

. \ T slovo Centra třídy Slovo v mřížce. Jakýkoli text, který je dán slovo Třída může mít aplikován. . \ T nahoru Třída bude aplikována na každý jiný dopis a tyto se budou pohybovat nahoru. 

. Sword {
Velikost písma: 3EM;
Margin: Auto Auto;
}

.word .up.up
{
Displej: inline-blok;
Transformace: Translate3d (0px, 0px, 0px)
otočit (0deg);
Přechod: Všechna 0,5s uvolnění;
}

04. nahoru a více

Teď. dolů Třída sdílí velmi podobná nastavení nahoru Ale vznášení ukazuje pohyb nahoru pro nahoru převalit se. Vzhůru se také mírně otáčí, aby se zvýšil vzhled. 

 .Word.
{
Displej: inline-blok;
Transformace: Translate3d (0px, 0px, 0px)
otočit (0deg);
Přechod: Všechna 0,5s uvolnění;
}

Sword: Hover.
{
Transformace: Translate3d (0px, -8px, 0px)
otočit (12deg);
Barva: # 058b05
}

05. Vznášející se dolů

Když uživatel se pohybuje přes text, třída Down přesune text směrem dolů. Později v JavaScriptu bude text rozdělen do samostatných rozpětí se třídami automaticky přidaných do alternativních rozpětí. 

. Sword: vznášet se.
Transformace: Translate3d (0px, 8px, 0px)
otočit (-12deg);
Barva: # 058b05;
}

06. Automatické pro lidi

Je to trochu potíže muset dát každý dopis ve střídavých rozpětí s různými třídami, takže budeme proces automatizovat tím, že dostaneme JavaScript dotazem voliče a vzít každý dopis. Tady. str Proměnná popadne aktuální dopis, protože smyčky přes text. 

 Script & gt;
var elementů = dokument.querySelektorall
('.slovo');
pro (var i = 0, l = prvky.Length; i
& lt; l; i ++) {
var str = prvky [i] .TextContent;
prvky [i] .innerhtml = '';

07. Přidat střídavé třídy

Nyní další smyčka umístí každé písmeno ve vlastním prvku rozpětí a přidává buď nahoru nebo dolů třída do rozpětí. Pokud se na to podíváte v prohlížeči, uvidíte text rozdělit každým písmenem nahoru a dolů, přičemž se mírně otáčejí.

Můžete vidět efekt v akci na Webové stránky středního dítěte . 

 pro (var j = 0, ll = str.length; j
& lt; ll; j ++) {
VAR SPN = Document.Createelement ('rozpětí');
prvky [i] .appendChild (SPN);
spn.textcontent = str [j];
Nechte pos = (j% 2)? 'nahoru': 'Down';
spn.classlist.add (POS);
}
 }
& lt; / script & gt;

Tento článek byl původně publikován v časopisu Creative Web Design Web Designer. . Prodám vydání 286. nebo předplatit .

Přečtěte si více:

  • Přidejte filtry SVG s CSS
  • Jak navrhnout tvary CSS: Úvod
  • 5 Cool CSS Grid generátory

jak - Nejoblíbenější články

Jak používat inteligentní vrstvy ve Photoshopu

jak Jan 29, 2026

Při inkorporaci opakování návrhů a vzorů do obrázku bude málo nástrojů tak užitečné nebo stejně jako silné jako in..

Vytvoření více expozičního obrazu s Adobe CC

jak Jan 29, 2026

Adobe mi pověděl s vytvořením obrázku pro vyjádření konceptu multilocalismu a vyšší, můžete vidět svou odpověď. V tomto tutoriálu budu procházet svým kreativním procesem p..

Mistr vědy o optimalizaci rychlosti konverze

jak Jan 29, 2026

Optimalizace rychlosti konverze (CRO) je proces maximalizace konverzí ze stávajícího provozu. Pokud například dostanete 100..

Zapněte fotografie do 3D animací s Photoshopem

jak Jan 29, 2026

Všichni máme velký obchod vzpomínek, které jsou považovány za fotky a je skvělé být schopno vzpomínat. Ale co kdybyste..

Sestavte aplikace, které pracují offline

jak Jan 29, 2026

Po dlouhou dobu, funkčnost offline, synchronizace pozadí a push oznámení diferencoval nativní aplikace z jejich webových pr..

Začínáme s WebGL pomocí tří.js

jak Jan 29, 2026

Webgl. , který je široce podporován na všech moderních prohlížečích, umožňuje pracovat s hardwarem-akceler..

Jak vyřezat v kině 4d

jak Jan 29, 2026

Při blíží se k modelu nebo scéně, která vyžaduje rafinované modelování nabízené sochařství, mnoho 3D umělců by t..

Boost D3.JS grafy se SVG gradienty

jak Jan 29, 2026

Nadieh Bremer bude na Generovat Londýn V září, kde bude prokázat, jak vzít ..

Kategorie