Wie ändern Sie ein Bild, wenn Sie auf einer Webseite nach unten scrollen?

Ich fand diesen wirklich coolen Effekt auf dieser Seite, scrolle 2/3 runter, um es zu sehen Es ist ein "Bleistift" -Bild (mehrere Bilder aus verschiedenen Blickwinkeln), das sich beim Scrollen ändert. Link ist hier https://www.fiftythree.com/pencil Wie ändern Sie ein Bild, wenn Sie auf einer Webseite nach unten scrollen?

Wie auch immer, kann mir jemand sagen, wie ich das in meiner Website implementieren könnte? Oder der Name des Effekts, damit ich es nachschlagen kann.

sehr geschätzt.

Quelle

2016-08-10 noob2014

Haben Sie selbst etwas probiert? Niemand wird eine Lösung für Sie finden, ohne dass Sie sich selbst etwas Mühe geben. –

Hallo Mike. Ich weiß nicht einmal, wo ich anfangen soll, ich suche nur nach Zeigern. Wie heißt das? Es ist schwer, danach zu suchen, wenn ich nicht genau weiß, wonach ich suche. – noob2014

Es gibt keinen genauen Begriff dafür. Erfahren Sie, wie Sie ein Bild drehen. Dann lerne, wie man etwas ändert, wenn der Benutzer scrollt. Kombiniere die beiden und du hast eine Lösung. –

Drei Schritte:

Hören Sie das Bildlaufereignis.
Ruft die aktuelle Bildlaufposition ab.
Legen Sie die Bildquelle basierend auf dieser Position fest.

var imageEl = document.getElementById('fake-image'); 
 

 
function getSrc(scrollPos) { 
 
    if (scrollPos < 200) return 'image one.jpg'; 
 
    if (scrollPos < 300) return 'image two.jpg'; 
 
    if (scrollPos < 400) return 'image three.jpg'; 
 
    if (scrollPos < 500) return 'image four.jpg'; 
 
    if (scrollPos < 600) return 'image five.jpg'; 
 
    return 'image six.jpg'; 
 
    } 
 

 
window.addEventListener('scroll', function() { 
 
    imageEl.textContent = getSrc(window.scrollY); 
 
});

#fake-image { 
 
    background: aliceblue; 
 
    height: 5000px; 
 
    padding-top: 50%; 
 
    font-size: 30px; 
 
}

<div id="fake-image"> 
 
    Fake image 
 
</div>

Sie werden wahrscheinlich wollen die Bilder vorab geladen werden oder als eine andere Antwort, sagte, die Verwendung ein-/ausblenden und mehrere Bilder haben.

Quelle

2016-08-10 22:51:48

Das ist immer noch ziemlich genial. Das OP sollte nicht die vollständige Lösung erwarten, sondern eine allgemeine Vorstellung davon, wie das Problem zu lösen ist. –

Sie können es tun, indem Sie das Ereignis scroll hören.

, wenn dieses Ereignis

löst

die Position des Ziel div (Bild Wrapper)
auf Ihrer Logik berechnen, ändern Sie das Bild innerhalb/oder nichts tun ..

Quelle

2016-08-10 22:50:30 webdeb

Sie können mit der rechten Maustaste auf das Bild in Chrom und sagen "Element prüfen", Sie sehen, dass er eine Reihe von Bildern im Container hat, die alle ausgeblendet sind (mit Ausnahme der ersten, die standardmäßig angezeigt wird).

Wenn Sie nach unten blättern, haben Sie eine Funktion, die auf das Bildlaufereignis und den Wert der Bildlaufleistenposition wartet.

Basierend auf dem obigen Wert können Sie die Klasse "active" (was in dem Portal, mit dem Sie verknüpft haben, anzeigen/verbergen) auf das entsprechende Bild setzen.

TL/DR: Mehrere Bilder anzeigen und sie basierend auf der Bildlaufposition ein-/ausblenden, indem Sie das onscroll-Ereignis abhören.

Quelle

2016-08-10 22:57:15

Wie ändern Sie ein Bild, wenn Sie auf einer Webseite nach unten scrollen?

Antwort

Verwandte Themen