Wil je een achtergrond ontwerpen? Divi geanimeerd bij het scrollen van de pagina dankzij maskers en patronen? Deze les is voor jou...
Een schuifanimatie toevoegen aan Divi en de achtergrondmaskers en -patronen zijn een handige ontwerptip die uw achtergrondontwerpen nieuw leven kan inblazen. Site web.
In deze zelfstudie laten we u zien hoe u maskers en achtergrondpatronen kunt maken en animeren met behulp van de schuifopties van Divi (geen aangepaste code nodig).
Om dit te doen, maken we een zwevende achtergrondlaag met behulp van een lijn Divi die we zullen gebruiken om maskers en achtergrondpatronen te animeren wanneer een gebruiker door een sectie scrollt inhoud.
We denken dat het resultaat je zal bevallen.
Laten we beginnen!
overzicht
Hier is een korte illustratie van hoe de scroll-animatie op de achtergrond voor deze zelfstudie eruit zal zien.
Het concept
Het concept van dit ontwerp zou niet al te moeilijk te begrijpen moeten zijn. We beginnen met een sectie met een verloopachtergrond.
Vervolgens maken we een lijn die zo is gepositioneerd (absoluut) dat deze de sectie volledig bedekt (zoals een overlay). We kunnen een achtergrondpatroon aan de rij toevoegen.
Vervolgens kunnen we een achtergrondmasker aan de kolom toevoegen.
Dan voegen wij toe scroll-effecten naar rij en kolom (zoals schaal en rotatie) die het patroon en masker afzonderlijk op de achtergrond van de sectie zullen animeren.
Wanneer we de sectieoverloop verbergen, zien we alleen de animatie in de sectie.
Laten we beginnen met het maken van een pagina met Divi Builder
Om te beginnen, moet u het volgende doen:
Ga vanuit het WordPress-dashboard naar Pagina's> Nieuwe toevoegen om een nieuwe pagina te maken.
Geef het een titel die voor jou logisch is en klik op Te gebruiken Divi Bouwer
klik vervolgens op Begin met bouwen (Bouw vanaf het begin)
Daarna heb je een leeg canvas om te beginnen met ontwerpen in Divi.
Lees ook: Divi: Hoe gebruik je de "Gradient Builder" om je afbeeldingen mooier te maken
Geanimeerde scrollende achtergrondmaskers en patronen maken met Divi
Sectie achtergrondontwerp
Eerst slaan we het maken van een regel over en gaan we meteen over tot het bewerken van de bestaande standaardsectie in de themabouwer.
Om ons achtergrondontwerp de browser te laten vullen, moeten we een verticale hoogte aan de sectie toevoegen. Een eenvoudige manier om dit te doen is door een minimale hoogte toe te voegen aan de sectie.
Sectie-instellingen openen. Onder het tabblad Design, werk de minimale hoogte bij en verwijder de opvulling als volgt:
- Marge: 80 vh (boven en onder)
- Vulling: 0px (boven en onder)
Een achtergrondverloop voor de sectie ontwerpen
We kunnen nu een aangepast achtergrondverloop aan de sectie toevoegen.
Als u de eerste verloopstops wilt toevoegen, moet u ervoor zorgen dat de sectie-instellingen onder het tabblad zijn geopend Content. Selecteer vervolgens het tabblad Achtergrond verloop en klik om een nieuw verloop toe te voegen. Hiermee worden twee standaard verloopkleuren toegevoegd. Voeg de volgende verloopstops met kleur en positie als volgt toe:
- Gradiëntstops:
- 0%: #4158d0
- 50%: #c850c0
- 100%: #ffcc70
Verander vervolgens de richting van de lineaire gradiënt:
- Gradiëntrichting: 270 graden
Voeg rijen toe aan sectie
Nu onze sectie op zijn plaats staat, voegt u een rij met één kolom toe aan de sectie. Deze regel wordt gebruikt voor onze achtergrondmasker- en patroonscroll-animatie.
Dupliceer vervolgens de regel die u zojuist hebt gemaakt. Deze tweede (gedupliceerde) regel wordt gebruikt voor onze inhoud zoals je normaal zou doen.
Je zou nu een bovenste regel moeten hebben voor de achtergrondscrollanimatie en een regel voor de inhoud Normaal.
Lijn aanpassen
Nu we het achtergrondverloop van onze sectie klaar hebben, kunnen we onze aandacht richten op de lijn die we gaan gebruiken voor onze achtergrond-op-scroll-animatie.
Lijninstellingen openen. Onder het tabblad Geavanceerd, werk het volgende bij:
- Positie: Absoluut
Hierdoor kan de lijn de sectie overlappen zonder echte ruimte in het document in te nemen.
Nu hoeven we alleen nog maar de hoogte en breedte bij te werken zodat ze de volledige breedte en hoogte van de sectie beslaan. Dit zal de overlay creëren die we nodig hebben en onze tweede achtergrondontwerplaag.
Onder het tabblad Design, werk de formaatopties als volgt bij:
- Aquasize kolomhoogten: JA
- Breedte: 100%
- Maximale breedte: 100%
- Hoogte: 100%
- Vulling: 0px (boven en onder)
Nu kun je de lijn misschien niet zien, maar hij bedekt nu perfect de achtergrond van de hele sectie.
Maak een achtergrondpatroon voor de lijn
In dit voorbeeld voegen we het patroon toe Confetti als lijnachtergrond.
Lijninstellingen openen. Onder de optie Achtergrond, selecteer het tabblad Achtergrondpatroon en update het volgende:
- Achtergrondpatroon: Confetti
- Patroon :
- Kleur: #f6bef7
- Maat: Aangepast formaat
- Breedte: 35 vw
- Herhaling Oorsprong: midden
NOTE : Het gebruik van de VW-lengte-eenheid zorgt ervoor dat het patroon meeschaalt met de browser, waardoor het ontwerp consistent en responsief blijft.
Scrolleffecten toevoegen aan lijn
Nu ons achtergrondpatroon op zijn plaats is, kunnen we scroll-effecten aan de lijn toevoegen.
Ga naar het tabblad Geavanceerd. Onder de optie Scroll effecten, werk het volgende bij:
Selecteer het tabblad Horizontale beweging en update het volgende:
- Horizontale beweging inschakelen: JA
- Startoffset: 0,5 (bij 0%)
- Midden offset: 0 (van 40% tot 60%)
- Offset beëindigen: -0,5 (bij 100%)
Hierdoor wordt het lijnachtergrondpatroon verplaatst, beginnend 50 pixels naar links en eindigend 50 pixels naar rechts.
Selecteer het tabblad "Omhoog en omlaag schalen" en werk het volgende bij:
- Omhoog en omlaag schalen inschakelen: JA
- Startschaal: 150% (bij 0%)
- Middenschaal: 100% (van 40% tot 60%)
- Eindschaal: 150% (bij 100%)
Hierdoor wordt het achtergrondpatroon van de rij geschaald tijdens het scrollen.
Selecteer het tabblad « Roterende » en update het volgende:
- Draaien inschakelen: JA
- Startrotatie: 10 graden (bij 0%)
- Middenrotatie: 0 graden (van 40% tot 60%)
- Rotatie beëindigen: -10 graden (bij 100%)
BELANGRIJKSTE TIP: U moet de rotatie tot een minimum beperken, anders loopt u het risico gaten te vertonen waar de lijn niet verder reikt dan de sectie. Een goede vuistregel is om de schaal te vergroten als u de rotatie wilt vergroten. Hierdoor kan de lijn over de sectie draaien zonder de randen bloot te leggen.
Voeg een achtergrondmasker met schuifeffecten toe aan de kolom
Zodra onze rij compleet is, zijn we klaar om een achtergrondmasker met schuifeffecten toe te voegen aan de kolom van dezelfde rij. Laten we om te beginnen een achtergrondmasker toevoegen.
Open hiervoor de kolominstelling. Onder het tabblad Achtergrondmasker, werk het volgende bij:
- Masker: laagblob
- Kleur: #ffffff
- Maskertransformatie: horizontaal spiegelen, inversie
Voeg scroll-effecten toe aan de kolom
Nu ons achtergrondmasker op zijn plaats zit, kunnen we schuifeffecten aan de kolom toevoegen. Houd er rekening mee dat de kolom al scroleffecten heeft die zijn overgenomen van de bovenliggende rij.
Het enige dat we gaan doen, is de kolom in de tegenovergestelde richting van de rij draaien om meer scheiding van het masker en het patroon te bereiken voor de duur van de scroll.
Ga naar het tabblad Geavanceerd. Onder opties Scroll effecten, selecteer het tabblad Rotatieng en werk het volgende bij:
- Draaien inschakelen: JA
- Startrotatie: -15 graden (bij 0%)
- Middenrotatie: 0 graden (van 40% tot 60%)
- Rotatie beëindigen: 15 graden (bij 100%)
Sectie-overloop verbergen
Momenteel blijft de lijn zichtbaar wanneer deze door scrollen buiten de sectie uitsteekt.
Om dit op te ruimen, moeten we de sectieoverloop verbergen. Open hiervoor de sectie-instellingen. Onder het tabblad Geavanceerd, werk de zichtbaarheidsopties als volgt bij:
- Horizontale overloop: verborgen
- Verticale overloop: verborgen
Nu ziet het er beter uit.
Zie ook: Divi: 12 combinaties van maskers en achtergrondpatronen
Inhoud toevoegen aan de regel die voor dit doel is gemaakt
Op dit punt zijn het achtergrondmasker en de patroonscrollanimatie voltooid. Het enige wat we hoeven te doen is de gewenste inhoud toevoegen aan de regel die we eerder voor de inhoud hebben gemaakt.
Voor dit voorbeeld hebben we een dummy-titel toegevoegd, zodat we kunnen zien hoe de achtergrondanimatie eruit zal zien met statische tekst.
Eindresultaat
Laten we eens kijken naar het eindresultaat van ons ontwerp.
Download DIVI nu!!!
Conclusie
Het is verbazingwekkend hoe gemakkelijk het is om zulke mooie achtergronden te creëren met de achtergrondopties van Divi. Bovendien brengt het toevoegen van animatie met Divi's scroll-effecten deze ontwerpen nieuw leven in.
Voor een andere look kun je verschillende maskers en patronen op elke laag proberen. Als je meer inspiratie wilt over het gebruik van de maskers en patronen achtergrond, bekijk deze 12 combinaties van achtergrondmasker en patroon
We hopen dat deze tutorial je zal inspireren voor je volgende Divi-projecten. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.
U kunt ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren.
Aarzel niet om ook onze gids te raadplegen over de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
