ページスクロール時に要素をふわっと出すjQueryのプラグイン「jquery.inview.js」
ダウンロードはこちらから
jquery.inview.jsまたはjquery.inview.min.jsを入手
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/js_file/jquery.inview.min.js"></script>
上移動とフェードインの場合 HTML
<div id="other1">
<p>other</p>
<div class="divBox3 divMove"><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/680x220.jpg"></a></div>
<div class="divBox3 divMove"><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/680x220.jpg"></a></div>
<div class="divBox3 divMove"><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/680x220.jpg"></a></div>
</div><!--/other-->
css
.divBox3 {
float: left;
width: 33.3%;
padding-bottom: 18px;
text-align: center;
transition: .8s;
}
.divMove{
opacity: 0;
transform: translate(0,60px);
-webkit-transform: translate(0,60px);
}
.move{
opacity: 1.0;
transform: translate(0,0);
-webkit-transform: translate(0,0);
}
設定js
//inview オプション -------------------------------------
$(function() {
$('.divMove').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
if(isInView){
$(this).stop().addClass('move');
}
else{
$(this).stop().removeClass('move');
}
});
});
elseの部分を外すと初めの１回だけ動作する
