scrollr.js анимация происходит на элементе только с позиции фиксированной

Question

Эй, ребята я новичок в Jquery и я пытался интегрировать плагин scrollr.js в моем веб-сайте и наткнулся на трудности, у меня есть следующий HTML:

<div data-0="background-color:rgb(0,0,255);transform:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform:rotate(360deg);" class="block"></div> 

и следующий CSS:

.block { 
    height: 200px; 
    width: 200px; 
    position: relative; 
} 

Fiddle here.

теперь с CSS выше, то анимация не; т работа, scrollr.js does't работы, б ut, когда я применяю следующий CSS:

.block { 
    height: 200px; 
    width: 200px; 
    position: fixed; 
    top:20px; 
} 

Анимации и все работает нормально.

fiddle here.

Я не всегда хочу, чтобы положение на моем элементе фиксировалось. как мне заставить анимацию работать, не вынимая элемент из обычного потока документа?

Я видел this demo на scrollr.js.

Но все равно не получается, почему мой пример не работает. , Если кто-нибудь может объяснить, почему мой пример не работает. это было бы очень полезно.

Спасибо.

Alexander.

Answer 1

Ваша первая анимация работает. Вы, вероятно, не видите этого, потому что он начинает анимацию, как только вы начинаете прокрутку, и когда вы просматриваете изображение, анимация уже выполнена. Попытайтесь увеличить высоту экрана или удалить текст в начале.

Если вы хотите, чтобы анимация начала, когда элемент на самом деле появляется на экране, взгляните на documentation.

Попробуйте изменить data-0 на data-bottom-top и data-500 на data-center.