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 az oldal görgetése közben a maszkoknak és mintáknak köszönhetően? Ez az oktatóanyag neked szól...

Görgetési animáció hozzáadása a Divi háttérmaszkjai és mintái pedig egy hasznos tervezési tipp, amely új életet lehelhet a háttértervekbe. weboldal. 

Ebben az oktatóanyagban megmutatjuk, hogyan hozhat létre és animálhat maszkokat és háttérmintákat a Divi (nincs szükség egyedi kódra). 

Ehhez egy vonal segítségével lebegő háttérréteget hozunk létre Divi amelyeket maszkok és háttérminták animálására fogunk használni, amikor a felhasználó végiggörget egy szakaszt tartalom. 

Szerintünk tetszeni fog az eredmény.

Kezdjük!

felmérés

Íme egy gyors szemléltetés arról, hogyan fog kinézni az oktatóanyag háttérgörgetési animációja.

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 úgy helyezünk el (abszolút), hogy teljesen lefedje a szakaszt (mint egy átfedés). A sorhoz háttérmintát adhatunk.

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

Aztán hozzáadjuk görgető hatások sorra és oszlopra (mint a lépték és az elforgatás), amely külön animálja a mintát és a maszkot a szakasz hátterében.

Amikor elrejtjük a szakasztúlcsordulást, 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 Felhasználás Divi Építész

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

Animált gördülő háttérmaszkok és minták létrehozása a Divi segítségével

Szakasz háttér kialakítása

Először kihagyjuk a sor létrehozását, és közvetlenül a témakészítő meglévő alapértelmezett szakaszának szerkesztéséhez ugorunk. 

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

Nyissa meg a szakasz beállításait. A fül alatt Design, 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 gradiens tervezése a szakaszhoz

Most már egyéni háttérszínátmenetet adhatunk a szakaszhoz.

Az első színátmenet megállók hozzáadásához győződjön meg arról, hogy a szakasz beállításai nyitva vannak a lapon Tartalom. Ezután válassza ki a lapot 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, adjon hozzá egy egyoszlopos sort a szakaszhoz. Ezt a sort fogjuk használni a háttérmaszkunkhoz és a görgetős mintázathoz.

Ezután duplikálja meg az imént létrehozott sort. Ezt a második (duplikált) sort fogjuk használni a mi tartalom ahogy általában tennéd. 

Most már rendelkeznie kell egy felső sorral a háttér görgető animációjához és egy sorhoz a tartalom Normál.

A vonal testreszabása

Most, hogy készen áll a szakasz háttérszínátmenete, figyelmünket arra a sorra fordíthatjuk, amelyet a görgetős háttér-animációhoz fogunk használni. 

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 valódi helyet foglalna el a dokumentumban. 

Most már csak annyit kell tennünk, hogy frissítsük a magasságot és a szélességet úgy, hogy azok átfogják a szakasz teljes szélességét és magasságát. Ez létrehozza a szükséges fedvényt és a második háttértervező réteget.

A fül alatt Design, 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)

Lehet, hogy most nem látja a vonalat, de most már tökéletesen lefedi a teljes szakasz hátterét.

Hozzon 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. Az opció 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 méretezhető legyen a böngészővel, így a kialakítás konzisztens és érzékeny marad.

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

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

Menjen a lapra Részletes. Az 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)

Ezzel a vonal háttérmintázatát 50 képponttal kezdődően balra mozgatja, és 50 képponttal jobbra végződve.

Válassza a "Scale Up and Down" lapot, és frissítse 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 átméretezi a sor háttérmintáját 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ökkentenie, különben fennáll a veszélye, hogy rések jelennek meg, ahol a vonal nem nyúlik túl a szakaszon. Egy jó hüvelykujjszabály az, hogy növeljük a léptéket, ha növelni akarjuk a forgatást. Ez lehetővé teszi, hogy a vonal elforduljon a szakaszon anélkül, hogy az élek szabaddá válnának.

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

Ha a sorunk elkészült, készen állunk egy görgetőeffektusokkal ellátott háttérmaszk hozzáadására ugyanazon sor oszlopához. Kezdésként adjunk hozzá egy háttérmaszkot.

Ehhez nyissa meg az oszlopbeállítást. 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érmaszkunk a helyén van, görgetőeffektusokat adhatunk az oszlophoz. Ne feledje, hogy az oszlop már rendelkezik a szülősortó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 látható marad, ha a görgetés hatására túlnyúlik a szakaszon.

Ennek megtisztításához el kell rejtenünk a szakasztúlcsordulást. Ehhez nyissa meg a szakasz beállításait. A fül 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

Ezen a ponton a háttérmaszk és a minta görgetési animációja kész. Nem kell mást tennünk, mint hozzáadni a kívánt tartalmat ahhoz a sorhoz, amelyet korábban a tartalomhoz készítettünk.

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

Végső eredmény

Nézzük meg tervezésünk végeredményét.

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

Következtetés

Elképesztő, milyen egyszerű ilyen gyönyörű háttereket létrehozni a Divi háttérbeállításaival. Ráadásul az animáció hozzáadása a Divi görgetőeffektusaihoz új életet hoz ezekbe a tervekbe.

Az eltérő megjelenés érdekében minden rétegen különböző maszkokat és mintákat próbálhat ki. Ha további inspirációt szeretne kapni a használatához maszkok és minták háttér, nézd meg 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.

...