Am găsit recent pluginul jQuery. ceea ce face ușor de a crea efectul de a scrie pe un site web. Acest plugin se numește typed.js, are cod sursă deschisă și poate fi descărcat de la Github. În această lecție vom vorbi mai multe despre acest plugin și, de asemenea, vă vom arăta cum să creați un efect de text folosind doar animații CSS.
Instalarea acestui plugin este foarte simplă, tot ce trebuie să faceți este să conectați pluginul în aplicație și să utilizați următorul cod:
Atunci când pagina web este încărcată, prima teză începe să fie tipărită mai întâi, iar după aceasta începe cea de-a doua. Puteți seta viteza de imprimare trecând durata animației în milisecunde.
Am creat un exemplu pentru a arăta cum arată acest efect.
Dacă trebuie să creați un astfel de efect, puteți descărca proiectul typed.js de la Github.
Folosind AnimationCSS
typed.js plugin - ușor și plugin interesant jQuery, dar este încă un plugin jQuery, astfel încât să-l folosească, este necesar să se conecteze la aplicația, care va necesita mai multe resurse și de a crește numărul de cereri HTTP către pagină. Acest lucru nu ar fi deosebit de important dacă ar fi fost singurul mod de a crea un astfel de efect, dar efectul de scriere poate fi creat folosind numai CSS.
Animarea CSS vă permite să creați o funcție de animație temporară. care va indica animația, cum să o dezvoltați până la sfârșit. Una dintre funcțiile temporare, pașii () (pașii), vă permite să specificați numărul de cadre pe care animația le va utiliza, aceasta va dezactiva animația obișnuită și va crea mai mult blocaj, exact ceea ce trebuie să tastați.
Folosind funcția pașii (), puteți crea o animație care va mări doar dimensiunea elementului de la 0 la sfârșitul paragrafului.
Mai întâi, vom crea un paragraf, pe care dorim să-l setăm efectul de scriere:
Folosind CSS, vom adăuga animația necesară, începeți prin specificarea lățimii paragrafului, astfel încât animația să aibă o limită de expansiune. După aceasta, adăugați proprietatea de a ascunde debitul, astfel încât atunci când animația modifică dimensiunea paragrafului la 0, textul devine invizibil. În cele din urmă, adăugați un tip de animație cu pașii funcției temporare ():
Animația va mări dimensiunea paragrafului de la 0 la 30 de imagini în 50 de cadre, creând astfel efectul de tastare.
Uitați-vă la exemplu pentru a vedea cum funcționează acest lucru.
Demonstrarea muncii funcțiilor temporare ale CSS
Traduceri - Duty Officer
Articole similare
Trimiteți-le prietenilor: