2013-07-01 4 views
2

Я работаю над внедрением Skrollr на сайт клиента. Я использую относительное положение следующим образом:Skrollr анимация только после изменения размера экрана

<div id="deer" data-anchor-target="#benchmark" data-200-bottom="left: -100px" data-bottom="left: 80px"></div> 

Однако анимация, кажется, не работает, когда я впервые загрузил страницу. Но после изменения размера экрана (например, откройте «Отзывчивый дизайн» в Firefox или включите/выключите Firebug), анимация, похоже, работает нормально.

Эта проблема возникает в Firefox (Mac) и Google Chrome (Windows). В Chrome (Mac) эта проблема исчезает.

Пожалуйста, помогите разобраться с этой рабочей демонстрацией. Я пытался решить эту проблему за весь день :( http://goo.gl/scFwV

ответ

3

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

Вывод:.. Вызов skrollr.init когда ползунок загрузится Или вы можете позвонить refresh (https://github.com/Prinzhorn/skrollr#refreshelements)..

+0

Большое спасибо Prinzhorn! Вы спасли мою жизнь. : D – designil

0

Спасибо за ответ Prinzhorn. У меня был s ame и исправил его с установкой фиксированной высоты для моего Flexslider-Container.