Scroll-Animationen über CSS-Only
04. Feb 2014
Inhaltsbereiche lassen sich beim Scrollen animieren.
Inhalte lassen sich beim Scrollen animieren. Sobald bestimmte Bereiche sichtbar werden können diese über CSS3-Transitions effektvoll animiert werden. Diese Effekte sind rein über CSS-Only auf beliebige Bereiche anwendbar.
CSS-Only Umsetzung einer animierten Box
/*@wCssFragment{class:elementBox;variant:80;caption:Einblenden, wenn im Sichtbaren Bereich;caption-en:Fade in if visible}*/
.elementBox_var80 {-w-add-classes:wglAnimateIfVisibleOnce;overflow:hidden}
.elementBox_var80.wglAnimateIfVisibleOnceVisible {overflow:visible}
.elementBox_var80 > .boxInner {transition:all 1.0s ease-in-out;opacity:0}
.elementBox_var80.wglAnimateIfVisibleOnceVisible > .boxInner {opacity:1}
Durch Ergänzen der Klasse wglAnimateIfVisibleOnce wird dem Element über die ui.js die Klasse wglAnimateIfVisibleOnceVisible ergänzt, sobald das Element im sichtbaren Bereich ist. Ob dies sofort beim Laden der Seite, durch Scrollen oder durch Skalieren passiert, spielt dabei keine Rolle.
Beispiele für animierte Bereiche finden durch Scrollen der Beispielseite für CSS-Only Varianten des Inhaltsboxen Weblics.
Diese CSS-Only Funktion benötigt die aktuellste ui.js, welche über die Weblics-Verwaltung direkt im Weblication CMS aktualisiert werden kann.