✔ Bilder während scrollen erscheinen lassen

[Igäl]

Liebe alle

Wiedermal brauche ich einen Denkanstoss.

Setting: ich habe zwei Spalten (divs). Im rechten div ist viel Text. Bei Overflow (also eigentlich immer) ist das div scrollable. Nun möchte ich, dass im linken div ein Bild erscheint, wenn eine bestimmte Stelle im Text erreicht ("erscrollt") ist. Bei der nächsten "Bildstelle" soll das Bild dann wieder ausgeblendet und das neue Bild eingeblendet werden.

Hat jemand eine Idee, wie das konzeptuell aussehen könnte? Und ob das überhaupt möglich ist?

Danke für die Inputs und euch allen weiterhin eine gute Woche.

So long, dä Igäl

 

[Sempervivum]

Ich denke, auch hier kann ich einen Denkanstoß geben:
Hier kann dir sicher der Intersection-Observer weiter helfen. Dieser überwacht die Scrollposition und ruft eine Funktion auf, wenn ein bestimmtes Element in den Viewport gelangt. Damit kannst Du z. B. ein p-Element überwachen oder, wenn es nur eine kleine Stelle im Text sein soll, diese in ein span wrappen und dieses überwachen.
Das mit dem Bild würde ich so regeln, dass Du ein data-Attribut an der betr. Textstelle bzw. dem span anbringst, die die URL des Bildes enthält. Dann kannst Du jeweils das Bild, das dazu gehört einblenden.

 

[Igäl]

Klasse. Vielen Dank. Ich versuche das mal umzusetzen.

 

[Igäl]

Was ich bislang habe, läuft soweit:

<div class="row">
                        <div class="col-2">&nbsp;</div>
                        <div class="col-10">
                            <a href="index.php?mid=4">Zur&uuml;ck</a><br />
                            <h3>{$bookpart.BookChapterTitle}</h3>
                            <img class="bookImg" src="gfx/history/inbook_images/CHAP1_001.png">
                        </div>
                    </div>

                </div>
                <div class="col-6">

                    <div class="row">
                        <div class="col-1">&nbsp;</div>
                        <div class="col-8 overflow-x-scroll storybox">
                            {$bookpart.BookChapterText}
                        </div>
                        <div class="col-3">&nbsp;</div>
                    </div>

const imgTrigger = document.querySelector(".imgTrigger");
    const bookImg = document.querySelector(".bookImg");

    const objOptions = {
        root: null,
        threshold: 1,
        rootMargin: "0px",
    };

    const imgObserver = new IntersectionObserver(switchImage, objOptions);

    imgObserver.observe(imgTrigger);

    function switchImage(entries) {
        const [entry] = entries;
        if(entry.isIntersecting) {
            bookImg.classList.remove("hidden");
        }else{
            bookImg.classList.add("hidden");
        }
    }

img.bookImg {
    width: 95%;
    max-width: 300px;
    transition: all 1.5s ease;
}
.hidden {
    opacity: 0;
}
span.imgTrigger {
    visibility: hidden;
}

Als Übung habe ich im Text einfach ein <span class="imgTrigger"></span> eingefügt, wo das Bild getriggert werden soll. Das ist mal der erste Durchgang. Es funktioniert, dass ein Bild angezeigt wird, wenn der Viewport das Span-Tag erreicht, und dass es wieder verschwindet, wenn das Tag aus dem Viewport rausgescrollt wird. Da bin ich schonmal glücklich.

Es hat allerdings einen kleinen Schönheitsfehler, den ich bis jetzt noch nicht korrigieren konnte. Wenn die Seite lädt, wird das Bild kurz angezeigt und faded dann out. Gibt es da eine Möglichkeit mit dem IntersectionObserver, dass man definiert, dass das Bild / die Bilder von Anfang an ausgeblendet sind?

 

[Sempervivum]

Gleich im HTML die Klasse "hidden" setzen?

 

[Igäl]

Führt leider dazu, dass es gar nicht mehr auftaucht. Ich pröbel mal rum. Musste aber erst mit den Kids ne Rübe schnitzen

 

[Sempervivum]

Hast Du die Klasse auch beim richtigen Element gesetzt: img.bookImg ?

<img class="bookImg hidden" src="gfx/history/inbook_images/CHAP1_001.png">

 

[Igäl]

Dumm von mir. Hab's als Eigenschaft definiert, anstatt die Klasse zu nutzen

Ich steh noch etwas am Berg. JS ist etwas, das ich bis anhin nicht selber gemacht habe. Ich versuche mal das umzusetzen, was du mit der data-Eigenschaft erwähnt hast.

Kleine Frage noch: muss ich mit querySelectorAll arbeiten, wenn ich mehrere solcher Trigger im Text habe?

 

[Sempervivum]

Genau, querySelectorAll und Du kannst bei dem selben Observer mehrere Elemente zum Überwachen anmelden.

Dafür, dass Du bisher nichts mit JS gemacht hast, lernst Du aber schnell. Wahrscheinlich schon Erfahrungen mit anderen Programmiersprachen?

 

[Igäl]

Mischung zwischen Hobbyprogrammierkenntnissen, dem Lesen der Dokumentationen und adaptieren von Code-Snipets aus Tutorials. Gepaart mit viel Interesse und - momentan gerade - etwas Zeit

Der grösste pain in the ass ist herauszufinden, wie die proprietäre Syntax aussehen muss und wie die beste Art zu debuggen ist. Aber das kommt nach und nach. Ich beherrsch mich, jeden Schritt hier nachzufragen und ich danke dir herzlich für deinen Support.