Я жестко запрограммировал демо-страницу Skrollr, и она отлично работала. Жесткое кодирование тегов данных утомительно, поэтому я решил динамически создавать img div. Но теперь я не могу заставить его работать! Мне нужна еще одна пара глаз, чтобы посмотреть на мой код. Я уверен, что упускаю из виду что-то простое.
В идеале, когда вы прокручиваете вниз, изображения должны казаться анимированными (путем переключения их видимости), но элемент div должен оставаться в фиксированном положении на странице.
http://moto.oakley.com
содержит хороший пример Skrollr в действии.
Вот пример img div перед запуском JS
<img data--10000-top="display:block;" data-1-top="display:none;" data-anchor-target="#bps_ux" data-src="images/bps/bps0001.jpg" src="images/bps/bps0001.jpg" class="frame preload skrollable skrollable-after" style="display: block;" alt="" >
Затем у меня есть функция JS с циклом for, который добавляется к div img и увеличивает теги данных на 20. Я думаю, что мое использование данных не совсем правильно.
После запуска JS div выглядит так, но с 75 изображениями.
<img class="frame preload" src="images/bps/bps0001.jpg" data-src="images/bps/bps0001.jpg" data-anchor-target="#bps_ux" data-20-top="display:block;" data-0-top="display:none;" alt="bpsSprite frame 0001">
<img class="frame preload" src="images/bps/bps0002.jpg" data-src="images/bps/bps0002.jpg" data-anchor-target="#bps_ux" data-1-top="display:none;" data--0-top="display:block;" data--20-top="display:none;" alt="bpsSprite frame 0002">
<img class="frame preload" src="images/bps/bps0003.jpg" data-src="images/bps/bps0003.jpg" data-anchor-target="#bps_ux" data-1-top="display:none;" data--20-top="display:block;" data--40-top="display:none;" alt="bpsSprite frame 0003">
Вот моя тестовая ссылка с полным кодом
http://retropunk.com/files/bps-skrollr/
Спасибо за любые советы
-P
