javascriptparallaxiscroll

iScroll parallax effect


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 :

Thanks for your help!


Solution

  • 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>