one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

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

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

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

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

以下の公式サイトからライブラリファイルをダウンロードします。
protonet/jquery.inview · GitHub

今回ダウンロードしたのは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;
    }
}

全ソースはこちら

github.com

関連アプリ・書籍

jQuery入門道場

jQuery入門道場

jQuery レッスンブック jQuery2.X/1.X対応

jQuery レッスンブック jQuery2.X/1.X対応

ああしたい、こう変えたいが手にとるようにわかる CSS基礎

ああしたい、こう変えたいが手にとるようにわかる CSS基礎