Mehrere Elemente bei Auftauchen im Viewport animieren

  • Hallo zusammen,


    brauche mal wieder bisschen Hilfe mit JS.


    Ich habe mehrere Elemente mit der Klasse .skill und würde diese gerne animieren, wenn sie im Viewport sind bzw. wenn man dorthin scrollt, sodass sie im Viewport sind.


    Dafür habe ich bisher folgenden Code geschrieben:



    Das Problem dabei ist, dass nur am Anfang einmal abgefragt wird, ob die Elemente im Viewport sind und nur dann die Klasse hinzugefügt wird.


    Wenn ich allerdings scrolle, sodass diese irgendwann in den Viewport gelangen, passiert nichts.


    Verstehe nicht ganz, warum das so ist.


    Wäre super, wenn jemand mir helfen könnte bzw. das erklären würde.


    Schon mal vielen Dank!


    Gruß

    JR Cologne


    PS: Ich würde gerne auf jQuery-Lösungen verzichten. ;)

  • Der Fehler liegt hier:

    Code
    document.addEventListener('scroll', animate(element, element.clientHeight))

    So weist Du den Returnwert der Funktion animate()als Callback zu, Du musst jedoch eine Funktion zuweisen.


    So funktioniert es:

    Code
                document.addEventListener('scroll', function () {
                    animate(element, element.clientHeight);
                });

    Obacht: forEach für eine Nodelist wird von IE nicht unterstützt:

    https://developer.mozilla.org/…/Web/API/NodeList/forEach

  • Ah, verstehe. Bisschen merkwürdig, dass man da keine Fehlermeldung bekommt...


    Na ja, auf jeden Fall auch noch mal danke für den Hinweis. Habe das dezent übersehen.


    Werde dann gleich mal schauen, ob ich es dann zum Laufen bekomme. :)

  • So, habe es jetzt dahingehend korrigiert, dass ich nun eine Funktion zuweise und für die bessere Browserkompatibilität eine for-Schleife statt forEach nutze:



    Leider erzielt das immer noch nicht das gewünschte Ergebnis. Jetzt wird lediglich dem letzten Element die Klasse zugewiesen. Selbst wenn beim Aufruf der Seite schon alle im Viewport sind, bekommt nur das letzte Element die Klasse.

  • Oh, jetzt sind wir in eine Falle getappt, in die schon viele hinein getappt sind. Hier ist beschrieben, warum es so nicht funktioniert und es sind einige Lösungen angegeben:

    http://www.webdeveloper.com/fo…For-loop-not-working-help

    Da Du jQuery nicht möchtest, kommt wohl nur die Lösung aus Posting #3 in Fragen. Würde dann so aussehen:

    Code
            var skills = document.querySelectorAll('.skill');
            for (var i = 0; i < skills.length; i++) {
                document.addEventListener('scroll', function (idx) {
                    return function () {
                        var skill = skills[idx];
                        animate(skill, skill.clientHeight);
                    };
                }(i));
            }
  • Zitat

    Ist echt mühselig, auf reines JS zu setzen.

    Da hast Du natürlich Recht. Aber was hält dich davon ab, jQuery zu verwenden? Auch dieser Cross-Browser-Code erübrigt sich dann:

    Code
    var scrollY = window.scrollY || window.pageYOffset;
  • Ja, ein wenig frage ich mich auch, warum ich mir das eigentlich antue. Aber da ich ja das Ziel habe, JS als solches zu lernen, wäre es meiner Meinung nicht der richtige Weg, direkt sowas wie jQuery einzusetzen, das einem alles erheblich einfacher macht und eigentlich nicht mehr so extrem viel mit der Sprache zu tun hat.


    Wenn ich PHP lerne, fange ich ja auch nicht gleich mit Laravel an, sondern baue meine eigene Sachen und erst wenn ich etwas fortgeschrittener bin, schaue ich mir dann z.B. Laravel an und vereinfache so meinen Entwicklungsprozess.


    Ansonsten könnte ich jetzt natürlich noch Performance und so ein Kram ansprechen, aber da möchte ich mich jetzt nicht hinbegeben, da ich ja noch ein Anfänger bin, was JS angeht, und das nicht so wirklich beurteilen kann.


    Man könnte eigentlich mal einen Thread eröffnen, wo man JS- und jQuery-Lösungen gegenüberstellt und die Performance testet usw. Wäre sicher mal ganz interessant.


    Muss allerdings auch zugeben, dass ich jetzt z.B. für meine Website auf eins, zwei JS-Scripts bzw. -Libraries setze. Von daher bin ich da auch nicht ganz konsequent, aber ich habe schlicht keine Lust mich Stunden mit JS zu beschäftigen, um einen kleinen Effekt auf die Beine zu stellen. Dann greife ich zumindest vorübergehend, bis ich in JS besser bin, doch erstmal auf sowas zurück.

  • Zitat

    Aber da ich ja das Ziel habe, JS als solches zu lernen, wäre es meiner Meinung nicht der richtige Weg, direkt sowas wie jQuery einzusetzen, das einem alles erheblich einfacher macht und eigentlich nicht mehr so extrem viel mit der Sprache zu tun hat.

    Ich bin schon 64 und das erinnert mich an Diskussionen in den 80-ern des vergangenen Jahrhunderts, wo darüber debattiert wurde, ob man gleich in eine Hochsprache wie C einsteigen, oder erst Mal Assembler lernen sollte. Heute redet niemand mehr von Assembler oder dass man zum Programmieren wissen muss, wie ein Prozessor funktioniert.

  • Na, davon bin ich aber noch weit entfernt. :D


    Wie gesagt, würde es mir nur darum gehen, ein paar kleine Effekte umzusetzen, würde ich vermutlich sofort zu jQuery greifen. Da ich aber auch JS lernen möchte und man durch das Lernen von jQuery nicht unbedingt automatisch auch JS lernt, nutze ich halt erstmal JS.


    Sorgst jetzt gerade dafür, dass ich doch wieder ins Grübeln komme, ob ich nicht doch für meine Website auf jQuery umsteigen sollte... :/


    Welche Version von jQuery würde man denn am besten nutzen und wo kann man vernünftig den Browser-Support einsehen? Auf der offiziellen Seite steht ja nur, welche offiziell unterstützt werden. Ob es da letztendlich funktionieren wird, weiß man dadurch nicht...

  • Wenn Du von Effekten sprichst, meinst Du dann Animationen? Man kann dann sehr viel mit CSS machen. Und für das was damit nicht geht, ist jQuery zu empfehlen. Das Stichwort "Animationen" macht es auch leicht, die Frage nach der Version von jQuery zu beantworten: AFAIK arbeiten erst die 3-er Versionen mit requestAnimationFrame und nach Expertenmeinung ist das sehr zu empfehlen.

    Die Frage nach dem Browser-Support kann ich leider nicht beantworten.

  • Ich meine sowas wie Parallax, Smooth Scrolling usw... Das geht leider nicht mit CSS.


    Ich glaube, ich werde jetzt erstmal bei meinem eigenen JS und den zwei JS-Libraries bleiben. Aktuell läuft das nämlich ganz gut.


    Vielleicht steige ich dann später mal in jQuery ein, um nicht mehr auf die Libraries angewiesen zu sein und komplett eigenen Code zu haben.


    Dir auf jeden Fall nochmal vielen Dank. Hast mir sehr geholfen. :)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!