CSS Hero: kuidas luua silmapaistvaid WordPressi animatsioone (minutitega)
Staatilistel veebisaitidel on sageli raskusi külastajate kaasamisega, kui ootused interaktiivsete ja dünaamiliste kogemuste osas aina kasvavad. Animatsioonid võivad tähelepanu köita, suunata kasutajate keskendumist ja tekitada rõõmu – aga paljud WordPress Veebisaidi omanikud pelgavad animatsioonipluginaid, mis on ülepaisutatud, keeruliselt seadistatavad või lõhuvad nende teemat. Mis oleks, kui saaksite lisada kauneid ja responsiivseid animatsioone igale WordPressi saidile vaid mõne klõpsuga?
CSS-i kangelase animaator
CSS-i kangelase animaator muudab selle lubaduse teoks. Animator on kerge osuta-ja-klõpsa plugin, mis võimaldab teil lisada moodsaid kerimis-, parallaksi- ja ajapõhiseid animatsiooniefekte – ilma et peaksite kodeerima või riskima oma saidi paisutamisega.
Animator aitab teil oma kasutuskogemust parandada (UX) kerimisfunktsioonidega, sujuvate üleminekute, parallaksi liikumise ja peente tähelepanu köitvate elementidega, mis tunduvad orgaanilised, mitte pealetükkivad. Olenemata sellest, kas soovite elavdada maandumislehte, muuta päised dünaamiliseks või animeerida elemente peenelt konversioonide suurendamiseks, annab Animator teile intuitiivse liidese kaudu täieliku kontrolli.
koos CSS-i kangelase animaator, saate saavutada viimistletud ja keerukaid animatsiooniefekte, mis toimivad eri teemades ja lehekoostajates – ilma jõudlust ohverdamata.
Animator pakub teie WordPressi tööriistakomplekti järgmist:
- Parallaks: Loo parallaksiefekte, mis liigutavad elemente vastavalt nende asukohale vaateaknas. Näiteks saad pilte vertikaalselt nihutada, kui kasutaja kerib, luues sügavust ja liikumist.
- Kerige: Päästikupõhine CSS stiilid ja teisendused pärast kindla arvu kerimist pikslites. Suurepärane dünaamiliste päiste jaoks, mis kerimisel kahanevad või muudavad värvi, või sisu järkjärguliseks paljastamiseks.
- Ajastatud: Looge ajapõhiseid animatsioone, millel on kontroll kestuse, aeglustumise ja korduse valikute üle – ideaalne ujuvate efektide või animeeritud sisenemiste jaoks.
Animator võimaldab teil animatsioone peenhäälestada sammu väärtused sujuva ülemineku jaoks, nii et üleminekud tunduvad loomulikud, mitte katkendlikud. Ja kuna see töötab laia valiku CSS-i omadustega, on teie loomingulised valikud peaaegu piiramatud.
Siin on vaid näidis sellest, mida saate animeerida: Taustavärv, tausta asukoht, tausta suurus, hägustus, kasti vari, kohandatud CSS, fondi suurus, tähtede vahe, X/Y liigutamine, läbipaistmatus, perspektiiv, X/Y/Z pööramine, skaleerimine, X/Y kallutus, teksti värv, laius ja palju muud.
Kui sa juba kasutad populaarset lehekoostajat või teemat – pole hullu. Animator integreerub sujuvalt Elementor, Divi, Tellised, Hapnik, Avada, Beaver ehitaja, Astraja palju muud. Keerulist seadistamist pole vaja.
Animatsioonide sujuvamaks muutmiseks kasutab Animator LERP (Lineaarne interpolatsioon) kerimise sujuvamaks muutmiseks ja üleminekute tegemiseks. See muudab animatsioonid loomulikumaks ja hoiab teie saidi reageerimisvõimelisena.
Kulisside taga on Animator loodud koos Reageerima ja kasutab brauseri enda animatsioonimootorit. Tulemuseks on minimaalne üldkulu, ebavajaliku ressursikulu puudumine ja efektid, mis aktiveeruvad ainult vaateaknas olles – hoides teie saidi kiire ja SEOsõbralik.
Edasijõudnutele kasutajatele pakub Animator täielikku programmeeritavust andmeobjektiga, mida saab käsitsi redigeerida või skriptida. See lihtsustab keerukamate animatsioonide loomist suure mõjuga disainide jaoks.
CSS Hero Animatoriga on väga sujuv ja voolujooneline töötada.
Paul C. alates wptuts.co.uk
WordPressi saidile keerukate animatsioonide lisamine pole kunagi varem olnud nii lihtne. Lihtsa osuta-ja-klõpsa liidese ja professionaalse jõudlusega katte all aitab Animator teil pakkuda külastajatele rikkalikumat ja kaasahaaravamat kogemust.
Alustamiseks installige Animator ja käivitage visuaalne redaktor. Mõne minutiga saate animatsioone rakendada mis tahes WordPressi teema mis tahes elemendile – tekstile, piltidele, päistele, jaotistele.
seotud Martech Zone sisu
