Vandaag werden we geïnformeerd over een nieuwe update op Divi die zogenaamde scroll-animatie-effecten biedt. We hebben het bekeken en in deze tutorial vatten we samen wat je mag verwachten.
Laten we beginnen.
Wat zijn de schuifeffecten?
Scroll-effecten zijn aanpasbare animaties die op je reageren bezoekers terwijl ze op en neer scrollen over de pagina. In tegenstelling tot traditionele animaties zijn scrolleffecten rechtstreeks gerelateerd aan het scrollgedrag van uw computer bezoeker. De snelheid en richting van de animatie zijn gebaseerd op de snelheid en richting van het scrollen van de animatie bezoeker. De animatietijdlijn is gebaseerd op de positie van het element in het browservenster.
Het klinkt ingewikkeld, maar met Divi, het is vrij eenvoudig
Elk element kan worden geanimeerd met behulp van een combinatie van schaal, rotatie, horizontale en verticale beweging, dekking en vervagingseffecten. Je bepaalt dan de omvang van elk effect op verschillende punten in de animatie Divi zorgt voor de rest en creëert prachtige overgangen wanneer deze elementen binnenkomen en binnen uw zicht bewegen. bezoeker. Maak eenvoudige animaties die subtiele diepte en verfijning toevoegen, of combineer effecten en animeer meerdere elementen om spectaculaire uitbarstingen van activiteit te creëren waar u versteld van zult staan. bezoekers!
6 nieuwe zes unieke effecten
Effecten beschikbaar om uit te kiezen of in combinaties. Divi wordt geleverd met zes verschillende scrolleffecten, die elk afzonderlijk kunnen worden aangepast met behulp van onze nieuwe gebruikersinterface voor scrolleffecten. U kunt ook elk van de effecten combineren om complexere animaties te maken.
Verticale beweging
Door het verticale bewegingseffect kan elk element op en neer over de pagina bewegen op basis van de scrolsnelheid en -richting van een bezoeker. Het resultaat is een parallax-effect! Nu kan alles worden gebruikt om parallax-effecten te creëren met Divi. U kunt zelfs verticale beweging combineren met parallax-achtergrondafbeeldingen om een aantal werkelijk indrukwekkende ontwerpen te maken.
Horizontale beweging
Het horizontale bewegingseffect is vergelijkbaar met het verticale bewegingseffect, behalve dat items hierdoor van links naar rechts op het scherm kunnen worden verplaatst, afhankelijk van de richting en scrolsnelheid van een bezoeker. . U kunt zelfs verticale en horizontale bewegingen combineren, waardoor u volledige controle heeft over de beweging van elk element!
Contextuele vervaging
Het vervagingseffect zorgt ervoor dat elementen in en onscherp worden, afhankelijk van de snelheid en richting waarin een bezoeker scrolt. Aangezien u met Divi de waarden voor begin, midden en einde van vervaging kunt bepalen, kunt u items scherpstellen op het moment dat ze voor de ogen van de bezoeker staan. Het is een geweldige manier om de aandacht te vestigen op belangrijke informatie.
gesmolten
Het fade-effect met elementen verdwijnt in en uit op basis van de snelheid en richting van de scroll van een bezoeker. U kunt elementen mengen, ze laten verdwijnen of beide. De combinatie van vervagen, vervagen en schalen kan een aantal zeer geavanceerde animaties creëren die een extra "it" -factor aan uw ontwerpen toevoegen.
Schaaleffect
Het schaaleffect vergroot of verkleint de grootte van elk item, afhankelijk van de snelheid en richting van de scroll van een bezoeker. Als u de aandacht wilt vestigen op een bepaald element, zoals een oproep tot actie, kunt u het schaaleffect instellen om de grootte van het element te vergroten naarmate het dichter bij het midden van het frame komt. raam. Uiteraard zijn er ook tal van andere mogelijkheden!
Rotatie effect
Het rotatie-effect met roteert een item in beide richtingen op basis van de scrolsnelheid en -richting van een bezoeker. Subtiele rotatie kan scènes echt tot leven brengen. Een beetje ronddraaien in combinatie met horizontale beweging kan er geweldig uitzien! Of laat de elementen in cirkels ronddraaien.
Een nieuwe intuïtieve interface
De echte schoonheid van Divi's scroll-effecten is hun gebruiksgemak! Er is een nieuwe gebruikersinterface die het proces van het maken van webanimaties vereenvoudigt, zodat ze voor iedereen toegankelijk zijn. Met slechts één klik kunt u een van de zes scrolleffecten van Divi toevoegen of combineren. Ze zien er direct uit de verpakking geweldig uit! Vervolgens kunt u de effecten verfijnen om nog geavanceerdere animaties te maken.
Een klik en dat is alles!
Wilt u een scrolleffect aan een module toevoegen? Eén klik voegt het effect toe en het ziet er ook nog eens geweldig uit! Om een scrolleffect toe te voegen, opent u eenvoudig de nieuwe optiegroep Scrolleffecten op het tabblad Geavanceerd van een module, rij, kolom of sectie. Meerdere effecten kunnen tegelijkertijd worden geactiveerd en de effecten worden gecombineerd tot één vloeiende animatie die prachtig transformeert terwijl u scrolt.
Wilt u volledige controle? je hebt het !
Als je eenmaal een scrolleffect hebt ingeschakeld, heb je volledige controle over de grootte van het effect op elk punt in de animatie. Door de begin-, midden- en eindwaarden te regelen, bepaalt u wat doet animatie. Zodra de waarden zijn ingesteld, zorgt Divi voor de rest en zal het element overgaan terwijl het door het browservenster beweegt, waardoor een animatie wordt gemaakt.
- Startwaarde - De status van de startanimatie die wordt gebruikt wanneer het element onder in het browservenster binnenkomt.
- Tussenwaarde - De tussenliggende animatiestatus die wordt overgedragen wanneer het element naar het midden van het venster beweegt.
- Eindwaarde - De einde-animatiestatus die optreedt wanneer het item het browservenster boven aan het scherm verlaat.
Een ondoorzichtigheidseffect met een beginwaarde van 0 (onzichtbaar), een mediaanwaarde van 100 (volledig zichtbaar) en een eindwaarde van 0 (onzichtbaar) verandert bijvoorbeeld van een onzichtbare toestand wanneer het raam totdat het 100% zichtbaar wordt in het midden van het raam, dan verdwijnt het in een onzichtbare staat bij het verlaten van het raam.
De animatietijdlijn aanpassen
U kunt niet alleen de animatiewaarden aanpassen, maar u kunt ook de animatietijdlijn aanpassen. De gebruikersinterface van de tijdlijn vertegenwoordigt de hoogte van het browservenster. Elk animatiehoofdframe kan op een andere positie in de viewport worden geactiveerd. Hiermee kunt u het begin, het einde en de timing van de animatie-animatie bepalen op basis van de locatie van het geanimeerde element in de y-as van het browservenster.
- Hoofdframe-positie starten - Deze optie bepaalt het begin van de animatie. Als u de animatie wilt vertragen, sleept u de positie van het starthoofdframe naar binnen.
- Centrale keyframe-positie - Dit bepaalt het punt waarop de animatie de middelste animatiewaarde bereikt. Het hoeft niet precies in het midden van de animatietijdlijn te staan. U kunt het middelste hoofdframe naar elke positie in het venster verplaatsen.
- Einde van sleutelframepositie - Dit besturingselement wordt gebruikt om de animatie te beëindigen. Als u wilt dat de animatie stopt voordat de clip het browservenster verlaat, kunt u de eindpositie van het keyframe naar binnen slepen.
Voeg statische toestanden toe aan elke animatie
U kunt ook pauzes aan uw animaties toevoegen door de duur van uw statische middeneffectwaarde te verlengen. Om een statische animatieduur te maken, klikt u op de twee pijlen wanneer u de muisaanwijzer over het middelste hoofdframe beweegt. U kunt vervolgens het middelste hoofdframe verlengen door de randen heen en weer te slepen. Tijdens dit punt in de animatie blijft het element statisch. Nadat de statische duur is afgelopen, gaat de animatie verder met de overgang naar de uiteindelijke waarde.
Wat vind je van deze nieuwe features? Aarzel niet om uw mening te geven in de commentaren.
