jQuery

【jQuery】タッチデバイススナップスクロールflipsnap

September 6, 2018

flipsnap.jsはタッチデバイススナップスクロール。

Getting Started

ダウンロードして読み込む

<script src="flipsnap.js"></script>

HTMLは外側の要素と内側の要素を設定

<div class="viewport">
    <div class="flipsnap">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</div>

CSSを書く

.viewport {
    width: 320px;
    overflow: hidden;
    margin: 0 auto;
    -webkit-transform: translateZ(0); /* Optional: When heavy at iOS6+ */
}

.flipsnap {
    width: 960px; /* 320px(item width) * 3(item count) */
}

.flipsnap:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
}

.item {
    float: left;
    width: 310px;
    font-size: 50px;
    text-align: center;
    padding: 50px 0;
    background: #EFEFEF;
    border: 5px solid #999;
    color: #666;
}

Flipsnap()内部要素のCSSセレクタを使用して呼び出します。