kdcsライブラリー

ページスクロール時に要素をふわっと出す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の部分を外すと初めの１回だけ動作する