class adder webpagina

Maak het levendig

28
Jun
2020
update-
Leestijd is: leestijd

Waar gaat deze blog over?

Animaties op je website

Wie de inhoud van zijn website interessanter en/of aantrekkelijker wil maken voor zijn bezoekers kan binnen Webflow gebruik maken van interacties.

Foto’s of teksten die in beeld schuiven als de pagina geladen wordt, of effecten die bij hover (muis over een element) duidelijk maken dat het hier om een link gaat.

Deze effecten zijn mogelijk door gebruik te maken van javascript en/of CSS.

Standaard kun je nu in Webflow gebruik maken van de volgende triggers.

Element trigger.

Als je de muis over het scherm beweegt en je ‘raakt’ bijvoorbeeld een foto dan kun je deze laten bewegen of laten vervagen, of iets anders. Dus als je de muis beweegt en je ‘raakt’ iets, gebeurt er wat met dat element op het scherm.

Pagina trigger.

Als de pagina geladen wordt, klaar is met laden of als de pagina naar beneden of naar boven gescrold wordt, gebeurt er iets op het scherm. Foto’s bewegen, tekst wordt zichtbaar etc.

Je kunt hier hele mooie, maar ook heel irritante dingen meedoen. Wie herinnert zich niet de knipperende knoppen om de aandacht te trekken? Actie om de actie zelf.

Toch code schrijven?

Hoe wel je met deze standaard instellingen al heel veel dingen kunt doen, zijn er toch beperkingen. Zo kun je bijvoorbeeld de .class die aan een element is toegekend niet omwisselen voor een andere .class of deze verwijderen/toevoegen als de muis dit element op het scherm ‘raakt’. Of als de pagina geladen wordt, geladen is of als je deze scrolt.  

Kan dit dan helemaal niet? Jawel, maar dan moet je gebruikmaken van javascript. Moet je code schrijven en dat is nu juist iets wat binnen Webflow niet hoeft. Maar wat als je dingen wilt doen die niet standaard binnen Webflow kunnen? Hoe brei je dat dan rond? Moet je nu toch code gaan leren?

Class Adder.

Nee, nu is er Class Adder. Op een aparte webpagina kun je nu, net als binnen Webflow, in een overzichtelijk invulvenster aangeven wat je wilt dat er gaat gebeuren op het scherm. Deze app schrijft dan de code die je vervolgens knipt en plakt in je Webflow webpagina.

Wil je dus elementen op je Webflow pagina beïnvloeden door een .class toe te voegen of juist te verwijderen, of beide, dan is dit de tool. Net als binnen Webflow schrijf je geen code, maar geef je aan wat je wilt dat er gebeurt en het programma genereert de noodzakelijk code.

Wil je als ‘no-coder’ dus dit soort dingen doen binnen Webflow dan kan dat met Class Adder.

FAQ

Blog overzicht