изображение перекрывается с паузой - skrollr

Question

Вы здесь можно увидеть example (близкий подход, что я хочу достичь, но не полный вообще)

Это объяснение того, что я пытаюсь достичь:

1. Смотрите изображение
2. прокрутки вниз, но по-прежнему видеть изображение в течение нескольких секунд (только возможно 2 сек)
3. Затем пользователь видит изображение, которое было ниже перекрывая изображение, которое было статичным.
4. Снова: см. Изображение> Прокрутите вниз и все еще увидите изображение и через 2 секунды> Затем изображение, которое было ниже, перекрывает предыдущий.
5. Repeat и так далее ...

Я читал документацию, но не понимаю, это много. Любая помощь?

Это разметка:

<div data-0="transform:translate(0,0%);" data-1200p="transform:translate(0,-100%);"> 
    <div class="img-box"> 
     <img class="fittobox" src="images/1.jpg" alt="1" width="1280" height="800"> 
    </div> 
</div> 

<div data-0="transform:translate(0,100%);" data-100p="transform:translate(0,0%)" data-_box-100p="" data-_box-200p="transform:translate(0,-100%)"> 
    <div class="img-box"> 
     <img class="fittobox" src="images/1.jpg" alt="1" width="1280" height="800"> 
    </div> 
</div> 

<div data-_box-100p="transform:translate(0,100%);" data-_box-200p="transform:translate(0,0%);"> 
    <div class="img-box"> 
     <img class="fittobox" src="images/1.jpg" alt="1" width="1280" height="800"> 
    </div> 
</div> 

Я использую skrollr plugin

Answer 1

Не ваш второй слайд себя так, как вы хотели?

Посмотрите на это simple parallax scrolling tutorial, это может помочь вам понять, что Skrollr немного лучше.

Также обратитесь к Skrollr.js infographics, это более визуальный способ увидеть, как различные атрибуты данных влияют на время и анимацию.

Answer 2

Устанавливает верхнее смещение с использованием window.scrollTo(0, top) на рабочем столе для обновления внутреннего состояния в случае прокрутки петли.

skrollr.init({ 
    easing: { 
     //your code 
    }, 
    render: function(data) { 
     //Loop back to top 
     if(data.curTop === data.maxTop) { 
      this.setScrollTop(0, true); 
       //will return first image when you reached to last 
     } 
    } 
}); 

skrollr перейдет на новую позицию без какого-либо перехода. По умолчанию применяется глобальный параметр smoothScrolling.

Answer 3

Это рабочая демонстрация:

http://dinhquangtrung.net/demo/skrollr/Pausing.htm

<div 
data-100p="transform:translate(0,0%);" 
class="skrollable skrollable-between" 
style="-webkit-transform: translate(0px, 0%);"> 
    <div class="img-box" style="position: absolute; overflow: hidden;"> 
     <img class="fittobox" src="./Pausing_files/1.jpg" alt="1" width="1289" height="805.625" style="position: absolute; left: 0px; top: -70.8125px;"> 
    </div> 
</div> 

<div 
data-0="transform:translate(0,100%);" 
data-100p="transform:translate(0,100%);" 
data-200p="transform:translate(0,0%)" 
class="skrollable skrollable-between" 
style="-webkit-transform: translate(0px, 100%);"> 
    <div class="img-box" style="position: absolute; overflow: hidden;"> 
     <img class="fittobox" src="./Pausing_files/1.jpg" alt="1" width="1289" height="805.625" style="position: absolute; left: 0px; top: -70.8125px;"> 
    </div> 
</div> 

<div 
data-0="transform:translate(0,100%);" 
data-300p="transform:translate(0,100%);" 
data-400p="transform:translate(0,0%)" 
class="skrollable skrollable-before" 
style="-webkit-transform: translate(0px, 100%);"> 
    <div class="img-box" style="position: absolute; overflow: hidden;"> 
     <img class="fittobox" src="./Pausing_files/1.jpg" alt="1" width="1289" height="805.625" style="position: absolute; left: 0px; top: -70.8125px;"> 
    </div> 
</div> 

<div 
data-0="transform:translate(0,100%);" 
data-500p="transform:translate(0,100%);" 
data-600p="transform:translate(0,0%)" 
class="skrollable skrollable-before" 
style="-webkit-transform: translate(0px, 100%);"> 
    <div class="img-box" style="position: absolute; overflow: hidden;"> 
     <img class="fittobox" src="./Pausing_files/1.jpg" alt="1" width="1289" height="805.625" style="position: absolute; left: 0px; top: -70.8125px;"> 
    </div> 
</div> 

Я могу объяснить эту вещь в случае, если вы не хотите читать документацию:

<div 
data-0="transform:translate(0,100%);" // when top = 0, translate the image position by 100% down. 
data-100p="transform:translate(0,100%);" // when top = 100, still in the position translated 100% down. 
data-200p="transform:translate(0,0%)" // when top = 200, move position to origin position. 

То же самое с другие фотографии, только первый снимок является особенным, потому что ему не нужно двигаться нигде.