Question

我正在尝试使用masonry和animonscroll.js复制鼓室演示。唯一的区别是我正在使用带有图像的div卡而不仅仅是图像。

这是工作鼓室演示http://jsfiddle.net/Sfmv9/19/light/

这是我的代码：http://codepen.io/macsupport/pen/eghEm

你可以看到我有砌砖工作，但滚动效果的动画无效。我实际上已经试图解决这个问题已经有几个星期，而且无法弄清楚我做错了什么。

这是我的javascript，其余代码在我的codepen链接中。

   $(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

这是一个分叉的代码：http://codepen.io/anon/pen/CotJv

您的codepen看起来有些问题。

1）您的codepen不完整。与您链接的jsfiddle不同，codepen没有所有资源。如果你添加了animOnScroll和animate CSS（我只是从工作小提琴中复制了一个，你可能想要另一个动画）等等，你不会立即抛出错误。

2）jsfiddle页面上引用的animOnScroll.js文件在内部处理imagesLoaded和masonry init。如果你要使用该文件，我建议允许animOnScroll.js继续处理这些文件。

3）animOnScroll.js文件需要某个DOM树。具体来说，它希望查看无序列表（ul和li）。如果您不介意托管文件，可以直接对文件进行更改并更改这些要求。

所有这些在一起，这里是一个分叉的编解码器，用于说明这些变化：

再次，codepen：http://codepen.io/anon/pen/CotJv

我保留你的标记，但更新JS以使用它。具体的变化是：

第89行（应用CSS动画类的元素）：

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

此前：

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

行：100（初始化砌体） - 这里我们硬编码类名（.grid_4）：

itemSelector: '.grid_4',

此前：

itemSelector: 'li'

希望这有帮助！

为什么我的div不能滚动动画？

1 个答案: