【CSS】jQueryを使って可視領域に入ったオブジェクトをふわっと表示する【HTML】
サイトを開いた時にふわっと表示されるのを見たことないでしょうか。
あれがやりたいと思って色々調べてまいりました。
jquery.inviewが必要です。
https://github.com/protonet/jquery.inview
コード見たほうが早いと思うので貼っつけておきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>css-inview</title>
<meta name="robots" content="noindex">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.inview-master/jquery.inview.js"></script>
</head>
<body>
<div class="contents">
<h1>下にスクロールしていくと画像が可視領域に入ります。</h1>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<section class="fade">
<ul>
<li class="fade-img"><img src="common/img/01.jpg"></li>
<li class="fade-img"><img src="common/img/02.jpg"></li>
<li class="fade-img"><img src="common/img/03.jpg"></li>
</ul>
</section>
</div>
<script>
$(function() {
$('.fade-img').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
console.log(isInView);
if(isInView){
$(this).stop().addClass('fade-stop');
}
else{
$(this).stop().removeClass('fade-stop');
}
});
});
</script>
</body>
</html>
@charset "UTF-8";
body{
background-color: #eee;
}
img {
width: 250px;
height: auto;
}
.contents {
width: 900px;
margin: 0 auto;
}
ul {
list-style-type: none;
}
.fade {
overflow: hidden;
}
.fade li{
margin: 10px 5px 10px 5px;
float: left;
transition: 1.5s;
}
/* 透明度と移動 */
.fade-img{
opacity: 0;
transform: translate(0,60px);
-webkit-transform: translate(0,60px);
}
.fade-stop{
opacity: 1.0;
transform: translate(0,0);
-webkit-transform: translate(0,0);
}
デモはこちら
