我正在尝试将AnimOnScroll.js集成到我的网站中。
我在下一行收到'无法读取属性ID':
this.items = Array.prototype.slice.call( document.querySelectorAll( '.container' + this.el.id + '.grid_4' ) );
我猜我需要在AnimOnScroll中编辑这一行吗?
我的布局是这样的:
<div class="container">
<div class="grid_4"></div>
<div class="grid_4"></div>
<div class="grid_4"></div>
<div class="grid_4"></div>
</div>
通过以下信息,我应该如何编辑上面的js行?
这是完整的JS:
function AnimOnScroll( el, options ) {
this.el = el;
this.options = extend( this.defaults, options );
this._init();
}
AnimOnScroll.prototype = {
defaults : {
// Minimum and a maximum duration of the animation (random value is chosen)
minDuration : 0,
maxDuration : 0,
// The viewportFactor defines how much of the appearing item has to be visible in order to trigger the animation
// if we'd use a value of 0, this would mean that it would add the animation class as soon as the item is in the viewport.
// If we were to use the value of 1, the animation would only be triggered when we see all of the item in the viewport (100% of it)
viewportFactor : 0
},
_init : function() {
this.items = Array.prototype.slice.call( document.querySelectorAll( '.container' + this.el.id + '.grid_4' ) );
this.itemsCount = this.items.length;
this.itemsRenderedCount = 0;
this.didScroll = false;
var self = this;
imagesLoaded( this.el, function() {
// initialize masonry
new Masonry( self.el, {
itemSelector: '.grid_4',
transitionDuration : 0
} );
if( Modernizr.cssanimations ) {
// the items already shown...
self.items.forEach( function( el, i ) {
if( inViewport( el ) ) {
self._checkTotalRendered();
classie.add( el, 'shown' );
}
} );
// animate on scroll the items inside the viewport
window.addEventListener( 'scroll', function() {
self._onScrollFn();
}, false );
window.addEventListener( 'resize', function() {
self._resizeHandler();
}, false );
}
});
},