Objekte erst einblenden lassen wenn man runterscrollt

  • 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 !





    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

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    7 Mal editiert, zuletzt von andy67 ()

  • Schließe mich Labelle an...Danke!


    Dennoch eine Bemerkung.
    Es macht auf mich den Eindruck als würde die Seite im Browser einfach langsam laden und die Grafiken brauchen so ihre Zeit.
    Die Absicht die dahintersteckt wird irgendwie nicht deutlich.
    Kann man die Bilder nicht mit einem fade-in erscheinen lassen?

    Experience is a wonderful thing, it enables you to recognize a mistake when you make it again!

  • n' Abend,


    es gibt viele verschiedene Möglichkeiten für das Erscheinen. Du musst die Annimations-ID entsprechend ändern. Klick mal die Links von Github an, dort kannst du sehen was es alles für Möglichkeiten gibt.

  • Es sollte eigentlich relative schnell ablaufen ! Vielleicht behindern die anderen Beispiele das schnelle laden der Bilder, weil ich auf der Hautseite alle Skripte in der Musterpage vorlade! ICh habe es eigentlich auf allen Browsern getestet (geht natürlich nicht auf alten IE)
    Man kann einige super Effekte damit erzeugen! Den Fade Effekt für größere Texte z.B. und das einzeln wenn man will ! Ich werde man ein paar Beispiele mehr machen. Testet mal auf Tablets wie es sich dort verhält !

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • grad am Tablet aktiv. Kein Bounced-Effekt. Wir kurz nacheinander erst links dann rechts eingeblendet. Bissi anstrengend...

    Einmal editiert, zuletzt von Gast#gibsnichtmehr#910 ()