Wie houdt er niet van animaties? Animatie speelt een grote rol bij het ontwerpen van websites. Vandaag leren we hoe we vormen kunnen maken met CSS en hoe we er animatie-effecten aan kunnen toevoegen. Vroeger gebruikten we HTML-oplossingen zoals Canvas of SVG om dergelijke aangepaste animaties aan de website toe te voegen, maar vandaag zullen we zien hoe het mogelijk is om zo'n visueel paradigma te ontwerpen met Divi met behulp van aangepaste CSS.
Eerst zullen we leren hoe we een aangepaste vorm kunnen maken met behulp van CSS en vervolgens een uniek scroll-effect kunnen bieden. We zullen het hele ding doen met behulp van de ingebouwde functies van Divi . Dus laten we beginnen.
Voorbeeld
Ons uiteindelijke ontwerp zal er zo uitzien.
Geanimeerde aangepaste vormen met CSS
Toevoegen: rij aan de eerste sectie
Eerst zullen we de gemarkeerde rijstructuur van de afbeelding toevoegen aan het hoofdgedeelte van de pagina.
Maak geweldige websites
Met de beste gratis paginabuilder Elementor
Begin nu
Breng nu enkele wijzigingen aan in de rij-instellingen van het tabblad Ontwerp.
- Aangepaste gootbreedte gebruiken: Ja
- Gootbreedte: 1
- Kolomhoogten gelijkmaken: JA
- Breedte: 95%
- Maximale breedte: 900px
Toevoegen: Verdeelmodule
We zullen een scheidingsmodule voor spatiëring toevoegen in de kolom die de CSS-vormen zal bevatten.
Open nu de instellingen van de scheidingslijn en breng de volgende wijzigingen aan.
- Show Divider: NEE
- Hoogte: 150px
Omdat de positiewaarde van onze vormen - absoluut zal zijn, kunnen we de afstand van de kolom aanpassen door de hoogte van de scheidingslijn aan te passen. Zo kun je de divider ook als designelement naar eigen wens inrichten.
CSS-vorm nr. 1
Nu gaan we CSS-vormen maken met behulp van de scheidingsmodule. Ik zal de omgevingsrand van de scheidingsmodule gebruiken om vormen te maken, niet de module, om later andere modules zoals tekst- of codemodule te gebruiken. Kloon nu de vorige scheidingsmodule.
Bewerk nu zoals hieronder aangegeven.
- Breedte: 0px
- Hoogte: 0px
Randopties
Nu gaan we een driehoek maken die naar rechtsboven wijst. Maak aanpassingen aan de scheidingsrand om dit ontwerp te maken. Label de gedupliceerde scheidingslijn als - Vorm 1. Dit is handig voor toekomstige identificatie.
- Randkleur: rgba (28,160,96,0.5)
- Breedte bovenste rand: 150px
- Breedte linkerrand: 150px
- Kleur linkerrand: transparant
Omdat we later scrollanimaties aan onze ontwerpen zullen toevoegen, moet de positiewaarde absoluut zijn in deze vorm en in de vormen die we zullen maken, omdat de elementen de juiste volgorde moeten blijven. Onthoud - alle vormen hebben hetzelfde startpunt. Wijzig hiervoor de volgende waarden.
- Positie: Absoluut
- Positie Locatie: Rechtsboven (standaard)
We hebben zojuist onze eerste CSS-driehoek gemaakt. Laten we nu verder gaan.
CSS-vorm nr. 2
Nu gaan we nog een identieke driehoek maken door onze Divider-module met de naam Shape 1 te klonen en deze te labelen als Shape 2.
Scroll animatie
Open nu de instellingen voor vorm 2 en breng deze wijzigingen aan.
- Scroll-transformatie-effecten: roteren
- Draaien inschakelen: JA
- Startrotatie: 0° (bij 30%)
- Middenrotatie: 45° (bij 45%)
- Eindrotatie: 90° (bij 60%)
CSS-vorm nr. 3
Dupliceer deze keer de vorm 2 en label de gedupliceerde scheidingslijn als Vorm 3.
Scroll animatie
Wijzig vervolgens de transformatierotatiewaarden.
- Middenrotatie: 90°
- Eindrotatie: 180°
CSS-vorm nr. 4
Dupliceer nogmaals de vorige module en noem deze "Shape 4".
Scroll animatie
Wijzig vervolgens de transformatierotatiewaarden.
- Middenrotatie: 180°
- Eindrotatie: 270°
Scroll animatie testen
Om nu de scroll-animatie te testen, moet u een tijdelijke marge boven en onder de scheidingslijn toevoegen.
- Marge: 80vh boven, 80vh onder
Een titel toevoegen
Het hebben van een geanimeerde titel met zo'n ontwerp op een webpagina is best goed. Dus we zullen er nu een titel aan toevoegen. Daarvoor zullen we enkele CSS-codes toevoegen in het hoofdelementgedeelte van het tabblad Geavanceerd van kolom 2 (waar de titel zal zijn) zodat onze titel verticaal gecentreerd blijft.
display:flex;
flex-direction:column;
align-items:center;
Voeg nu een tekstmodule toe aan deze kolom 2 en voeg hier een H2-kop aan toe.
Wijzig nu vanaf het ontwerptabblad de volgende instellingen.
- Kop 2 Lettertype: Poppins
- Kop 2 Tekstuitlijning: standaard (desktop), midden (tablet en telefoon)
- Kop 2 Tekstgrootte: 55px (desktop), 45px (tablet), 35px (telefoon)
- Breedte: 100%
Nu zullen we een scroll-effect aan deze tekst toevoegen.
- Scroll-transformatie-effecten: horizontale beweging
- Horizontale beweging inschakelen: JA
- Startoffset: 2 (bij 20%)
- Mid-offset: 1 (tegen 35%)
- Eindverschuiving: Desktop -0,6 (bij 50%), tablet en telefoon 0 (bij 50%)
Verkennen vanuit een andere hoek
Nu we klaar zijn met ontwerpen, kunnen we nu verschillende vormen verkennen voor het ontwerp van de topdriehoek. Om dit te doen, houdt u de opdracht (voor mac) en controle (voor Windows) ingedrukt en selecteert u alle 4 vormen en klikt u op instellingen van elke vorm. Dit opent gecombineerde instellingen voor al deze vormen. En kijk welk ontwerp je het leukst vindt.
Eindbeeld
Al ons werk is gedaan, nu gaan we kijken hoeveel soorten ontwerpen we aan onze website kunnen toevoegen.
Conclusie
Mensen die een nieuwe dimensie aan hun webdesign willen geven, zullen altijd op zoek zijn naar iets uitzonderlijks zoals dit soort design. Aangepaste CSS-vorm met geanimeerd scrollen zal zeker de schoonheid van uw project vergroten. Deze zijn heel eenvoudig te ontwerpen met Divi , en er zijn geen extra plug-ins voor nodig omdat alle functies ingebouwd zijn. Ik hoop dat je de tutorial van vandaag leuk zult vinden, want het geeft je een goed idee over CSS Shape-animatie. We zullen blij zijn met je mening over het artikel van vandaag, en als je dit leuk vindt, zal een deel ervan verbluffend zijn.
