Gif-Videos abspielen lassen mit Ankerpunkten

eve · 20. August 2020

Hallo Leute,

ich habe im Dezember angefangen zu programmieren, dementsprechend habe ich noch nicht so viel Ahnung. Vor allem nicht wenn es um JavaScript geht.

Konkret möchte ich auf einer Seite gifs einbauen die sich mit Ankerpunkten abspielen lassen. Z.B.: Ich setze einen Ankerpunkt in die Mitte des Bildschirmes und einen Ankerpunkt in die Mitte des gifs, wenn sich dann die Ankerpunkte treffen (z.B.: beim runter scrollen der Seite) wird das gif abgespielt bis es vorbei ist. Beim nächsten gif genau das gleiche. Also es soll nicht abrupt Enden wenn die Ankerpunkte sich nicht mehr berühren, sondern noch zu Ende abspielen auch wenn schon das nächste gif den Ankerpunkt berührt hat.

Gerade sieht es auf der Seite so aus, dass die gifs sich im Loop abspielen und nur zu sehen sind wenn man mit der Maus drüber fährt. Ich habe darüber schwarze Rechtecke (als png-Bilder) gesetzt die, die ganze Zeit zu sehen sind und dementsprechend verschwinden wenn man mit der Maus drauf kommt.

Genau, ich hoffe dass es verständlich genug erklärt wurde und mir jemand bei dem Problem aushelfen könnte.

eve · 20. August 2020

Nachtrag:

Ich habe mich jetzt erstmal an den JS Bereich gewendet, weil ich denke dass man es nur damit hinbekommt.

Sempervivum · 20. August 2020

Zitat

Gerade sieht es auf der Seite so aus, dass die gifs sich im Loop abspielen und nur zu sehen sind wenn man mit der Maus drüber fährt. Ich habe darüber schwarze Rechtecke (als png-Bilder) gesetzt die, die ganze Zeit zu sehen sind und dementsprechend verschwinden wenn man mit der Maus drauf kommt.

Dann bist Du ja schon relativ weit Den Start der Animation eines GIFs kannst Du erzwingen, indem Du das src-Attribut neu setzt, zur Sicherheit mit einem Zeitstempel, damit die URL eine andere ist:

Code

<img id="gif1" src="gif.gif">
<script>
document.getElementById('gif1').src = 'gif.gif?time=' + Date.now();
<script>

Allerdings lässt sich der Ablauf eines GIFs durch Javascript nicht steuern und es gibt auch keine Events z. B. für das Ende der Animation. Wenn ein GIF nur einmal spielen soll, musst Du das im GIF selber so anlegen oder es durch einen Timer wieder unsichtbar machen. Was nicht hundertprozentig genau wäre, aber ein gangbarer Weg.

eve · 21. August 2020

Alles klar, ich probier mich da mal aus. Danke sehr!

eve · 4. September 2020

Hey Leute,

also ich habe seit dem einiges ausprobiert und es klappt irgendwie nicht, der Plan vom Aufbau der Seite hat sich ebenfalls geändert.

Wie die Seite Aktuell aussieht:

Ich habe mit einem onmouseover Code die gifs so eingestellt, dass die (wie am Anfang) mit einem schwarzem Rechteck verdeckt sind und erst zu sehen sind wenn man mit der Maus drüber fährt. Wenn man wieder weg geht ist es jetzt so, dass der gif anhält und so bleibt.

Der Code ist folgendermaßen aus:

</div>

Alles läuft es funkt und ich bin zufrieden.

Aber ein Problem hatte ich bis eben nicht im Kopf: Es wird auf dem Tablet oder Smartphone nicht funktionieren da man dort keine Maus hat zum hovern.

Also das Problem ist eigentlich immer noch der Gleiche, nur dass es diesmal nur für Tablets und Smartphones funktionieren soll.

Währe super wenn mir jemand aushelfen könnte.

Danke sehr!

Sempervivum · 4. September 2020

Dann hast Du das mit den Ankerpunkten, dass die GIFs anfangen zu spielen, wenn sie beim Scrollen sichtbar werden, aufgegeben?

Das Problem, dass es auf Touchgeräten kein Hover gibt, haben die Browserhersteller auch erkannt und in den meisten Browsern einen Ersatz gebaut: Touch wirkt wie Mouseover und erneuter Touch irgend wo anders wie Mouseout. Genauer habe ich das noch nicht untersucht, vor allem nicht auf Apple-Geräten, weil ich kein Iphone habe. Versuche es einmal.

eve · 4. September 2020

Zitat von Sempervivum

Dann hast Du das mit den Ankerpunkten, dass die GIFs anfangen zu spielen, wenn sie beim Scrollen sichtbar werden, aufgegeben?

Ja, leider. Muss ich aber wahrscheinlich jetzt wieder aufnehmen. Ich kann ja nicht den onmouseover-Code einfach ausschalten für Touchgeräte?

Ich denke die beste Lösung sind dann einfach die Ankerpunkte. Bräuchte jetzt nur noch ein paar Lösungsansätze.

Sempervivum · 4. September 2020

Da gibt es jetzt den Intersection-Observer, damit ist so etwas relativ leicht zu machen. Ich versuche mal, etwas aufzubauen ...

Sempervivum · 4. September 2020

... Intersection-Observer scheint mir zu unflexibel zu sein, wahrscheinlich muss man doch mit einem onscroll-Listener die Sache selber ausprogrammieren.

Sempervivum · 4. September 2020

Ich habe einen groben Entwurf des Javascriptes fertig. Wie sehen denn deine GIFs aus, spielen die in Endlosschleife oder nur einmal?

basti1012 · 4. September 2020

Sempervivum

Vielleicht kannst du die Bibliothek dazu nutze nun die GIFs zu steuern , bzw. inmitten der GIF Animation zu springen.

https://basti1012.bplaced.net/…rdner=html-seminar&id=446

eve · 7. September 2020

Zitat von Sempervivum

Wie sehen denn deine GIFs aus, spielen die in Endlosschleife oder nur einmal?

Die werden nur einmal abgespielt und bleiben dann quasi stehen, also sollen durch ein Bild des Motivs ausgetauscht werden.

Sempervivum · 7. September 2020

Hier das Skript, das ich entwickelt habe:

Code

    <script>
        const items = document.querySelectorAll("img[data-src]");
        let playing = [false, false], oldPos = 0;
        window.addEventListener('scroll', event => {
            const pos = window.scrollY;
            for (let i = 0; i < items.length; i++) {
                const boundingRect = items[i].getBoundingClientRect();
                playIt = false;
                if (!playing[i]) {
                    let playIt = false;
                    // Scrollrichtung ermitteln
                    if (pos > oldPos) {
                        // Scrollrichtung down
                        // Prüfen, ob das Element in der Mitte angekommen ist
                        if (boundingRect.top < document.documentElement.clientHeight / 2
                            && boundingRect.top > 0) {
                            console.log('down on', boundingRect.top)
                            playIt = true;
                            playing[i] = true;
                            items[i].src = items[i].dataset.src + Date.now();
                        }
                    } else {
                        // Scrollrichtung up
                        // Pruefen, ob das Element in der Mitte angekommen ist
                        if (boundingRect.top > document.documentElement.clientHeight / 2
                            && boundingRect.bottom < document.documentElement.clientHeight) {
                            console.log('up on', boundingRect.top)
                            playIt = true;
                            playing[i] = true;
                            items[i].src = items[i].dataset.src + Date.now();
                        }
                    }
                } else {
                    if (pos > oldPos) {
                        // Scrollrichtung down
                        // Pruefen, ob das Element den Viewport nach oben verlassen hat
                        if (boundingRect.top < 0) {
                            console.log('down off', boundingRect.top)
                            playing[i] = false;
                        }
                    } else {
                        // Pruefen, ob das Element den Viewport nach unten verlassen hat
                        if (boundingRect.bottom > document.documentElement.clientHeight) {
                            console.log('up off', boundingRect.top)
                            playing[i] = false;
                        }
                    }
                }
            }
            oldPos = pos;
        });
    </script>

Alles anzeigen

Füge es am Ende des Body, vor dem schließenden </body>, ein.

Die img-Tags für die GIFs müssen damit so aussehen:

<img id="img1" data-src="images/laola.gif?time=">

Das Skript ist erst Mal eine Basisversion. Es spielt das GIF, wenn es etwa in der Mitte des Browserfenster ist.

eve · 7. September 2020

Funktioniert und passt fürs erste.

Super, vielen Dank!

Gif-Videos abspielen lassen mit Ankerpunkten

Jetzt mitmachen!

Teilen

Tags