A css segítségével történő gépelés hatásának létrehozása
Nemrég találtuk a jQuery plugint. ami megkönnyíti a weboldalon történő gépelés hatását. Ezt a plugint typed.js-nek hívják, nyílt forráskóddal rendelkezik, és letölthető a Github-ból. Ebben a leckében többet fogunk beszélni erről a bővítményről, és megmutatjuk Önnek, hogyan kell létrehozni egy szöveges effektust csak CSS animációk segítségével.
A plugin telepítése nagyon egyszerű, mindössze annyit kell tennie, hogy dugja be a plugint az alkalmazásba, és használja a következő kódot:
Amikor a weblap be van töltve, az első mondat először elkezdi a nyomtatást, és utána elindul a második. Beállíthatja a nyomtatási sebességet az animáció időtartama milliszekundumban.
Létrehoztunk egy példát, amely megmutatja, hogy ez a hatás hogyan néz ki.
Ha ilyen hatást kíván létrehozni, akkor letöltheti a typed.js projektet a Githubból.
Az AnimationCSS használata
typed.js bővítmény - könnyű és érdekes plugint jQuery, de ez még mindig egy jQuery plugin így használatához meg kell csatlakozni az alkalmazást, amely több erőforrást igényel és növeli a számát HTTP kérések az oldalt. Ez nem lenne különösebben fontos, ha ez volt az egyetlen módja ennek a hatásnak, de a gépelés hatása csak CSS segítségével hozható létre.
A CSS animálásával ideiglenes animációs funkció hozható létre. amely jelzi az animációt, hogyan fejleszti ki a végét. Egy idő függvények, az () (lépések), lehetővé teszi, hogy meghatározza a képkockák számát kell használni az animációs, akkor letiltja a szokásos sima animáció, és hozzon létre egy blokkot, amire szükségünk van a gépeléshez.
A () függvény használatával olyan animációt hozhat létre, amely csak az elem méretét növeli 0-tól a bekezdés végéig.
Először létrehozunk egy bekezdést, amelybe a gépelés hatását szeretnénk beállítani:
A CSS használatával hozzáadjuk a szükséges animációt, kezdjük el a bekezdés szélességének meghatározásával, hogy az animációnak tágulási korlátja legyen. Ezután adja hozzá a túlcsordulás elrejtésének tulajdonságát, így amikor az animáció megváltoztatja a bekezdésméretet 0-ra, a szöveg láthatatlanná válik. Végül adjon hozzá egy animációs típust az átmeneti függvény lépésekkel ():
Az animáció növeli a bekezdés méretét 0-ról 30-ra 50 képkockán belül, így létrehozva a gépelés hatását.
Nézze meg a példát, hogy lássa, hogyan működik.
Az ideiglenes funkció CSS munkájának bemutatása
Fordítás - Duty Officer