Cum să adăugați animație la derulare în Elementor (ca Apple AirPods)
Publicat: 2022-07-21Căutați o modalitate de a adăuga animație pe defilare în Elementor, cum ar fi Apple și Sony pe site-urile lor web?
În timp ce Elementor Pro include tot felul de efecte de animație îngrijite prin intermediul funcției sale Efecte de mișcare, nu vă permite să creați o secvență de imagini cu adevărat captivantă pe efectele de defilare precum cele pe care le vedeți pe site-ul Apple (plus multe altele). De exemplu, pagina AirPods Pro .
Cu pluginul Scrollsequence, puteți adăuga cu ușurință aceste tipuri de animații de defilare cinematografică la Elementor ( inclusiv versiunea gratuită a Elementor ).
Este greu de descris în cuvinte, așa că consultați exemplul de mai jos ( animația se mișcă pe măsură ce un vizitator defilează în jos pe pagină ):
Dacă doriți să aflați mai multe despre Scrollsequence în general, puteți citi recenzia noastră completă Scrollsequence.
În această postare, totuși, ne vom concentra în mod special pe cum să adăugați animație la defilare în Elementor folosind Scrollsequence.
Să pătrundem!
Cum se creează animații cinematografice de defilare în Elementor cu Scrollsequence
Iată o privire la nivel înalt asupra pașilor implicați – continuați să citiți pentru tutorialul detaliat:
- Instalați pluginul Scrollsequence
- Creează-ți animația
- Adăugați animația de defilare la Elementor
1. Instalați pluginul Scrollsequence
Pentru a începe, veți dori să instalați pluginul Scrollsequence pe site-ul dvs. Elementor.
Scrollsequence are o versiune gratuită la WordPress.org, precum și o versiune premium care adaugă mai multe funcții. Versiunea gratuită vă permite să configurați animații de bază cu până la trei scene și maximum 100 de imagini per scenă, în timp ce versiunea premium elimină toate limitele și, de asemenea, adaugă animații și funcții mai avansate.
Scrollsequence – Plugin de animație a imaginii de defilare cinematograficăVersiunea curentă: 1.2.7
Ultima actualizare: 9 mai 2022
scrollsequence.1.2.7.zip
De asemenea, puteți încerca gratuit toate funcțiile premium cu o perioadă de încercare gratuită de 14 zile, așa că nu trebuie să plătiți nimic doar pentru a o testa.
Dacă decideți că doriți versiunea premium după încercare, aceasta începe de la 69,99 USD. Cu toate acestea, puteți folosi cuponul nostru exclusiv Scrollsequence pentru a economisi 20%:
20i Găzduire WordPress
Detalii
Reducere exclusivă de 50% de la 20i WordPress Hosting, doar pentru cititorii WP Mayor.
Astra
Detalii
Obțineți o reducere exclusivă de 10% la Astra Pro, pachetul Essential și pachetul Growth.
Reducere de aniversare Astra
Detalii
25% reducere la pachetele Astra Pro sau Astra Agency plus primiți o intrare gratuită la o tragere la sorți pentru a câștiga un iMac nou-nouț!
Autonami
Detalii
Reducere exclusivă de 10% la Autonami – Gestionați relațiile cu clienții folosind etichetarea, segmentarea și difuzarea fără a părăsi WordPress.
Avada
Detalii
Avada este cel mai bun constructor de site-uri WordPress. De încredere de către începători, marketeri și profesioniști, construite având în vedere uzabilitate și performanță.
Hambar2
Detalii
Cititorii WP Mayor primesc o reducere suplimentară de 5% la oferta de 30% Black Friday! Aceasta va fi aplicată automat la finalizarea plății.
Constructor de castori
Detalii
Obțineți 25% reducere la Beaver Builder - generatorul de pagini WordPress în care puteți avea încredere în afacerea dvs.
Bluehost
Detalii
Bluehost este furnizorul nostru de găzduire partajată WordPress recomandat. Obțineți o reducere de până la 15 USD pe lună la găzduirea partajată Bluehost.Domeniu gratuit cu Bluehost
Detalii
Obțineți înregistrarea gratuită a domeniului atunci când vă înscrieți pentru găzduirea accesibilă și de încredere a Bluehost.
Buletin
Detalii
20% reducere la toate planurile din Buletin! Cel mai simplu și mai puternic plugin de banner de anunț pentru site-ul dvs. WordPress.
Elementor Pro
Detalii
Alăturați-vă unei comunități de peste 8 milioane de profesioniști care construiesc site-uri web, colaborează și cresc împreună cu platforma de creare web numărul 1 pentru WordPress.
Teme de motor
Detalii
Obțineți 35% REDUCERE EngineThemes - Teme de aplicații WordPress create cu experiență pentru ambarcațiunile dvs.
Plugin esențial
Detalii
Obțineți o reducere de 15% la pachetul Essential Plugin.
Pronto All-in-One
Detalii
1 lună GRATUIT pentru toți clienții noi pe soluția Pronto All-in-one, o temă de fotografie de top pentru WordPress.
Marmota
Detalii
Reducere exclusivă de 15% la Groundhogg.
Growanizer
Detalii
Reducere exclusivă de 30% la Growanizer – noua generație de vânzări inteligente pentru WooCommerce.
Prezența umană
Detalii
Reducere exclusivă de 20% la prezența umană – opriți plățile bot și formați spam fără a vă afecta experiența utilizatorului.
IconicWP
Detalii
În această Black Friday puteți obține până la 40% reducere la pluginurile WooCommerce și pachetele de pluginuri IconicWP care stimulează vânzările.IconicWP
Detalii
În această lună WooCommerce, obțineți până la 15% reducere la pluginurile și pachetele de pluginuri WooCommerce IconicWP care stimulează vânzările.
KBucket
Detalii
Obțineți o reducere de 40% la pluginul KBucket - creați un centru de conținut personalizabil.
lingvistic
Detalii
20% reducere la Linguise - Creșteți-vă traficul pe site-ul dvs. cu traduceri instantanee în mai mult de 80 de limbi.
Liquid Web
Detalii
35% REDUCERE timp de 4 luni la găzduirea WordPress gestionată.Liquid Web
Detalii
Obțineți o reducere de 33% de la specialiști în găzduire WooCommerce gestionați de Liquid Web.
Widget video Magnifi
Detalii
Încorporați, personalizați și efectuați apeluri video în siguranță cu ajutorul widgetului video Magnifi de pe site-ul dvs. în câteva minute.
Suplimente principale pentru Elementor
Detalii
Reducere exclusivă de 50% de la Master Addons pentru Elementor.
Newsletter Glue
Detalii
Newsletter Glue conectează serviciul dvs. de e-mail la WordPress, astfel încât să puteți publica buletine informative așa cum publicați postările pe blog!Obțineți o reducere de 15% la prima achiziție.
Notificarea X
Detalii
Soluție de marketing FOMO supremă și cu dovadă socială în care au încredere peste 30.000 de companii din întreaga lume.
OceanWP
Detalii
Tema WordPress care vă oferă mai mult!
Comandabil
Detalii
Duceți comenzile online la un nivel cu totul nou. Obțineți cel mai bun preț la Comandabil cu codul WPMAYOR .
Outfunnel
Detalii
Obțineți o reducere de 25% pentru primele 3 luni pe Outfunnel – urmăriți vizitele pe site și sincronizați trimiterile de formulare la CRM.
Pagina de plată
Detalii
15% reducere la pagina de plată.
PeepSo
Detalii
Obțineți o reducere de 10% la un pachet anual de PeepSo.
Quicq
Detalii
Obțineți o reducere de 20% în primele două luni la toate pachetele QuicqSecvență de defilare
Detalii
Obțineți o reducere exclusivă de 20% la Scrollsequence cu cuponul WPMAYOR20. Creați-vă animația de defilare în câteva minute.
ShopReady
Detalii
Obțineți o reducere exclusivă de 20% la ShopReady.
Spotlight PRO
Detalii
Obțineți 20% reducere la Spotlight PRO pentru a dubla impactul conținutului dvs. Instagram!
Vânzare stelară
Detalii
Obțineți 40% reducere la toate pluginurile IconicWP, inclusiv pachetele lor (obțineți o reducere masivă de 199 USD la pachetul All Access)!
Vânzare stelară
Detalii
Obțineți o reducere de 40% la The Events Calendar Pro - Calendare, bilete și instrumente WordPress puternice pentru a vă gestiona evenimentele de la început până la sfârșit.
Tripetto Pro
Detalii
Obțineți o reducere de 10% la licențele Tripetto Pro.
UnlimittedWP
Detalii
Obțineți o reducere de 20% în prima lună de la UnlimitedWP.
Compozitor vizual
Detalii
Obțineți 10% reducere la Visual Composer - Creează-ți site-ul WordPress astăzi. Începe ușor. Construiți rapid.WooFunnels
Detalii
Dublați-vă profiturile în acest sezon de vârf! Economii mari la WordPress Funnel Builder & Marketing Automation Engine de la WooFunnels!
WP Adminify
Detalii
Reducere exclusivă de 30% la WP Adminify – un set de instrumente puternic pentru tabloul de bord WordPress.
Buff-uri WP
Detalii
Reducere de 10% de la WP Buffs – partenerul dumneavoastră tehnic 24/7 pentru planuri de îngrijire și servicii de întreținere.
WP Atrageți atenția
Detalii
Economisiți 40% la ediții nelimitate ale Atrage atenția - instrumentul #1 pentru crearea de imagini interactive pe WordPress.
Motor WP
Detalii
Primiți 4 luni gratuit la planurile anuale sau 20% reducere la prima lună la planurile lunare.
WP Event Manager
Detalii
Obțineți 10% reducere WP Event Manager - Calendar, bilete și instrumente WordPress puternice pentru a vă gestiona evenimentele.
WP Migrate DB Pro
Detalii
Ofertă pentru clienți noi — Economisiți până la 50% în primul an de WP Migrate DB Pro pentru utilizare individuală. WP Migrate DB Pro vă permite să copiați întregul site WordPress dintr-un mediu în altul cu un singur clic în tabloul de bord.
WP Webhooks Pro
Detalii
Reducere exclusivă de 15% la WP Webhooks Pro. Extindeți-vă site-ul web cu cel mai puternic sistem webhook. (Reducerea se aplică pentru prima perioadă de facturare).
Pluginuri Yith WooCommerce
Detalii
Luați totul cu o reducere de 30%! Nu sunt necesare cupoane.2. Creați-vă animația
După ce ați instalat pluginul, mergeți la Scrollsequence → Add New Scrollsequence pentru a configura prima animație de defilare.
Fiecare animație constă dintr-una sau mai multe scene și fiecare scenă va conține mai multe imagini aranjate într-o secvență. Pluginul va genera apoi animația pe baza tuturor imaginilor din secvență.
O „scenă” este o secvență completă de animație. Dacă decideți să adăugați mai multe scene, utilizatorul va avansa la următoarea scenă după ce a defilat complet prin animația primei scene.
În majoritatea situațiilor, veți dori să bazați imaginile din secvența dvs. pe un videoclip de bază. Pentru a converti un videoclip existent într-o secvență de imagini separate, puteți utiliza unul dintre aceste instrumente din documentația pluginului. Cea mai simplă opțiune este convertorul Ezgif bazat pe browser, dar veți obține o calitate mai bună cu software-ul dedicat.
Creați scene și adăugați imagini
După ce ați creat animația la nivel înalt, faceți clic pe butonul Adăugați scenă pentru a adăuga prima scenă.
Acest lucru va extinde un nou set de opțiuni care vă permit să încărcați toate imaginile pentru secvența dvs. de animație. Dezvoltatorii recomandă încărcarea a cel puțin 50-100 de imagini pe scenă pentru a asigura o animație lină.
După ce încărcați imaginile, puteți utiliza opțiunea de sortare pentru a vă asigura că sunt în ordinea corectă. Dacă nu sunt în ordinea corectă, animația dvs. nu va arăta corect .
Dacă doriți să creați o altă scenă, puteți face acest lucru făcând clic pe pictograma plus de lângă fila Scena 0 .
Adăugați conținut fix și animații
Pentru a adăuga conținutul fix care apare deasupra imaginilor de animație, puteți utiliza caseta Conținut fix pentru conținutul în sine.
Apoi, puteți utiliza secțiunea Animație de conținut fix pentru a configura regulile de animație. Acoperim acest lucru în detaliu în Pasul #4 al revizuirii Scrollsequence, dar ideea de bază este următoarea:
- Adăugați selectoare CSS la conținut în caseta Conținut fix (folosind fila Text ).
- Vă configurați regulile de animație în caseta Animație de conținut fix , țințind acele selectoare CSS și apoi alegând, de asemenea, momentul pentru cum să animați conținutul în acești selectori. De exemplu, ați putea spune că doriți să afișați un anumit text pentru imaginile 30-55.
Iată un exemplu de adăugare a selectoarelor CSS la conținutul dvs.:
Și apoi iată cum arată să configurați regulile de animație:
Pe lângă animarea conținutului dvs. fix, puteți ajusta și durata imaginii.
Configurați alte setări după cum este necesar
Configurarea scenelor, imaginilor și conținutului fix sunt cele mai importante părți ale creării unei animații.
Cu toate acestea, Scrollsequence vă oferă și alte setări în această interfață pe care ați putea dori să le explorați.
De exemplu, puteți ajusta scara și alinierea imaginii în partea de jos a zonei de setări a scenei.
De asemenea, aveți câteva setări generale în zona Scrollsequence Settings din bara laterală. În acest widget, puteți controla lățimea imaginii și întârzierea derulării, precum și puteți adăuga CSS personalizat, dacă doriți.
Publicați-vă animația
Pentru a finaliza lucrurile, faceți clic pe butonul Publicați pentru a vă publica animația, la fel cum ați face o postare pe blog.
Odată ce îl publicați, puteți găsi codul scurt al acestei animații mergând la Scrollsequence → Scrollsequence :
Păstrați acest cod scurt la îndemână, deoarece veți avea nevoie de el într-o secundă pentru a adăuga animație la defilare în Elementor.
3. Adăugați animația dvs. de defilare la Elementor
Odată ce ești mulțumit de animația ta de defilare, ești gata să o adaugi la designul tău Elementor.
Puteți crea un design Elementor separat exclusiv pentru animația de defilare. Sau, puteți include și animația de defilare ca parte a unui design mai mare. În acest caz, conținutul de deasupra și de sub animația de defilare va rămâne static.
Pentru a începe, lansați editorul Elementor pentru piesa de conținut în care doriți să adăugați animația de defilare.
Apoi, iată cum să adăugați animația de defilare:
- Adăugați widgetul Elementor Shortcode acolo unde doriți să apară animația de defilare.
- Lipiți codul scurt al animației ( din nou, îl puteți găsi accesând Scrollsequence → Scrollsequence ) .
- Faceți clic pe butonul Aplicați din setările widgetului Shortcode pentru ca Elementor să genereze o previzualizare live a animației dvs. în editor.
Puteți experimenta animația dvs. completă fără a părăsi editorul Elementor - doar derulați în jos în previzualizarea vizuală!
Și asta este tot – tocmai ați învățat cum să configurați o animație cinematografică de defilare în Elementor, la fel cum face Apple cu atât de multe dintre paginile sale de destinație.
Dacă doriți să creați animații suplimentare sau să adăugați scene noi animației dvs., trebuie doar să repetați pașii de mai sus.
Creați-vă prima animație Elementor On Scroll astăzi
Oamenii iubesc Elementor pentru cât de multă flexibilitate îți oferă atunci când vine vorba de crearea designului tău.
Cu toate acestea, un lucru pe care Elementor nu îl poate face singur este să configureze tipurile de animații cinematografice pe defilare pe care le vedeți de la Apple și alții.
Prin împerecherea Elementor cu Scrollsequence, puteți adăuga cu ușurință aceste tipuri de animații la modelele dvs. Elementor.
Dacă vrei să-l încerci, ai două opțiuni:
- Utilizați doar versiunea gratuită a Scrollsequence la WordPress.org.
- Utilizați perioada de încercare gratuită de 14 zile pentru a accesa toate funcțiile premium din Scrollsequence.
Dacă decideți că doriți să utilizați versiunea premium a Scrollsequence, puteți utiliza cuponul nostru exclusiv Scrollsequence pentru a economisi 20% la comanda dumneavoastră.
20i Găzduire WordPress
Detalii
Reducere exclusivă de 50% de la 20i WordPress Hosting, doar pentru cititorii WP Mayor.Astra
Detalii
Obțineți o reducere exclusivă de 10% la Astra Pro, pachetul Essential și pachetul Growth.Reducere de aniversare Astra
Detalii
25% reducere la pachetele Astra Pro sau Astra Agency plus primiți o intrare gratuită la o tragere la sorți pentru a câștiga un iMac nou-nouț!Autonami
Detalii
Reducere exclusivă de 10% la Autonami – Gestionați relațiile cu clienții folosind etichetarea, segmentarea și difuzarea fără a părăsi WordPress.Avada
Detalii
Avada este cel mai bun constructor de site-uri WordPress. De încredere de către începători, marketeri și profesioniști, construite având în vedere uzabilitate și performanță.Hambar2
Detalii
Cititorii WP Mayor primesc o reducere suplimentară de 5% la oferta de 30% Black Friday! Aceasta va fi aplicată automat la finalizarea plății.Constructor de castori
Detalii
Obțineți 25% reducere la Beaver Builder - generatorul de pagini WordPress în care puteți avea încredere în afacerea dvs.Bluehost
Detalii
Bluehost este furnizorul nostru de găzduire partajată WordPress recomandat. Obțineți o reducere de până la 15 USD pe lună la găzduirea partajată Bluehost.Domeniu gratuit cu Bluehost
Detalii
Obțineți înregistrarea gratuită a domeniului atunci când vă înscrieți pentru găzduirea accesibilă și de încredere a Bluehost.Buletin
Detalii
20% reducere la toate planurile din Buletin! Cel mai simplu și mai puternic plugin de banner de anunț pentru site-ul dvs. WordPress.Elementor Pro
Detalii
Alăturați-vă unei comunități de peste 8 milioane de profesioniști care construiesc site-uri web, colaborează și cresc împreună cu platforma de creare web numărul 1 pentru WordPress.Teme de motor
Detalii
Obțineți 35% REDUCERE EngineThemes - Teme de aplicații WordPress create cu experiență pentru ambarcațiunile dvs.Plugin esențial
Detalii
Obțineți o reducere de 15% la pachetul Essential Plugin.Pronto All-in-One
Detalii
1 lună GRATUIT pentru toți clienții noi pe soluția Pronto All-in-one, o temă de fotografie de top pentru WordPress.Marmota
Detalii
Reducere exclusivă de 15% la Groundhogg.Growanizer
Detalii
Reducere exclusivă de 30% la Growanizer – noua generație de vânzări inteligente pentru WooCommerce.Prezența umană
Detalii
Reducere exclusivă de 20% la prezența umană – opriți plățile bot și formați spam fără a vă afecta experiența utilizatorului.IconicWP
Detalii
În această Black Friday puteți obține până la 40% reducere la pluginurile WooCommerce și pachetele de pluginuri IconicWP care stimulează vânzările.IconicWP
Detalii
În această lună WooCommerce, obțineți până la 15% reducere la pluginurile și pachetele de pluginuri WooCommerce IconicWP care stimulează vânzările.KBucket
Detalii
Obțineți o reducere de 40% la pluginul KBucket - creați un centru de conținut personalizabil.lingvistic
Detalii
20% reducere la Linguise - Creșteți-vă traficul pe site-ul dvs. cu traduceri instantanee în mai mult de 80 de limbi.Liquid Web
Detalii
35% REDUCERE timp de 4 luni la găzduirea WordPress gestionată.Liquid Web
Detalii
Obțineți o reducere de 33% de la specialiști în găzduire WooCommerce gestionați de Liquid Web.Widget video Magnifi
Detalii
Încorporați, personalizați și efectuați apeluri video în siguranță cu ajutorul widgetului video Magnifi de pe site-ul dvs. în câteva minute.Suplimente principale pentru Elementor
Detalii
Reducere exclusivă de 50% de la Master Addons pentru Elementor.Newsletter Glue
Detalii
Newsletter Glue conectează serviciul dvs. de e-mail la WordPress, astfel încât să puteți publica buletine informative așa cum publicați postările pe blog!Obțineți o reducere de 15% la prima achiziție.
Notificarea X
Detalii
Soluție de marketing FOMO supremă și cu dovadă socială în care au încredere peste 30.000 de companii din întreaga lume.OceanWP
Detalii
Tema WordPress care vă oferă mai mult!Comandabil
Detalii
Duceți comenzile online la un nivel cu totul nou. Obțineți cel mai bun preț la Comandabil cu codul WPMAYOR .Outfunnel
Detalii
Obțineți o reducere de 25% pentru primele 3 luni pe Outfunnel – urmăriți vizitele pe site și sincronizați trimiterile de formulare la CRM.Pagina de plată
Detalii
15% reducere la pagina de plată.PeepSo
Detalii
Obțineți o reducere de 10% la un pachet anual de PeepSo.Quicq
Detalii
Obțineți o reducere de 20% în primele două luni la toate pachetele QuicqSecvență de defilare
Detalii
Obțineți o reducere exclusivă de 20% la Scrollsequence cu cuponul WPMAYOR20. Creați-vă animația de defilare în câteva minute.ShopReady
Detalii
Obțineți o reducere exclusivă de 20% la ShopReady.Spotlight PRO
Detalii
Obțineți 20% reducere la Spotlight PRO pentru a dubla impactul conținutului dvs. Instagram!Vânzare stelară
Detalii
Obțineți 40% reducere la toate pluginurile IconicWP, inclusiv pachetele lor (obțineți o reducere masivă de 199 USD la pachetul All Access)!Vânzare stelară
Detalii
Obțineți o reducere de 40% la The Events Calendar Pro - Calendare, bilete și instrumente WordPress puternice pentru a vă gestiona evenimentele de la început până la sfârșit.Tripetto Pro
Detalii
Obțineți o reducere de 10% la licențele Tripetto Pro.UnlimittedWP
Detalii
Obțineți o reducere de 20% în prima lună de la UnlimitedWP.Compozitor vizual
Detalii
Obțineți 10% reducere la Visual Composer - Creează-ți site-ul WordPress astăzi. Începe ușor. Construiți rapid.WooFunnels
Detalii
Dublați-vă profiturile în acest sezon de vârf! Economii mari la WordPress Funnel Builder & Marketing Automation Engine de la WooFunnels!WP Adminify
Detalii
Reducere exclusivă de 30% la WP Adminify – un set de instrumente puternic pentru tabloul de bord WordPress.Buff-uri WP
Detalii
Reducere de 10% de la WP Buffs – partenerul dumneavoastră tehnic 24/7 pentru planuri de îngrijire și servicii de întreținere.WP Atrageți atenția
Detalii
Economisiți 40% la ediții nelimitate ale Atrage atenția - instrumentul #1 pentru crearea de imagini interactive pe WordPress.Motor WP
Detalii
Primiți 4 luni gratuit la planurile anuale sau 20% reducere la prima lună la planurile lunare.WP Event Manager
Detalii
Obțineți 10% reducere WP Event Manager - Calendar, bilete și instrumente WordPress puternice pentru a vă gestiona evenimentele.WP Migrate DB Pro
Detalii
Ofertă pentru clienți noi — Economisiți până la 50% în primul an de WP Migrate DB Pro pentru utilizare individuală. WP Migrate DB Pro vă permite să copiați întregul site WordPress dintr-un mediu în altul cu un singur clic în tabloul de bord.WP Webhooks Pro
Detalii
Reducere exclusivă de 15% la WP Webhooks Pro. Extindeți-vă site-ul web cu cel mai puternic sistem webhook. (Reducerea se aplică pentru prima perioadă de facturare).Pluginuri Yith WooCommerce
Detalii
Luați totul cu o reducere de 30%! Nu sunt necesare cupoane.Mai aveți întrebări despre cum să adăugați animație pe scroll în Elementor? Dă-ne un strigăt în secțiunea de comentarii și spune-ne ce te gândești.