Chtěli byste navrhnout pozadí divi animovaný při rolování stránky díky maskám a vzorům? Tento tutoriál je pro vás...

Přidání animace posouvání do divi a jeho masky a vzory na pozadí jsou užitečným tipem pro návrh, který může vdechnout nový život vašim návrhům pozadí. Webové stránky

V tomto tutoriálu vám ukážeme, jak vytvořit a animovat masky a vzory pozadí pomocí možností posouvání divi (není potřeba žádný vlastní kód). 

K tomu vytvoříme plovoucí vrstvu pozadí pomocí čáry divi který použijeme k animaci masek a vzorů pozadí, když uživatel projde částí obsah

Myslíme si, že se vám výsledek bude líbit.

Začněme!

přehled

Zde je rychlý příklad toho, jak bude vypadat animace posouvání na pozadí pro tento tutoriál.

animované pozadí Divi při rolování stránky díky maskám a vzorům

Koncept

Koncept tohoto designu by neměl být příliš těžký na uchopení. Začneme sekcí, která má pozadí s přechodem.

navrhněte animované pozadí Divi při posouvání stránky pomocí masek a vzorů

Poté vytvoříme čáru, která je umístěna (absolutně) tak, aby zcela pokrývala řez (jako překrytí). Do řádku můžeme přidat vzor pozadí.

Dále můžeme do sloupce přidat masku pozadí.

Pak přidáme rolovací efekty na řádek a sloupec (jako měřítko a otočení), což bude animovat vzor a masku samostatně na pozadí sekce.

navrhněte animované pozadí Divi při posouvání stránky pomocí masek a vzorů

Když skryjeme přetečení sekce, vidíme pouze animaci obsaženou v sekci.

animované pozadí Divi při rolování stránky díky maskám a vzorům

Začněme vytvořením stránky pomocí Divi Builderu

Chcete-li začít, budete muset provést následující:

Z řídicího panelu WordPress přejděte na Stránky> Přidat nové vytvořit novou stránku.

navrhněte animované pozadí Divi při posouvání stránky pomocí masek a vzorů

Dejte tomu název, který vám dává smysl, a klikněte Použijte divi Stavitel

#image_title

poté klikněte na tlačítko Začněte stavět (Sestavte od nuly)

navrhněte animované pozadí Divi při posouvání stránky pomocí masek a vzorů

Poté budete mít prázdné plátno, abyste mohli začít navrhovat v Divi.

Čtěte také: Divi: Jak používat "Gradient Builder" ke zkrášlení vašich obrázků

Jak vytvořit animované rolovací masky na pozadí a vzory pomocí Divi

Návrh pozadí sekce

Nejprve přeskočíme vytváření řádku a skočíme přímo do úpravy stávající výchozí sekce v nástroji pro tvorbu motivů. 

Aby náš design pozadí vyplnil prohlížeč, musíme přidat svislou výšku sekce. Jednoduchý způsob, jak toho dosáhnout, je přidat minimální výšku sekce.

Otevřete nastavení sekce. Pod záložkou Design, aktualizujte minimální výšku a odstraňte vycpávku následovně:

  • Okraj: 80 vh (nahoře a dole)
  • Odsazení: 0px (nahoře a dole)

Návrh přechodu pozadí pro sekci

Nyní můžeme do sekce přidat vlastní gradient pozadí.

Chcete-li přidat první zarážky přechodu, ujistěte se, že jsou pod záložkou otevřena nastavení sekce Obsah. Poté vyberte kartu Přechod na pozadí a kliknutím přidejte nový přechod. Tím se přidají dvě výchozí barvy přechodu. Přidejte následující zarážky přechodu s barvou a polohou následovně:

  • Přechodové zastávky:
    • 0 %: #4158d0
    • 50 %: #c850c0
    • 100 %: #ffcc70

Poté změňte směr lineárního gradientu:

  • Směr gradientu: 270 stupňů

Přidat řádky do sekce

Nyní, když je naše sekce na svém místě, přidejte do sekce řádek s jedním sloupcem. Tento řádek bude použit pro naši animaci posouvání masky pozadí a vzoru.

Dále duplikujte řádek, který jste právě vytvořili. Tento druhý (duplikovaný) řádek bude použit pro naše obsah jak byste normálně dělali. 

Nyní byste měli mít horní řádek pro animaci rolování na pozadí a řádek pro animaci obsah Normální.

Přizpůsobit linku

Nyní, když máme připravený přechod pozadí sekce, můžeme obrátit svou pozornost na čáru, kterou použijeme pro naši animaci pozadí při posouvání. 

Otevřete nastavení linky. Pod záložkou pokročilý, aktualizujte následující:

  • Pozice: Absolutní

To umožní, aby čára překrývala sekci, aniž by zabírala skutečné místo v dokumentu. 

Nyní vše, co musíme udělat, je aktualizovat výšku a šířku tak, aby pokrývaly celou šířku a výšku sekce. Tím vytvoříme překrytí, které potřebujeme, a naši druhou vrstvu návrhu pozadí.

Na kartě Design, aktualizujte možnosti velikosti následovně:

  • Výška sloupců Aquasize: ANO
  • Šířka: 100 %
  • Max. šířka: 100 %
  • Výška: 100 %
  • Odsazení: 0px (nahoře a dole)

Nyní sice čáru nevidíte, ale nyní dokonale pokrývá pozadí celé sekce.

Vytvořte vzor pozadí pro čáru

V tomto příkladu přidáme vzor Konfety jako pozadí čáry.

Otevřete nastavení linky. Pod možností Pozadí, vyberte kartu Vzorek pozadí a aktualizujte následující:

  • Vzor pozadí: konfety
  • Vzor:
    • Barva: #f6bef7
    • Velikost: Vlastní velikost
    • Šířka: 35 vw
    • Opakujte počátek: Střed

Poznámka : Použití jednotky délky VW zajišťuje, že vzor se bude měnit s prohlížečem, přičemž design zůstane konzistentní a citlivý.

Přidat efekty posouvání na řádek

Nyní, když je náš vzor pozadí na svém místě, můžeme na čáru přidat efekty posouvání.

Přejděte na kartu pokročilý. Pod možností Posunujte efekty, aktualizujte následující:

Vyberte kartu Horizontální pohyb a aktualizujte následující:

  • Povolit horizontální pohyb: ANO
  • Počáteční offset: 0,5 (při 0 %)
  • Střední offset: 0 (od 40 % do 60 %)
  • Koncový posun: -0,5 (při 100 %)

Tím se posune vzor pozadí čáry počínaje 50 pixely doleva a končící 50 pixelů doprava.

Vyberte kartu "Zvětšit a snížit" a aktualizujte následující:

  • Povolit zvětšení a zmenšení: ANO
  • Počáteční měřítko: 150 % (při 0 %)
  • Střední měřítko: 100 % (od 40 % do 60 %)
  • Konečné měřítko: 150 % (při 100 %)

Tím se při posouvání změní měřítko vzoru pozadí řádku.

Jak animovat masky a vzory pozadí při posouvání pomocí Divi

Vyberte kartu « Rotující  » a aktualizujte následující:

  • Povolit otáčení: ANO
  • Startovací rotace: 10 stupňů (při 0 %)
  • Střední rotace: 0 stupňů (od 40 % do 60 %)
  • Koncová rotace: -10 stupňů (při 100 %)

KLÍČOVÝ TIP: Musíte udržet rotaci na minimu, jinak riskujete zobrazení mezer tam, kde čára nepřesahuje sekci. Dobrým pravidlem je zvětšit měřítko, pokud chcete zvýšit rotaci. To umožní, aby se čára otáčela přes sekci, aniž by byly odhaleny okraje.

Přidejte do sloupce masku pozadí s efekty posouvání

Jakmile je náš řádek kompletní, jsme připraveni přidat do sloupce stejného řádku masku pozadí s efekty posouvání. Pro začátek přidáme masku pozadí.

Chcete-li to provést, otevřete nastavení sloupce. Pod záložkou Pozadí masky, aktualizujte následující:

  • Maska: Layer Blob
  • Barva: #ffffff
  • Transformace masky: Horizontální převrácení, Inverze

Přidejte do sloupce efekty posouvání

Nyní, když je naše maska ​​pozadí na svém místě, můžeme do sloupce přidat efekty posouvání. Mějte na paměti, že sloupec již má efekty posouvání zděděné z nadřazeného řádku. 

Vše, co uděláme, je otočit sloupec v opačném směru než řádek, abychom dosáhli většího oddělení masky a vzoru po dobu posouvání.

Přejděte na kartu pokročilý. Pod možnostmi Posunujte efekty, vyberte kartu Rotating a aktualizujte následující:

  • Povolit otáčení: ANO
  • Startovací rotace: -15 stupňů (při 0%)
  • Střední rotace: 0 stupňů (od 40 % do 60 %)
  • Koncová rotace: 15 stupňů (při 100 %)

Skrýt přetečení sekce

V současné době zůstává čára viditelná, kdykoli posouvání způsobí, že přesahuje část.

animované pozadí Divi při rolování stránky díky maskám a vzorům

Abychom to vyčistili, musíme skrýt přetečení sekce. Chcete-li to provést, otevřete nastavení sekce. Pod záložkou pokročilý, aktualizujte možnosti viditelnosti následovně:

  • Horizontální přetečení: Skryté
  • Vertikální přetečení: Skryté

Teď to vypadá lépe.

animované pozadí Divi při rolování stránky díky maskám a vzorům

Viz také: Divi: 12 kombinací masek a vzorů pozadí

Přidání obsahu do řádku vytvořeného pro tento účel

V tomto okamžiku je animace posouvání masky pozadí a vzoru dokončena. Jediné, co musíme udělat, je přidat požadovaný obsah do řádku, který jsme pro obsah vytvořili dříve.

V tomto příkladu jsme přidali fiktivní název, abychom viděli, jak bude vypadat animace na pozadí se statickým textem.

navrhněte animované pozadí Divi při posouvání stránky pomocí masek a vzorů

Konečný výsledek

Pojďme se podívat na konečný výsledek našeho návrhu.

animované pozadí Divi při rolování stránky díky maskám a vzorům

Stáhněte si DIVI hned teď!!!

Proč investovat do čističky vzduchu?

Je úžasné, jak snadné je vytvořit tak krásná pozadí s možnostmi pozadí Divi. Navíc přidání animace s efekty posouvání Divi vnáší do těchto návrhů nový život.

Pro jiný vzhled můžete vyzkoušet různé masky a vzory na každé vrstvě. Pokud chcete další inspiraci, jak použít masky a vzory pozadí, podívejte se na tyto 12 kombinací masky a vzoru pozadí

Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.

Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci projektů vytváření internetových stránek.

Neváhejte se také podívat na našeho průvodce na Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

Mezitím sdílejte tento článek na různých sociálních sítích.

...