Hogyan hozhat létre hibás szöveg- és képeffektusokat a CSS-ben

Ebben az oktatóanyagban megmutatjuk, hogyan hozhat létre hibás szöveghatást. A speciális effektusok és animációk segíthetnek a webhelyek kiemelkedésében, és azonnali hatást gyakorolhatnak a felhasználóra, még mielőtt esélyük lett volna a fő tartalom elolvasására. Ha a kezdőlapjának meg kell csalogatnia a látogatókat, akkor rengeteg különböző effektust hozhat létre csak a CSS használatával.

A hibaszöveg létrehozásának folyamata itt valójában nagyon hasonlít az animációs szoftverekkel való munkához. A kulcsképeket meghatározott pontokon helyezzük el, és ezek segítségével irányítjuk a műveletet. A CSS kulcsképeivel az a különbség, hogy százalékban írják őket az animáció idővonalára a kódban. Ez közel sem olyan ijesztő, mint amilyennek hangzik - miután megpróbálta, viszonylag egyszerű a jó eredmények elérése.

Kis mennyiségű JavaScript lesz használva az oktatóanyagban - a betöltő képernyő eltávolításához, amint a képek betöltődnek az oldalra -, de itt a fő hangsúly CSS animáció . Mi is használni fogjuk CSS Rács hogy elemeket helyezzen el a képernyőn.



01. Állítsa be

A kezdéshez nyissa meg a Rajt mappát a projekt fájlokat belül a kódszerkesztőben. Nyissa meg a index.html oldal, amely csak egy barebones csontváz HTML oldalt tartalmaz. A fejrészben a betűtípusokat össze kell kapcsolni, hogy a design megfelelően jelenjen meg. Adja hozzá a betűtípusok stíluslinkjét.

A CSS-ben az alapvető elrendezést a site.css fájlt, de a hibás hatással kapcsolatos összes fontos részt később hozzáadjuk. A dokumentum fejrészében kösse össze a CSS-t, hogy az oldal alaptervezete a helyén legyen.

03. Állítson be egy betöltő képernyőt

Fekete kezdőképernyő márka ikonnal

Ez a képernyő az oldal betöltése közben jelenik meg

Most lépjen az oldal törzs szakaszára. Ez tartalmazza az oldal összes látható elemét, amely megjelenik a böngészőben. Itt adjon meg egy div-et, amely addig tartja az „előzetes betöltő képernyőjét”, amíg az oldalon minden betöltődik. Ez egy logót jelenít meg az oldal közepén.

04. Adjon hozzá egy fejlécsávot

Fekete kezdőképernyő címmel és rövid leírással

A tervezés alapvető elemei, mielőtt hozzáadnák a hibás szöveghatást

A képernyő tetején egy kis fejléc található, amely egy SVG logót tartalmaz a bal oldali webhely számára, szöveges címmel. Ezután a képernyő jobb oldalán egy beágyazott menü jelenik meg a könnyű navigáció érdekében. A kód szerkezete itt hozzáadja ezeket az elemeket az oldalra.

HackerCon

  • Home
  • News
  • Contact
  • About

05. Képek hozzáadása

Most a következő szakasz ugyanazon kép több változatát tartalmazza a glitchit osztály. Ez azt fogja tenni, hogy a képek különböző részeit különböző időpontokban be- és kikapcsolják, hogy hibátlan hatást érjenek el. Ezt követi az a szöveg, amely a képek tetején lesz.

HackerCon

Add a description

06. Indítsa el a hiba szöveghatását

A törzs tartalmának végén a JavaScript címkék kerülnek elhelyezésre. Mindez azt jelenti, hogy ellenőrizze, hogy az oldal betöltődött-e, majd eltávolítja a betöltési képernyőt, ami viszont elindítja a hibajelzés animációját azzal, hogy egy osztályt ad hozzá a törzshöz, hogy befolyásolja a releváns hibaszakaszokat.



var loader = document.getElementById('loader'); window.addEventListener('load', function(event) { loader.classList. remove('loading'); loader.classList.add('loaded'); document.body.classList. add('imgloaded'); });

07. CSS-változók beállítása

Most mentse el az oldalt, és lépjen át a site.css fájl a CSS mappában. Itt már van kód, de közvetlenül bármely más kód felett adjuk hozzá az alább látható változásokat. Ezek a CSS-változók olyan színeket és méreteket tartalmaznak, amelyeket később felhasználnak a tervezés során.

body { --color-text: #fff; --color-bg: #000; --color-link: #555; --color-link-hover: #98fadf; --color-info: #f7cfb9; --glitch-width: 100vw; --glitch-height: 100vh; --gap-horizontal: 10px; --gap-vertical: 5px; --time-anim: 4s; --delay-anim: 2s;

08. Kísérletezzen a Változó beállításokkal

Amint látni fogja, ezek a változók a törzscímkéhez vannak hozzárendelve, így a törzs belsejében található bármelyik címke felhasználhatja őket, ami lényegében az összes látható oldal. Itt az átlátszóság és a keverési módok vannak beállítva a különböző képekhez. Öt kép van, és kísérletezhet ezekkel a beállításokkal, hogy különböző eredményeket érjen el.

--blend-mode-1: none; --blend-mode-2: overlay; --blend-mode-3: none; --blend-mode-4: none; --blend-mode-5: overlay; --blend-color-1: transparent; --blend-color-2: #7d948e; --blend-color-3: transparent; --blend-color-4: transparent; --blend-color-5: #af4949; }

09. Töltse ki a képernyőt képekkel

A kód rendben tartásához görgessen le ahhoz a megjegyzéshez, amely a CSS-fájlban jelöli a 9–13. Lépéseket, hozzáadva ezt a kódot. Itt a hibakód elhelyezi a div minden képet tartalmaz, hogy kitöltse a teljes képernyőt és abszolút a képernyő bal felső sarkában legyen. Vegye figyelembe, hogy szélességét és magasságát a CSS-változók alapján kapja meg.

.glitch { position: absolute; top: 0; left: 0; width: var(--glitch-width); height: var(--glitch-height); overflow: hidden; }

10. Állítsa be a kép pozícionálását

Honlap teljes képernyős fényképpel

A glitch effektus ugyanazon kép áthelyezett másolatait használja

Mivel a hibajelenség ugyanazon kép másolatából áll, ez a kód mindegyiket elhelyezi div az oldalon, és kissé nagyobb lesz, mint a képernyő. Fentről és balról helyezi el, hogy nagyobb legyen, majd a képet a háttérbe helyezik, hogy kitöltse a képet.

.glitchit { position: absolute; top: calc(-1 * var(--gap-vertical)); left: calc(-1 * var(--gap-horizontal)); width: calc(100% + var(--gap-horizontal) * 2); height: calc(100% + var(--gap-vertical) * 2); background: url(../img/main.jpg) no-repeat 50% 0; background-color: var(--blend-color-1); background-size: cover; transform: translate3d(0, 0, 0); background-blend-mode: var(--blend- mode-1); }

11. Válassza ki a képeket

A kód itt minden képet kiválaszt, kivéve az első képet. Az első kép ugyanis az oldalon marad, míg a többiek a kulcsképes animációval felülről be- és kikapcsolnak. Ezeket a legfelső képeket addig rejtik, amíg szükségük van rájuk, a nulla opacitással.

.glitchit:nth-child(n+2) { opacity: 0; } .imgloaded .glitchit:nth-child(n+2) { animation-duration: var(--time-anim); animation-delay: var(--delay-anim); animation-timing-function: linear; animation-iteration-count: infinite; }

12. Állítsa be a második és a harmadik képet

A második és a harmadik kép animálásra van beállítva ebben a kódban. Megkapják a megfelelő keverési és színmódokat, hogy másképp jelenjenek meg. A legnagyobb különbség itt az, hogy különböző kulcsképes animációkat kapnak, amelyeket követni kell a keveréshez.

up the effects. .imgloaded .glitchit:nth-child(2) { background-color: var(--blend-color-2); background-blend-mode: var(--blend- mode-2); animation-name: glitch-1; } .imgloaded .glitchit:nth-child(3) { background-color: var(--blend-color-3); background-blend-mode: var(--blend- mode-3); animation-name: glitch-2; }

13. Állítsa be a negyedik és ötödik képet

Ezúttal a következő két kép meglehetősen közel áll a többihez, de ezúttal is különböző keverési módok és animációk vannak, hogy ezek a képek megjelenjenek. Ezen animációk némelyikéhez még nem hozták létre a kulcskockákat, és ez következik.

.imgloaded .glitchit:nth-child(4) { background-color: var(--blend-color-4); background-blend-mode: var(--blend- mode-4); animation-name: glitch-3; } .imgloaded .glitchit:nth-child(5) { background-color: var(--blend-color-5); background-blend-mode: var(--blend- mode-5); animation-name: glitch-flash; }

14. Adja hozzá az első kulcsképeket

A kulcsképek úgy működnek, hogy megragadják a kép különböző szakaszait, és levágják, hogy csak ez legyen látható. Az átlátszatlanságot különböző időpontokban kapcsolják be és ki, hogy a kép egyes részei különböző időpontokban láthatók legyenek a többi animáció számára, és ezáltal létrehozza a hibát. A kép kissé elmozdul az x tengelyen.

@keyframes glitch-1 { 0% { opacity: 1; transform: translate3d(var(--gap- horizontal), 0, 0); clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); } 2% { clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); }

15. Használja a klip-elérési utat

A klip útja téglalapot vesz fel, így az első két szám bal felső, majd jobb felső. Ezt követi a jobb alsó és a bal alsó rész. Ezeknek a számoknak a mozgatásával a kép különböző részei különböző pontokon válnak láthatóvá.

4% { clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); } 6% { clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); } 8% { clip-path: polygon(0 33%, 100% 33%, 1 00% 33%, 0 33%); } 10% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }

16. Gyorsítsa fel a mozgást

A klip elérési útjának ilyen gyors mozgatásával számos kulcsképnél a hatás felépül, és a kép különféle részei rendszertelenül villognak. Add hozzá, hogy több képréteg is ezt csinálja, és a hatás nagyon jól működik abban, amit csinál.

12% { clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); } 14% { clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }16% { clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }18% { clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }20% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }

17. Fejezze be a kép hibáit

22% után a kép kikapcsol, amíg az animáció újra nem játszik. Ezzel befejeződik a glitch-1 hatással glitch-2 és glitch-3 már szerepel a kódban. A következő szakasz hibásan kezeli azt a szöveget is, amely a kép tetején van.

21.9% { opacity: 1; transform: translate3d(var(--gap- horizontal), 0, 0); } 22%, 100% { opacity: 0; transform: translate3d(0, 0, 0); clip-path: polygon(0 0, 0 0, 0 0, 0 0); } }

18. Hogyan készítsünk hibás szöveget

A szöveget levágtuk, hogy a kezdőlapon látható legyen a folyamatban lévő hiba

A szöveget csak rövidre vágjuk, hogy még olvasható legyen

Ez a kód rendkívül hasonlóan működik, mint az előző, azzal a különbséggel, hogy fejjel lefelé fordítja, majd felvágja a szöveget, hogy drámai módon mozgó ugróhatást kapjon. Ezt követően a klip útja csak kisebb szakaszokat tár fel, a kulcskeretek gyors mozgatásával.

@keyframes glitch-text { 0% { transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1, -1, 1); clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); } 2% { clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); } 4% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }

19. További nyírás

A hatás ebben a kódrészben folytatódik a vágógörbe alakjának gyors megváltoztatásával. A clip-path is jön a -webkit- előtag, de a rövidség kedvéért ez itt egyetlen kódban sem volt feltüntetve. Az írás idején a Clip Path jelenleg nem támogatott az IE, az Edge vagy az Opera Mini alkalmazásban, de minden más böngészőben használható.

5% { clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); } 6% { clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); } 7% { clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); } 8% { clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }

20. Fordítsa vissza a szöveget

Az utolsó szöveghiba-animációban a szöveg visszafordul az eredeti helyzetébe, és várja, hogy a kulcsképek újra megjelenjenek. Mint látható, az összes animáció 10 százalékban zajlik, miközben az idő 90 százalékában szunnyad, megfelelő mennyiségű szorongást okozva a szövegnek és olvashatóvá téve azt.

9% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); } 9.9% { transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1, -1, 1); } 10%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } }

21. Készítsen egy gyors villanást

Homlokhatás folyamatban

A hibajelzés néhány másodpercenként fut, hogy zaklatott képet kapjon

Az utolsó lépés az, hogy az egyik kép megkapja a glitch-flash animációt, és ez a kulcskép-sorozat csak 20% -os átlátszatlansággal helyezi el a képet a képernyőn rövid ideig, csak azért, hogy eltolódjon az eredeti. Most mentse el a CSS fájlt, és az effektusnak el kell kezdenie a lejátszást, amint a tartalom betöltődik a böngészőben.

@keyframes glitch-flash { 0%, 5% { opacity: 0.2; transform: translate3d(var(--gap- horizontal), var(--gap-vertical), 0); } 5.5%, 100% { opacity: 0; transform: translate3d(0, 0, 0); } }

Ez a cikk eredetileg a Web Designer kreatív webdesign magazinban jelent meg. Vásárolja meg a 281. számot vagy Iratkozz fel .

Olvass tovább: