【28：jquery.inview】：パララックス（要素出現） | JQueryプラグイン & CSSでPinterest風スタイル

f:id:seintoseiya:20150730012259p:plain
プロジェクトNo.28：jquery.inview - DEMO

パララックス（要素出現）も以前自作しましたが、プラグインがあったので使ってみたいと思います。
また、せっかくなのでCSSでPinterest風に表示させてみました。

ライブラリのダウンロード

以下の公式サイトからライブラリファイルをダウンロードします。
GitHub - protonet/jquery.inview: A jQuery plugin that adds a bindable 'inview' event for detecting when an element is scrolled into view.

今回ダウンロードしたのはjquery.inview.min.jsです。
この中から使うのは以下のファイル。

jquery.inview.min.js

以下のjqueryバージョンで動作が確認できました。

jquery1.10.1.min.js

基本的な使い方

HTML

まずはJSを呼び出し。

<script src="./js/jquery1.10.1.min.js"></script>
<script src="./js/jquery.inview.min.js"></script>

出現させたい要素を記述します。

<div id="columns">
    <div class="pin1">1</div>
    <div class="pin2">2</div>
    <div class="pin3">3</div>
</div>
<!-- 省略 -->

JavaScript

透明度の初期値を0に設定

$(function() {
    $('#columns > div').css('opacity', 0);
    // 省略
});

onでinviewイベントを実行

$(function() {
    $('#columns > div').css('opacity', 0);
    $('#columns > div').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
        // 処理
    });
});

コールバック関数の引数

isInView
- true:要素が表示域に入ったとき
- false:要素が表示域から外れたとき

visiblePartY
- left:要素の左側だけが表示域に入ってるとき
- right:要素の右側だけが表示域に入ってるとき
- both:要素の左右両方が表示域に入ってるとき

visiblePartY
- top:要素の上側だけが表示域に入ってるとき
- bottom:要素の下側だけが表示域に入ってるとき
- both:要素の上下両方が表示域に入ってるとき

DEMOでは要素が表示域に入った時に透明度を1までアニメーションして、
要素が表示域から外れると透明度を0に戻す様になっています。

$(function() {
    $('#columns > div').css('opacity', 0);
    $('#columns > div').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
        if (isInView) {
            $(this).stop().animate({opacity:1}, 300);
        }
        else {
            $(this).stop().animate({opacity: 0}, 300);
        }
    });
});

CSS

CSSだけでPinterest風に表示

さて、CSSだけでPinterest風に表示させる方法ですが、
CSS3のcolumnというプロパティを使う。
比較的新しいプロパティなのでベンダープレフィックスを用意して、
タブレットとスマホ対応はmediaクエリを使います。

#columns {
    position: relative;
    -webkit-column-count: 4;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 4;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-count: 4; /* 何列のカラムを作るか */
    column-gap: 10px; /* カラム間のスペース */
    column-fill: auto; /* カラムをどういう風に配置していくか|balance はカラム同士の高さを均等に, autoは最初のカラムから順番に突っ込んでいく */
    text-align: center;
    overflow: hidden; /* カラム落ち防止 */
}
@media screen and (max-width: 980px) {
    #columns {
        -webkit-column-count: 3;
        -webkit-column-fill: auto;
        -moz-column-count: 3;
        -moz-column-fill: balance; 
        column-count: 3;
        column-fill: auto;
    }
}

@media screen and (max-width: 480px) {
    #columns {
        -webkit-column-count: auto;
        -moz-column-count: auto;
        column-count: auto;
    }
}