iScroll Parallax Effekt

Question

Ich versuche zu verstehen, wie Parallax mit iscroll5 funktioniert. Soweit ich weiß, kann ich einen Container als Indikator für die Änderung der Scrollgeschwindigkeit definieren. Was ich jedoch tun muss ist, ein Geschwindigkeitsverhältnis auf mehrere Elemente gleichzeitig anzuwenden.

Nehmen wir das Beispiel unten, wie würde ich fortfahren, die speedratioX aller h2 Elemente auf einmal zu ändern?

Hier ist die jsfiddle (könnte einfacher sein) und unter dem gleichen Beispiel in SO:

var container = document.getElementsByClassName('iscroll__wrapper')[0], 
 
    myScroll = new IScroll(container, { 
 
     scrollX: true, 
 
     scrollY: false, 
 
     mouseWheel: true 
 
    });

.iscroll__wrapper { 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    width: 1200px; 
 
    height: 300px; 
 
} 
 

 
li { 
 
    box-sizing: border-box; 
 
    flex: 0 0 auto; 
 
    width: calc(100%/3); 
 
    padding-left: 2em; 
 
    padding-right: 2em; 
 
    list-style: none; 
 
} 
 

 
figure { 
 
    margin: 0; 
 
} 
 

 
img { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
}

<script src="https://cdn.jsdelivr.net/npm/iscroll/build/iscroll-probe.js"></script> 
 
<div class="iscroll__wrapper"> 
 
    <ul> 
 
    <li> 
 
     <figure><img src="https://lorempixel.com/900/200"></figure> 
 
     <h2 class="title">Title 1</h2> 
 
    </li> 
 
    <li> 
 
     <figure><img src="https://lorempixel.com/900/200"></figure> 
 
     <h2 class="title">Title 1</h2> 
 
    </li> 
 
    <li> 
 
     <figure><img src="https://lorempixel.com/900/200"></figure> 
 
     <h2 class="title">Title 1</h2> 
 
    </li> 
 
    </ul> 
 
</div>

Nun meine Fragen sind:

• Ist Ist es möglich nur mit iScroll zu arbeiten? Und wenn ja, wie (in der Dokumentation wird nur die Änderung des Geschwindigkeitsverhältnisses eines ganzen Containers erwähnt)?

• Wenn es nicht möglich ist, bin ich offen für alle anderen Vorschläge, die in iScroll integriert werden können und keine jQuery erfordern.

Vielen Dank für Ihre Hilfe!

Answer 1

Ok, ich habe eine Lösung gefunden. Ich poste das hier als Antwort für den Fall, dass es jemandem helfen könnte.

So habe ich bemerkt, dass Sie ein Array von indicators und nicht nur ein Element übergeben können. Daher habe ich eine for-Schleife verwendet, um ein Array zu füllen, das ich beim Erstellen einer neuen IScroll-Klasse verwende.

Hier ist, wie es aussieht:

var container = document.getElementsByClassName('iscroll__wrapper')[0], 
 
    containerLis = container.getElementsByTagName('li'), 
 
    indicatorsArr = [], 
 
    myScroll; 
 

 
// Generating the indicators array 
 
for (var i = 0; i < containerLis.length; i++) { 
 
    var indicatorEl = container.getElementsByTagName('h2')[i]; 
 

 
    indicatorsArr[i] = { 
 
    el: indicatorEl, 
 
    resize: false, 
 
    ignoreBoundaries: true, 
 
    listenX: true, 
 
    listenY: false, 
 
    speedRatioX: 0.3 
 
    }; 
 
} 
 

 
// Creating a new IScroll class 
 
myScroll = new IScroll(container, { 
 
    scrollX: true, 
 
    scrollY: false, 
 
    mouseWheel: true, 
 
    indicators: indicatorsArr 
 
});

.iscroll__wrapper { 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    width: 1200px; 
 
    height: 300px; 
 
} 
 

 
li { 
 
    box-sizing: border-box; 
 
    flex: 0 0 auto; 
 
    width: calc(100%/3); 
 
    padding-left: 2em; 
 
    padding-right: 2em; 
 
    list-style: none; 
 
} 
 

 
figure { 
 
    margin: 0; 
 
} 
 

 
img { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
h2 { 
 
    padding-left: 5em; 
 
}

<script src="https://cdn.jsdelivr.net/npm/iscroll/build/iscroll.js"></script> 
 
<div class="iscroll__wrapper"> 
 
    <ul> 
 
    <li> 
 
     <figure><img src="https://lorempixel.com/900/200"></figure> 
 
     <h2><span>Title 1</span></h2> 
 
    </li> 
 
    <li> 
 
     <figure><img src="https://lorempixel.com/900/200"></figure> 
 
     <h2><span>Title 2</span></h2> 
 
    </li> 
 
    <li> 
 
     <figure><img src="https://lorempixel.com/900/200"></figure> 
 
     <h2><span>Title 3</span></h2> 
 
    </li> 
 
    </ul> 
 
</div>