Почему мои divs не оживляют свиток?

Question

http://codepen.io/donnaloia/pen/IekLw

Я пытаюсь воспроизвести демоверсию тимпана с использованием кладки и animonscroll.js. Единственное различие заключается в том, что я использую div-карты с изображениями внутри них, а не только с изображениями.

Вот рабочие tympanus демо http://jsfiddle.net/Sfmv9/19/light/

И вот мой код: http://codepen.io/macsupport/pen/eghEm

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

Это мой javascript, остальная часть кода находится в моей копейной ссылке.

$(document).ready(function() { 
     $('.container').imagesLoaded(function() { 
     $('.container').masonry({ 
     itemSelector: '.grid_4', 
     isFitWidth: true, 
     gutter: 8 
     }); 

     }); 

    new AnimOnScroll(document.getElementById('.grid_4'), { 
      minDuration : 0.4, 
      maxDuration : 0.7, 
      viewportFactor : 0.2 
      }); 

    }); 

Answer 1

Вот раздвоенный codepen: http://codepen.io/anon/pen/CotJv

Похоже, у вас есть несколько проблем с вашим codepen.

1) Ваш код незавершен. В отличие от jsfiddle, с которой вы связались, codepen не имеет всех ресурсов. Если вы добавите animOnScroll и CSS animate (я скопировал только одну из рабочей скрипты, вы можете захотеть другую анимацию) и т. Д. У вас нет мгновенной ошибки.

2) Файл animOnScroll.js, на который ссылается страница jsfiddle, обрабатывает встроенные изображения и инициализацию кладки. Если вы собираетесь использовать этот файл, я бы рекомендовал, чтобы animOnScroll.js продолжал их обрабатывать.

3) Файл animOnScroll.js ожидает определенное дерево DOM. В частности, он хочет видеть неупорядоченные списки (ul и li). Если вы не возражаете против размещения файла, вы можете внести изменения непосредственно в файл и изменить эти требования.

Все, что вместе, вот раздвоенный codepen, который иллюстрирует эти изменения:

Опять codepen: http://codepen.io/anon/pen/CotJv

Я держу разметку, но обновить JS для работы с ним. Конкретные изменения:

Line 89 (какие элементы, чтобы применить класс CSS анимировать):

this.items = Array.prototype.slice.call(document.querySelectorAll('.grid_4')); 

Ранее:

this.items = Array.prototype.slice.call(document.querySelectorAll('#' + this.el.id + ' > li')); 

Line: 100 (инициализация Кладка) - Здесь мы жестко закодировать имя класса (.grid_4):

itemSelector: '.grid_4', 

Ранее:

itemSelector: 'li' 

Надеюсь, это поможет!