Stranica koja govori o Vama (o) je jedna od Vaših najvažnijih stranica web stranica. To omogućuje ljudima da vas bolje upoznaju i odluče hoće li učiniti sljedeći korak. Ako tražite jednostavan način uključivanja pripovijedanja na ovu stranicu, svidjet će vam se ovaj vodič. Koristit ćemo Divi efekte pomicanja kako bismo stvorili glatki prijelaz pripovijedanja na pomicanje. Čim jedan dio priče izblijedi, pojavi se drugi. Ovo daje posjetitelji osjećaj čitanja zanimljive priče. 

Mogući konačni rezultat

Prije nego što uđemo u tutorial, pogledajmo rezultat na različitim veličinama zaslona.

1. Napravite prvi odjeljak cijelog zaslona stranice

Dodajte novi odjeljak

Boja pozadine

Započnite dodavanjem prvog odjeljka na stranicu O programu. Otvorite postavke odjeljka i promijenite boju pozadine u crnu.

• Boja pozadine: # 000000

dimenzioniranje

Zatim okrenite odjeljak na cijeli zaslon dodavanjem minimalne visine u parametrima veličine.

• Min. Visina: 100vh

2. Dodajte animirani redak

Dodajte novi redak

Struktura stupaca

Zatim dodajte novi redak svom odjeljku koristeći sljedeću strukturu stupaca:

dimenzioniranje

Otvorite parametre retka i dopustite liniji da zauzme cijelu širinu spremnika odjeljka mijenjanjem dimenzionalnih parametara.

• Širina: 100%
• Maks. Širina: 100%

razmak

Zatim dodajte lijevo i desno ispunjavanje na različite veličine zaslona.

• Lijeva obloga: 20vw (stol), 10vw (tablet i telefon)
• Desna obloga: 20vw (stol) 10vw (tablet i telefon)

Animacija

Da bismo povećali učinak pripovijedanja, također ćemo koristiti liniju animacije blijeđenja.

• Stil animacije: Fade
• Trajanje animacije: 3000ms
• Krivulja brzine animacije: lakoća ulaska
• Ponavljanje animacije: jednom

Položaj

Konačno, pobrinut ćemo se da se linija promijeni u središnjem dijelu spremnika izmjenom opcija položaja.

• Pozicija: apsolutno
• Lokacija: Centar

3. Umetnite naslov s efektima pomicanja

Dodajte tekstualni modul # 1 u stupac

Dodajte H1 sadržaj

Jedini modul koji trebamo u ovom redu je tekstualni modul s sadržaj H1.

Naslov 1 Postavke teksta

Idite na karticu dizajn modula i promijenite postavke teksta H1 na sljedeći način:

• Font naslova: Nunito
• Težina naslovnog slova: Polja podebljana
• Boja teksta zaglavlja: #ffffff
• Veličina teksta zaglavlja: 7vw (radna površina), 9vw (tablet), 11vw (telefon)

Okomito kretanje

Također ćemo dodati suptilnu vertikalnu animaciju.

• Aktivirajte okomito kretanje: Da
• Početak pomaka: 0 (na 50%)
• Prosječni odmak: 10 (na 100%)
• Konačni odmak: 10

Ulazni i odlazni efekt pomicanja

S dolaznim i odlaznim efektom izblijedjenja.

• Uključite izblijedjenje i van: Da
• Početna neprozirnost: 100%
• Prosječna neprozirnost: 100% (kod 55%)
• Krajnja neprozirnost: 0% (do 62%)

Povećavanje efekta pomicanja gore-dolje

I na kraju, ali ne najmanje važno, koristit ćemo i efekt pomicanja prema gore i dolje.

• Omogući skaliranje prema gore i dolje: Da
• Početna ljestvica: 100% (do 40%)
• Prosječna ljestvica: 95% (do 74%)
• Krajnja ljestvica: 90%

4. Jednom klonirajte cijeli odjeljak i uključite tekst opisa s efektima pomicanja

Uređivanje naslova i sadržaja

Nakon što dovršite prvi odjeljak, možete ga u potpunosti klonirati. Otvorite tekstualni modul unutar spremnika dupliciranih odjeljaka i upotrijebite H2 kopiju.

Izmijenite tekstualne parametre H2 tekstualnog modula

U skladu s tim promijenite postavke teksta H2:

• Naslov 2 Policija: Nunito
• Naziv fonta 2: polu-podebljani
• Stavka 2 Boja teksta: #ffffff
• Predmet 2 Veličina teksta: 5vw (desktop), 7vw (tablet), 8vw (telefon)
• Visina linije 2: 1em (ured), 1.2em (tablet i telefon)

Dodajte tekstualni modul # 2 u stupac

Dodajte sadržaj

Zatim dodajte još jedan tekstualni modul u stupac s a sadržaj opis po vašem izboru.

Postavke teksta

Promijenite tekstualne postavke za tekstualni modul na sljedeći način:

• Font teksta: Open Sans
• Boja teksta: #ffffff
• Veličina teksta: 1vw (desktop), 2.5vw (tablet), 3vw (telefon)
• Visina retka teksta: 3.1em (radni stol), 2.5em (tablet i telefon)

razmak

Koristite i gornju maržu.

• Gornja margina: 8vw

Ulazni i odlazni efekt pomicanja

Zatim se prebacite na efekte pomicanja u naprednoj kartici i upotrijebite sljedeće postavke fade in fade out:

• Uključite izblijedjenje i van: Da
• Početna neprozirnost: 100%
• Prosječna neprozirnost: 0% (kod 31%)
• Konačna neprozirnost: 0% (do 35%)

Povećavanje efekta pomicanja gore-dolje

Također dodajte efekt skaliranja prema gore i dolje.

• Omogući skaliranje prema gore i dolje: Da
• Početna ljestvica: 100% (do 40%)
• Prosječna ljestvica: 95% (do 74%)
• Krajnja ljestvica: 90%

Sada možete klonirati ovaj posljednji odjeljak onoliko puta koliko je to moguće. Međutim, morat ćete prilagoditi sadržaj svakog odjeljka za vaše potrebe.

pregled

Sad kad smo prošli sve korake, pogledajmo konačno kako to izgleda na različitim veličinama zaslona.

Završne misli

U ovom smo vam članku pokazali kako ispričati priču na stranici o stranici koristeći Divi ugrađene efekte pomicanja. Učinak koji smo stvorili omogućuje uzastopnoj kopiji da blijedi i izlazi, dajući posjetitelji kao da čitam priču. Također ste mogli besplatno preuzeti JSON datoteku! Ako imate pitanja ili prijedloga, slobodno ostavite komentar u odjeljku za komentare u nastavku.