iScroll parallax effect

Question

I'm trying to understand how parallax works with iscroll5. From what I understand, I can define a container as an indicator to alter scroll speed. However what I need to do is to apply a speed ratio to several elements at the same time.

Let's take the example below, how would I proceed to change the speedratioX of all h2 elements at once?

Here is the jsfiddle (might be easier) and below the same example 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>

Now, my questions are :

• Is it possible to do it with iScroll only? And if so, how (the documentation only mentions altering the speed ratio of a whole container)?

• If it's not possible, I'm open to any other suggestions that can be integrated with iScroll and that don't require jQuery.

Thanks for your help!

Answer 1

Ok, I've found a solution. I'm posting this here as an answer in case it could help someone.

So I've noticed that you can pass an array of indicators and not just one element. So I've used a for loop to populate an array that I use when creating a new IScroll class.

Here is how it looks:

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>