Pokud hledáte způsob, jak vytvořit plynulé animace s integrovanými rolovacími efekty Divi, bude se vám tento výukový program líbit. Ukážeme vám, jak zkombinovat posuvný krok s vestavěnými pohybovými efekty Divi a vytvořit úseky plné výšky, kterými můžete procházet najednou.
Začneme vytvořením první sekce. Proto budeme tuto část znovu používat v celém designu naší stránky. Chcete-li povolit přichycení posouvání, použijeme vlastnosti přichycení CSS, které přiřadíme sekcím, HTML, záhlaví a zápatí naší stránky.
Možný výsledek
Než se ponoříme do tutoriálu, pojďme se rychle podívat na výsledek na různých velikostech obrazovky.
1. Vytvořte novou stránku a začněte navrhovat první sekci
Přidejte novou stránku a přepněte do aplikace Visual Builder
Začněte přidáním nové stránky. Zadejte název stránky, publikujte stránku a přepněte na Visual Builder.
Nastavení sekce
dimenzování
Jakmile jste na nové stránce, otevřete sekci, která již existuje, a změňte nastavení velikosti.
- Min. Výška: 100 h
Hlavní prvek
Do sekce také přidáme dva řádky kódu CSS. Tyto řádky kódu CSS nám pomohou proměnit sekci na bod přichycení pro rolování.
scroll-snap-zarovnání: start; scroll-snap-stop: normální;
viditelnost
Abychom se ujistili, že nic není za kontejnerem sekce, skryjeme přetečení sekce.
- Horizontální přetečení: skryté
- Vertikální přetečení: skryté
Přidat řádek # 1
Struktura sloupců
Pokračujte v přidávání nového řádku do sekce pomocí následující struktury sloupců:
dimenzování
Bez přidání dalších modulů otevřete nastavení řádku a upravte velikost podle následujících pokynů:
- Použít vlastní šířku okapu: Ano
- Šířka okapu: 1
- Šířka: 100%
- Maximální šířka: 100%
Vzdálenost
Odstraňujeme také výchozí horní a dolní výplň sekce.
- Horní výplň: 0px
- Spodní výplň: 0px
Pozice
A podle toho přemístíme řádek:
- Pozice: Absolutní
- Umístění: Spodní centrum
Přidat textový modul do sloupce
Ponechte obsahové pole prázdné
Jediný modul, který v tomto řádku potřebujeme, je textový modul. Nezapomeňte ponechat obsahové pole modulu prázdné.
Barva pozadí
Poté změňte barvu pozadí.
- Barva pozadí: # ffee00
Nastavení textu
Také odstraníme výšku textového řádku modulu.
- Výška řádku textu: 1m
Rozměry
Poté přejdeme k nastavení velikosti a změníme šířku.
- Šířka: 30%
Vzdálenost
Proměníme modul na čtverec přidáním nějakého horního čalounění.
- Horní výplň: 30%
Přidejte řádek č. 2
Struktura sloupce
Na dalším řádku. Použijte následující strukturu sloupců:
dimenzování
Bez přidání jakýchkoli modulů ještě otevřete nastavení řádku a změňte nastavení velikosti na kartě design:
- Použít vlastní šířku okapu: Ano
- Šířka okapu: 1
- Šířka: 60 Vw
- Maximální šířka: 100%
vzdálenost
Poté přidejte vlastní horní okraj na různé velikosti obrazovky.
- Horní okraj: 20vh (stolní), 5vw (tablet a telefon)
Mezera ve sloupci 2
Poté otevřeme nastavení ve sloupci 2 a přidáme vlastní hodnoty výplně.
- Horní výplň: 2vh (tablet a telefon)
- Výplň vlevo: 2 Vw
- Pravá výplň: 2vw
Přidejte modul obrázku do sloupce 1
Nahrát obrázek
Je čas přidat mody, přidat mod do obrázku do sloupce 1 a nahrát obrázek podle vašeho výběru.
dimenzování
Potom vynucíme celou šířku modulu.
- Vynutit plnou šířku: Ano
Do sloupce 1 přidejte textový modul # 2
Přidat obsah H2
Ve druhém sloupci je prvním modulem, který potřebujeme, textový modul obsah H2.
Nastavení textu H2
Přejděte na kartu Návrh modulu a změňte nastavení textu H2 následujícím způsobem:
- Nadpis 2 Písmo: Anton
- Položka 2 Velikost textu: 5vw (stolní), 7vw (tablet), 9vw (telefon)
Do sloupce 2 přidejte textový modul # 2
Přidat obsah
Přidejte další textový modul těsně pod ten předchozí a vložte obsah popis dle vašeho výběru.
Nastavení textu
Změňte nastavení textu modulu následujícím způsobem:
- Textové písmo: Otevřít Sans
- Velikost textu: 0.8vw (stolní), 2vw (tablet), 2.5vw (telefon)
- Výška textového řádku: 1,8 em
vzdálenost
A přidejte do nastavení mezer vlastní horní a dolní okraj.
- Horní okraj: 2vw
- Dolní okraj: 2vw
Přidejte sloupcový modul do sloupce 2
Přidat kopii
Další a poslední modul, který v tomto sloupci potřebujeme, je tlačítkový modul. Přidejte kopii podle vašeho výběru.
Nastavení tlačítek
Podle toho upravte styl tlačítka:
- Pro tlačítko použijte vlastní styly: Ano
- Velikost textu tlačítka: 1vw (stolní), 2vw (tablet), 3vw (telefon)
- Barva textu tlačítka: # 333333
- Barva ohraničení tlačítka: # 333333
- Poloměr tlačítka: 1px
- Tlačítko Písmo: Anton
- Styl písma tlačítka: Velká písmena
vzdálenost
A dokončete nastavení modulu přidáním vlastní hodnoty založené na velikostech obrazovky.
- Vysoká interní marže: 1vw (stolní), 2vw (tablet), 3vw (telefon)
- Nízká vnitřní marže: 1vw (stolní), 2vw (tablet), 3vw (telefon)
- Levá vnitřní marže: 3vw (stolní), 5vw (tablet), 7vw (telefon)
- Pravý internetový okraj: 3vw (stolní), 5vw (tablet), 7vw (telefon)
2. Přidejte efekty posunu k různým prvkům
Textový modul v řádku # 1
Vertikální animace
Jakmile jsou všechny prvky na svém místě, je čas přidat efekty posouvání. Otevřete textový modul v prvním řádku a použijte nějaký vertikální pohyb.
- Povolit vertikální pohyb: Ano
- Počáteční ofset: 4
- Střední posun: 0
- Ukončení posunu: -4
- Spouštěč pohybových efektů: Uprostřed prvku
Řádek # 2
Sloupec 1
Horizontální animace
Poté otevřete první sloupec druhého řádku a přidejte vodorovný pohyb.
- Aktivujte horizontální pohyb: Ano
- Počáteční posun: -3
- Průměrný ofset: 0 (od 40% do 60%)
- Koncový offset: -3
- Efekt spouštěcího pohybu: střed prvku
Zmizet a odejít
Na stejný sloupec také aplikujeme efekt fade-in a fade-out.
- Aktivace a vyblednutí: Ano
- Počáteční krytí: 0%
- Průměrná neprůhlednost: 100%
- Koncová krytí: 100%
- Efekt spouštěcího pohybu: střed prvku
Sloupec 2
Horizontální pohyb
Poté otevřeme parametry druhého sloupce a použijeme následující parametry horizontálního pohybu:
- Aktivujte horizontální pohyb: Ano
- Počáteční posun: 3
- Průměrný ofset: 0 (od 40% do 60%)
- Koncový offset: 3
- Efekt spouštěcího pohybu: střed prvku
Zmizet a odejít
S příchozím a odchozím efektem fade.
- Aktivace a vyblednutí: Ano
- Počáteční krytí: 0%
- Průměrná neprůhlednost: 100%
- Koncová krytí: 100%
- Efekt spouštěcího pohybu: střed prvku
4. Znovu použijte první část
Klonovat sekci čtyřikrát
Jakmile dokončíte první část a její rolovací efekty, můžete ji klonovat, kolikrát chcete.
Změňte barvy pozadí všech ostatních sekcí
Změníme barvu pozadí všech ostatních částí.
- Barva pozadí: # 111111
5. Přidejte kód CSS, abyste povolili snímání posouvání na stránce HTML
Přidejte modul kódu do poslední části stránky
Nyní, abychom umožnili posouvání záznamu na HTML naší stránky, přidáme modul kódu kdekoli v poslední části naší stránky.
Vložte HTML CSS kód
Tyto řádky kódu CSS nám pomohou použít zarovnání posouvání na kód HTML naší stránky:
<style> html {overflow-x: hidden;scroll-snap-type: y mandatory;scroll-snap-points-y: repeat(100vh);} </style>
Přidejte Posun Snapping Start do záhlaví a zápatí
Zajistíme, aby naše záhlaví a zápatí byly také posouváním bodů zachycení (stejně jako naše sekce) přidáním následujících řádků kódu CSS:
záhlaví, zápatí {scroll-snap-zarovnat: start;}
finskému
V tomto článku jsme vám ukázali, jak vytvořit plynulé animace kombinací rolovaného snapu s vestavěnými pohybovými efekty Divi. Je to skvělý způsob, jak aktivovat efekty posouvání pomocí jediného posouvání.
Snímání posouvání pomáhá Návštěvníci abyste mohli bez námahy procházet různé části svého Webové stránky. Zkombinovali jsme to s designem sekce v plné výšce. Také jste si mohli zdarma stáhnout soubor JSON! Pokud máte nějaké dotazy nebo návrhy, neváhejte zanechat komentář v sekci komentářů níže.
