【CSS】jQueryを使って可視領域に入ったオブジェクトをふわっと表示する【HTML】

2017年2月19日

サイトを開いた時にふわっと表示されるのを見たことないでしょうか。あれがやりたいと思って色々調べてまいりました。

jquery.inviewが必要です。 https://github.com/protonet/jquery.inview

コード見たほうが早いと思うので貼っつけておきます。

    
    css-inview
    
    
    
    

    下にスクロールしていくと画像が可視領域に入ります。
    ↓
    ↓
    ↓
    ↓
    ↓
    ↓
    ↓
    ↓
    ↓
    ↓
    ↓
    ↓
    
    
        
        
        
    
    

$(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');
        }
    });
});

@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);
}

デモはこちら