Animationer

Hvis der er noget custom CSS eller JavaScript, så ligger det over sektionen i et html element.

Husk at rykke alt custom CSS ud til Customize > Custom CSS hvis det bliver brugt.

Husk at rykke alt custom JavaScript ud i Elementor > Custom code hvis det bliver brugt.

Delay klasser

Delay klasserne kan tilføjes på alle animationer der har en transition, for at udskyde animationen. Bruges typisk til at stagger animationer.

.delay-100

.delay-200

.delay-300

.delay-400

.delay-500

.delay-600

.delay-700

.delay-800

.delay-900

.delay-1000

.ab-fadeUp-atf

ab-reveal-atf tilføjes til animationer der skal ske above the fold, da den ikke bruger JavaScript, og derfor er bedre for page speed

.ab-fadeUp-atf

.ab-fadeUp-atf + .delay-100ms

.ab-fadeUp

ab-fadeUp effekten tilføjer en fade up effekt.

.ab-fadeUp

.ab-fadeUp + .delay-100ms

.ab-img-zoomOut

ab-img-zoomOut effekten tilføjer en langsom zoom out effekt når billedet kommer ind i view.

.ab-img-expand

ab-img-expand effekten tilføjer en expand effekt til højre eller venstre når billedet kommer ind i view. Hvis billedet er self-aligned til venstre, expander den mod højre, og modsat.

.ab-img-hoverZoom

ab-img-hoverZoom effekten tilføjer en zoom effekt når billedet bliver hoveret over.

.ab-img-paralax

ab-img-paralax effekten tilføjer en langsom paralax effekt når man scroller forbi billedet.

.ab-staggered-menu

ab-staggered-menu tilføjer en staggered hover effekt på alle navigationspunkter.
OBS: Det er ikke muligt at bruge denne effekt, hvis man har et dropdown menupunkt…

Transition overlay (kun forside)

Transition overlayet laver en entry animation på startsiden af hjemmesiden, når man åbner den.
CSS’en ligges ind i Custom CSS, og JavaScripten ligges ind i child temaet, sådan at vi kan undlade den i WPRocket.

.ab-fill-hover

.ab-fill-hover laver en animation der skaber et overlay over det valgte content, som starter det fra hvorend musen starter

.ab-staggered-section

.ab-staggered-section laver en animation der skjuler sektionen under den næst sektion.

Lorem ipsum

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, at albucius suscipiantur sit, errem conceptam vix et. Mea mutat copiosae eu, vero errem vis eu. His ad omnes hendrerit, cum cu eius audire intellegat, saepe interpretaris id quo. Est populo discere dolorem ut, duo saperet reprimique at. Viris aliquam vis at, cu duo alii graeci contentiones, ei dicat postulant sententiae pro.

Lorem ipsum

Lorem ipsum dolor sit amet

Lorem ipsum