Es gibt zwar in der Pro V11 eine Funktion im Bild-Objekt unter "Anzeigen" ein Häkchen zu setzen "Das Bild nur laden, wenn es auf der Seite angezeigt wird", aber das bezieht sich nur auf das Bild-Objekt und hat außer das Standard einblenden keine alternativen.
Dazu habe ich etwas (viel besseres) erstellt mit einem jQuery Skript und einer CSS Datei (animation) !
Die Dateien sind zu finden unter..
https://github.com/dirkgroenen…t-checker/tree/master/src (das jQuery Skript "jquery.viewportchecker.js")
https://github.com/daneden/animate.css (die CSS Datei "animate.css" oder "animate.min.css")
Das Skript bindet man unter (V11) "4" Seo & Code Reiter "Erweitert" ein. (Häkchen setzen bei Datei verknüpfen)
Die CSS Datei kann man dort ebenfalls einbinden.(animate.css)
Die Datei ist groß und man benötigt nicht den ganzen Code. Wer sich auskennt mit CSS kann sich die "keyframes" (inkl. - moz) für die gewünschte Animaton rauskopieren und in eine extra CSS oder vor dem "HEAD" Tag einbinden.
Um in WSX5 den Effect sichtbar zu machen muss man es per Skript starten und dazu benötigt man folgenden Code den man "vor dem </body> Tag" einbindet !
- <script>
- $(document).ready(function() {
- $('imCell_3 .text-inner, imCell_6).addClass("hidden").viewportChecker({ //die IDs und/oder Class von den Objekten
- classToAdd: 'visible animated bounceInLeft', //die Animations ID aus der animate.css
- offset: 10,
- repeat: true,
- callbackFunction: function(elem, action){}
- });
- $(#imCell_5 .text-inner, imCell_8').addClass("hidden").viewportChecker({//die IDs und/oder Class von den Objekten
- classToAdd: 'visible animated bounceInRight', //die Animations ID aus der animate.css
- offset: 10,
- repeat: true,
- callbackFunction: function(elem, action){}
- });
- });
- </script>
Wobei die farbigen Tags auf die jeweiligen Objekte und Objektnummern geändert werden müssen. ("#" für Ids und "." für class vor den Tags)
Die Objekt-Tags findet man im Quellcode oder man hat Firebug installiert und wählt den Tag aus.
Dazu gibt es noch etwas zu sagen: Wenn man nur den Text oder das Bild ohne Style (Rahmen, etc.) haben will muss man die Class zu den Ids hinzufügen und erst danach mit "," trennen.
Wie in meinem Beispiel lasse ich nur den Text und das Bild animieren und lasse den Style (Rahmen) am Platz eingeblendet. Wenn man das das gesamte Objekt bewegen will dann nimmt man nur "imCell_5").
In meinem Beispiel lasse ich die linken Objekte mit dem Tag "bounceInLeft" von links einblenden und die rechten mit "bounceInRight" ! Es gibt noch andere verschiedene Effekte die man in der animate.css findet und sich aussuchen kann. z.B. (tada, wobble, bounceInDown, fadeOutDown, fadeOutLeft usw....)
Und hier mein Test-LINK