Treci la conținutul principal

Cum se creează o animație de defilare pe Divi

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

Pagina Despre tine este una dintre cele mai importante pagini de pe site-ul tău. Acest lucru le permite oamenilor să vă cunoască mai bine și să decidă dacă se simt confortabil să facă următorul pas. Dacă sunteți în căutarea unei modalități ușoare de a include povestiri pe această pagină, vă va plăcea acest tutorial. Vom folosi efectele de defilare ale lui Divi pentru a crea o tranziție de narațiune lină pe scroll. De îndată ce o parte a poveștii dispare, apare o altă parte. Oferă vizitatorilor senzația de a citi o poveste interesantă. 

Rezultat final posibil

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire asupra rezultatului pe diferite dimensiuni de ecran.

Animație Divi

1. Creați prima secțiune pe ecran complet a paginii

Adăugați o secțiune nouă

Culoare de fundal

Începeți prin adăugarea unei prime secțiuni la pagina dvs. Despre. Deschideți setările secțiunii și schimbați culoarea de fundal în negru.

  • Culoare fundal: # 000000
Secțiunea de fundal Divi

dimensionarea

Apoi rotiți secțiunea pe ecranul complet adăugând o înălțime minimă în parametrii de dimensionare.

  • Inaltime minima: 100vh
Înălțimea secțiunii Divi

2. Adăugați o linie animată

Adăugați o linie nouă

Structura coloanei

Apoi adăugați un nou rând la secțiunea dvs. folosind următoarea structură de coloană:

Adăugați o linie divi

dimensionarea

Deschideți parametrii liniei și permiteți liniei să ocupe întreaga lățime a containerului de secțiune modificând parametrii de dimensionare.

  • Lățime: 100%
  • Lățime maximă: 100%
Configurare lățime maximă a diviziunii

spaţierea

Apoi adăugați umplutura la stânga și la dreapta pe diferite dimensiuni de ecran.

  • Căptușire stânga: 20vw (birou), 10vw (tabletă și telefon)
  • Căptușire dreapta: 20vw (birou) 10vw (tabletă și telefon)
Personalizați căptușeala Divi

Animaţie

Pentru a crește efectul de povestire, vom folosi, de asemenea, o animație de estompare pentru linie.

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

  • Stil de animație: Fade
  • Durata animației: 3000ms
  • Curba vitezei animației: ușurință în intrare
  • Repetați animația: o dată
Animație secțiune Divi

Poziţie

În cele din urmă, ne vom asigura că linia este poziționată în centrul containerului de secțiune modificând opțiunile de poziție.

  • Poziție: absolută
  • Locație: Centru
Poziția abolită divi

3. Introduceți un titlu cu efecte de derulare

Adăugați modulul text # 1 la coloană

Adăugați conținut H1

Singurul modul de care avem nevoie în această linie este un modul text cu conținut H1.

Design titire divi

Titlul 1 Setări text

Accesați fila de proiectare a modulului și modificați setările de text H1 după cum urmează:

  • Titlul fontului: Nunito
  • Greutatea fontului titlu: Semi îndrăzneț
  • Culoarea textului antetului: #ffffff
  • Dimensiune text antet: 7vw (desktop), 9vw (tabletă), 11vw (telefon)
Configurarea fontului Divi

Mișcare verticală

Vom adăuga, de asemenea, o animație verticală subtilă.

  • Activați mișcarea verticală: Da
  • Start offset: 0 (la 50%)
  • Offset mediu: 10 (la 100%)
  • Decalaj final: 10
Animație text Divi

Efectul de derulare de intrare și de ieșire

Cu un efect de estompare de intrare și de ieșire.

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

  • Activați decolorarea și intrarea: Da
  • Opacitate inițială: 100%
  • Opacitate medie: 100% (la 55%)
  • Opacitatea finală: 0% (până la 62%)
Selecție animație opacitate

Scalarea efectului de derulare în sus și în jos

Nu în ultimul rând, vom folosi, de asemenea, un efect de derulare a scării în sus și în jos.

  • Activați scalarea în sus și în jos: Da
  • Scara de pornire: 100% (până la 40%)
  • Scara medie: 95% (până la 74%)
  • Scara finală: 90%
Text de animație Divi

4. Clonați o secțiune întreagă o singură dată și includeți textul de descriere cu efecte de derulare

Editați titlul și conținutul

După ce ați finalizat prima secțiune, o puteți clona în întregime. Deschideți modulul text în interiorul containerului secțiunii duplicat și utilizați o copie H2.

Secțiunea duplicată divi

Modificați parametrii textului modulului H2 Text

Modificați setările de text H2 în consecință:

  • Titlul 2 Poliție: Nunito
  • Titlul fontului 2: semi-îndrăzneț
  • Articolul 2 Culoarea textului: #ffffff
  • Articolul 2 Dimensiunea textului: 5vw (desktop), 7vw (tabletă), 8vw (telefon)
  • Înălțimea liniei 2: 1em (birou), 1.2em (tabletă și telefon)
poveste pe defilare

Adăugați modulul text # 2 la coloană

Adăugați conținut

Apoi adăugați un alt modul text la coloană cu conținutul de descriere ales.

poveste pe defilare

Setări text

Modificați setările de text pentru modulul text după cum urmează:

  • Font text: Deschide Sans
  • Culoarea textului: #ffffff
  • Dimensiunea textului: 1vw (desktop), 2.5vw (tabletă), 3vw (telefon)
  • Înălțimea liniei de text: 3.1em (birou), 2.5em (tabletă și telefon)
poveste pe defilare

spaţierea

De asemenea, utilizați o marjă de sus.

  • Marja superioară: 8vw
poveste pe defilare

Efectul de derulare de intrare și de ieșire

Apoi, comutați la efecte de derulare în fila avansată și utilizați următoarele setări de fade in și fade out:

  • Activați decolorarea și intrarea: Da
  • Opacitate inițială: 100%
  • Opacitate medie: 0% (la 31%)
  • Opacitate finală: 0% (până la 35%)
Animație de derulare a modulului text Divi

Scalarea efectului de derulare în sus și în jos

Adăugați și un efect de redimensionare în sus și în jos.

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

  • Activați scalarea în sus și în jos: Da
  • Scara de pornire: 100% (până la 40%)
  • Scara medie: 95% (până la 74%)
  • Scara finală: 90%
Modul de adaptare animație divi text

Acum puteți clona această ultimă secțiune de mai multe ori. Cu toate acestea, va trebui să ajustați conținutul fiecărei secțiuni pentru nevoile dvs.

studiu

Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra modului în care arată pe diferite dimensiuni de ecran.

Rezultatul probei

Ultimele gânduri

În acest articol, v-am arătat cum să spuneți o poveste pe pagina dvs. Despre, utilizând efectele de defilare încorporate ale Divi. Efectul pe care l-am creat permite copierii consecutive să se estompeze și să dispară, făcând vizitatorii să simtă că citesc o poveste. De asemenea, puteți descărca gratuit fișierul JSON! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Acest articol conține 1 comentariu

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top
1 acțiuni
acțiune1
tweet
Registru