2016-10-31 14 views
0

this example(クリックしてクリックしてください)のように、ページの読み込み時にアニメートしたいと思います。 使用同位体プラグイン初期ページの読み込み時のアニメーション(同位体)?

var $container = $('.masonry-container').isotope({ 
    itemSelector: '.masonry', 
    masonry: { 
    percentPosition: true, 
    columnWidth: '.masonry' 
    }, 
    transitionDuration: '2.4s' 
}); 
// reveal all items after init 
var iso = $container.data('isotope'); 
$container.isotope('reveal', iso.items); 

はどのようにして、ページの読み込みにアニメーションを実行しますか? THX!

答えて

0

完了!使用wow.js + animate.css コード

setTimeout(function() { 

var $grid = $('.masonry-container').imagesLoaded(function() { 

    $grid.isotope({ 
    itemSelector: '.masonry', 
     percentPosition: true, 
     columnWidth: '.masonry' 
    }); 
}); 

    $(".hide-masonry").show(); 

},3000); 

new WOW().init(); 

とクラスを追加しますが、動的にロードするためのブロック:<div class="col-xs-12 col-sm-4 col-md-2 masonry nopadding wow zoomIn animated" wow-data-duration="<?echo $i;?>s" data-wow-delay="<?echo $i;?>00ms">

関連する問題