We use cookies to personalize content and ads of our website, to bring you social media functions, and to analyze the traffic to our website. We also share the collected data with our partners, who in turn may use it for social media, advertisement and analysis.More information
I accept

Animationen

Kleine CSS-Animationen sind das Salz in einer Website-suppe.
Kid a bietet ein kleines Set an Bewegungen an.

Animation einmal ausführen

Standardmäßig wird die Animation eines Contentelements einmal ausgeführt – und zwar dann, wenn das Element das erste Mal im Sichtbereich des Users erscheint.

/* Animationsklassen */
.bh-animation-left
.bh-animation-right
.bh-animation-top
.bh-animation-bottom
.bh-animation-fade
.bh-animation-zoom
/* Animation einmal ausführen */
.inviewstay





Animation mehrmals ausführen

Auf Wunsch wird eine Animation mehrmals abhängig vom Sichtbereich des Users ausgeführt.

Inview

Die Sichtbarkeit der Contentelemente wird mittels inview.js und script.js gesteuert.

/* Element im Sichtbereicht */
.inviewactive

CSS

body:not(.bhe-state-editing) .bh-animation-fade,
body:not(.bhe-state-editing) .bh-animation-top,
body:not(.bhe-state-editing) .bh-animation-bottom,
body:not(.bhe-state-editing) .bh-animation-left,
body:not(.bhe-state-editing) .bh-animation-right,
body:not(.bhe-state-editing) .bh-animation-zoom {
opacity: 0;
-webkit-transition: all .8s;
transition: all .8s;
-webkit-transition-delay: .2s;
transition-delay: .2s;
}
body:not(.bhe-state-editing) .bh-animation-top {
top: -100px;
}
body:not(.bhe-state-editing) .bh-animation-bottom {
top: 100px;
}
body:not(.bhe-state-editing) .bh-animation-left {
left: -100px;
}
body:not(.bhe-state-editing) .bh-animation-right {
left: 100px;
}
body:not(.bhe-state-editing) .bh-animation-zoom {
transform: scale(0.8);
}
body:not(.bhe-state-editing) .inviewactive {
opacity: 1;
top: 0; left: 0; bottom: 0; right: 0;
transform: scale(1);
}

Typoscript

# CONTENTELEMENTE, DIE ANIMIEREN KÖNNEN

plugin.tx_bh.settings.contentElements {
bhText.animationEnabled = 1
bhPicture.animationEnabled = 1
bhLinkbox.animationEnabled = 1
bhBox.animationEnabled = 1
bhFader.animationEnabled = 0
bhAccordeonItem.animationEnabled = 0
bhTabs.animationEnabled = 0
bhGallery.animationEnabled = 0
bhVideo.animationEnabled = 1
bhIframe.animationEnabled = 0
bhIconbox.animationEnabled = 1
bhCols.animationEnabled = 0
bhGroup.animationEnabled = 0
bhTrenner.animationEnabled = 0
bhFiftyFifty.animationEnabled = 0
bhPictureSection.animationEnabled = 0
bhScrollBox.animationEnabled = 0
}