Divi: Hogyan készítsünk animált háttérmaszkokat és mintákat görgetés közben

Szeretnél hátteret tervezni Divi Animált oldalgörgetést szeretnél létrehozni maszkok és minták segítségével? Ez az oktatóanyag neked szól...

Görgető animáció hozzáadása Divi és a háttérmaszkjai és mintái egy hasznos tervezési trükk, amely új életet lehelhet webhelyed hátterébe. 

Ebben az oktatóanyagban megmutatjuk, hogyan hozhatsz létre és animálhatsz háttérmaszkokat és mintákat a Divi görgetési lehetőségeivel (egyéni kód nem szükséges). 

Ehhez létrehozunk egy lebegő háttérréteget egy Divi vonal segítségével, amelyet háttérmaszkok és minták animálására fogunk használni, amikor a felhasználó végiggörgeti a tartalom egy részét. 

Szerintünk tetszeni fog az eredmény.

Kezdjük!

felmérés

Íme egy gyors szemléltetés arról, hogy hogyan fog kinézni a háttérben görgető animáció ebben az oktatóanyagban.

A koncepció

Ennek a kialakításnak a koncepcióját nem lehet túl nehéz megragadni. Egy olyan résszel kezdjük, amelynek színátmenetes a háttere.

Ezután létrehozunk egy vonalat, amelyet (abszolút) úgy helyezünk el, hogy teljesen lefedje a részt (mint egy átfedés). Hozzáadhatunk egy háttérmintát a sorhoz.

Ezután hozzáadhatunk egy háttérmaszkot az oszlophoz.

Aztán hozzáadjuk görgető hatások a sorhoz és oszlophoz (mint a méretezés és az forgatás), amely külön animálja a mintát és a maszkot a szakasz hátterében.

Amikor elrejtjük a szakasz túlcsordulását, csak a szakaszon belüli animációt látjuk.

Kezdjük egy oldal létrehozásával a Divi Builder segítségével

A kezdéshez a következőket kell tennie:

A WordPress irányítópultjáról lépjen a következőre: Oldalak> Új hozzáadása új oldal létrehozásához.

Adj egy számodra értelmes címet, és kattints Használja a Divi Builder alkalmazást

Akkor kattintson Kezdje el az építést (Építsd a semmiből)

Ezután egy üres vászon lesz a tervezés megkezdéséhez a Divi-ben.

Olvassa el: Divi: Hogyan használd a "Gradient Buildert" a képek szebbé tételéhez

Hogyan hozhatok létre animált görgető háttérmaszkokat és mintákat a Divi segítségével

A szakasz hátterének kialakítása

Először is, figyelmen kívül hagyjuk az új sor létrehozását, és közvetlenül a témaszerkesztőben meglévő alapértelmezett szakasz módosítására térünk át. 

Ahhoz, hogy a háttérképünk kitöltse a böngészőt, hozzá kell adnunk a függőleges magasságot a szakaszhoz. Ennek egy egyszerű módja, ha megadunk egy minimális magasságot a szakaszhoz.

Nyissa meg a szakasz beállításait. A fül alatt Tervezés, frissítse a minimális magasságot és távolítsa el a párnázást az alábbiak szerint:

• Margó: 80 Vh (felső és alsó)
• Kitöltés: 0 képpont (felül és alul)

Háttérátmenet tervezése a szakaszhoz

Most már hozzáadhatunk egy egyéni háttérátmenetet a szakaszhoz.

Az első színátmenet-megállók hozzáadásához győződjön meg arról, hogy a szakaszbeállítások meg vannak nyitva a lapon. TartalomEzután válassza ki a fület Háttér színátmenet és kattintson egy új színátmenet hozzáadásához. Ezzel két alapértelmezett színátmenet színt ad hozzá. Adja hozzá a következő színátmenet-megállókat színnel és pozícióval az alábbiak szerint:

• Gradiens megállók:
  • 0%: #4158d0
  • 50%: #c850c0
  • 100%: #ffcc70

Ezután változtassa meg a lineáris gradiens irányát:

• Gradiens iránya: 270 fok

Sorok hozzáadása a szakaszhoz

Most, hogy a szakaszunk a helyén van, adjunk hozzá egy egyoszlopos sort. Ezt a sort fogjuk használni a háttérmaszkhoz és a minta görgetési animációjához.

Ezután másolja le az imént létrehozott sort. Ezt a második (duplikált) sort fogjuk használni a tartalomhoz, ahogyan Ön is szokta. 

Most már kell lennie egy felső sornak a háttérben görgető animációhoz és egy sornak a normál tartalomhoz.

A vonal testreszabása

Most, hogy a szakasz háttérszínátmenete elkészült, a figyelmünket a háttérgörgetési animációhoz használni kívánt vonalra fordíthatjuk. 

Nyissa meg a vonalbeállításokat. A fül alatt Részletes, frissítse a következőket:

• Pozíció: Abszolút

Ez lehetővé teszi, hogy a vonal átfedje a szakaszt anélkül, hogy tényleges helyet foglalna el a dokumentumban. 

Most már csak a magasságot és a szélességet kell frissítenünk, hogy azok lefedjék a szakasz teljes szélességét és magasságát. Ez létrehozza a szükséges átfedést és a második háttértervezési réteget.

A fül alatt Tervezés, frissítse a méretbeállításokat az alábbiak szerint:

• Aquasize oszlopmagasságok: IGEN
• Szélesség: 100%
• Max szélesség: 100%
• Magasság: 100%
• Kitöltés: 0 képpont (felül és alul)

Most lehet, hogy nem látod a vonalat, de most tökéletesen lefedi a teljes szakasz hátterét.

Hozz létre egy háttérmintát a vonalhoz

Ebben a példában hozzáadjuk a mintát Konfetti vonalas háttérként.

Nyissa meg a vonalbeállításokat. A lehetőség alatt Háttér, válassza a fület Háttér minta és frissítse a következőket:

• Háttérminta: konfetti
• Minta :
  • Szín: #f6bef7
  • Méret: Egyedi méret
  • Szélesség: 35 vw
  • Ismétlés Origin: Center

Megjegyzés A VW hosszmértékegység használata biztosítja, hogy a minta a böngészővel együtt méretezhető legyen, így a design egységes és reszponzív marad.

Görgetési effektusok hozzáadása a vonalhoz

Most, hogy a háttérmintánk a helyén van, görgetési effekteket adhatunk a vonalhoz.

Menjen a lapra RészletesAz opció alatt Görgetési effektusok, frissítse a következőket:

Válassza ki a lapot Vízszintes mozgás és frissítse a következőket:

• Vízszintes mozgás engedélyezése: IGEN
• Kezdő eltolás: 0,5 (0%-nál)
• Közepes eltolás: 0 (40%-ról 60%-ra)
• Befejező eltolás: -0,5 (100%-nál)

Ez a vonal hátterének mintázatát 50 pixelről balra, majd 50 pixelre jobbra fogja eltolni.

Válaszd ki a „Felskálázás felfelé és lefelé” fület, és frissítsd a következőket:

• Fel és le méretezés engedélyezése: IGEN
• Kezdő skála: 150% (0%-nál)
• Közepes skála: 100% (40%-ról 60%-ra)
• Befejezési skála: 150% (100%)

Ez a vonal háttérmintázatát méretezi görgetés közben.

Válassza ki a lapot "Forgó " és frissítse a következőket:

• Forgatás engedélyezése: IGEN
• Kezdő forgatás: 10 fok (0%-nál)
• Középső forgás: 0 fok (40%-ról 60%-ra)
• Elforgatás vége: -10 fok (100%-nál)

KULCSTIPP: A forgatást minimálisra kell csökkenteni, különben fennáll a veszélye annak, hogy hézagok jelennek meg ott, ahol a vonal nem nyúlik túl a szakaszon. Jó ökölszabály, hogy növeld a méretarányt, ha növelni szeretnéd az forgatást. Ez lehetővé teszi, hogy a vonal a szakasz felett forogjon anélkül, hogy a szélek láthatóvá válnának.

Adjon hozzá egy görgetési effektusokkal ellátott háttérmaszkot az oszlophoz

Miután elkészült a sorunk, készen állunk arra, hogy hozzáadjunk egy görgetési effektusokkal ellátott háttérmaszkot az ugyanabban a sorban lévő oszlophoz. Kezdésként adjunk hozzá egy háttérmaszkot.

Ehhez nyissa meg az oszlopbeállításokat. A fül alatt Háttér maszk, frissítse a következőket:

• Maszk: Layer Blob
• Szín: #ffffff
• Maszk transzformáció: vízszintes átfordítás, megfordítás

Görgetési effektusok hozzáadása az oszlophoz

Most, hogy a háttérmaszk a helyén van, görgetési effektusokat adhatunk az oszlophoz. Ne feledjük, hogy az oszlop már rendelkezik a szülő sorból örökölt görgetési effektusokkal. 

Mindössze annyit kell tennünk, hogy elforgatjuk az oszlopot a sorral ellentétes irányba, hogy jobban elkülönüljön a maszk és a minta a görgetés időtartama alatt.

Menjen a lapra Részletes. Az opciók alatt Görgetési effektusok, válassza a fület Rotating és frissítse a következőket:

• Forgatás engedélyezése: IGEN
• Kezdő forgatás: -15 fok (0%-nál)
• Középső forgás: 0 fok (40%-ról 60%-ra)
• Elforgatás vége: 15 fok (100%-nál)

Szakasz túlcsordulás elrejtése

Jelenleg a vonal mindig látható marad, amikor görgetés hatására a szakaszon túlnyúlik.

Ennek kijavításához el kell rejtenünk a szakasz túlcsordulást. Ehhez nyissuk meg a szakasz beállításait. A lap alatt Részletes, frissítse a láthatósági beállításokat az alábbiak szerint:

• Vízszintes túlcsordulás: Rejtett
• Függőleges túlcsordulás: Rejtett

Most már jobban néz ki.

Lásd még: Divi: maszkok és háttérminták 12 kombinációja

Tartalom hozzáadása az erre a célra létrehozott sorhoz

Ebben a szakaszban a háttérmaszk és a minta görgető animációja elkészült. Már csak annyi a dolgunk, hogy hozzáadjuk a kívánt tartalmat a korábban a tartalomhoz létrehozott sorhoz.

Ebben a példában hozzáadtunk egy próbacímet, hogy lássuk, hogyan fog kinézni a háttéranimáció statikus szöveggel.

Végső eredmény

Vessünk egy pillantást a tervezésünk végeredményére.

Töltse le a DIVI-t most!!!

Összegzés

Elképesztő, milyen egyszerű ilyen gyönyörű háttereket létrehozni a Divi háttérbeállításaival. Továbbá, a Divi görgetési effektusaival hozzáadott animáció új életet lehel ezekbe a tervekbe.

Más megjelenésért minden rétegen kipróbálhatsz különböző maszkokat és mintákat. Ha további inspirációra vágysz a használatához maszkok és minták Háttérinformációkért lásd ezeket 12 háttér maszk és minta kombináció

Reméljük, hogy ez az oktatóanyag inspirációt ad a következő Divi projektjeihez. Ha bármilyen aggálya vagy javaslata van, keressen minket a megjegyzések szakasz hogy megbeszéljük.

Konzultálhat is forrásaink, ha további elemekre van szüksége az internetes oldalak létrehozására irányuló projektek végrehajtásához.

Ne habozzon, tekintse meg útmutatónkat is a WordPress blog létrehozása vagy az egyiket Divi: minden idők legjobb WordPress témája.

De időközben ossza meg ezt a cikket a különböző közösségi hálózatokon.

...