はじめに

スマホサイトでよくあるフリック操作を
flipsnap.jsのプラグインをダウンロードして実現していきます。
公式サイト

flipsnap.jsの特徴

対応ブラウザが幅広い
コンテンツ数が変動しても対応できる
実装が簡単

対応ブラウザ

Mobile

iOS Safari (iOS4+)
Android Browser (Android 2.1+)
Android Firefox Mobile 9.0+
Android Opera Mobile 11.50+
Window8 IE10+

PC

IE9+
Google Chrome
Opera
Firefox
Safari

ダウンロード

公式サイトより、プラグインをダウンロードしてきます。

実装

事前準備

Jqueryと空のhtmlファイルとCSSファイルを用意しました。

公式のサンプルをもとに作成していきます。

HTMLの作成

flick.html


<html>
<head>
<meta charaset="UTF-8" />
<title>フリック機能を試してみよう！</title>
<link rel="stylesheet" type="text/css" href="flipsnap.css">
<script src="jquery-3.2.1.min.js"></script>
<script src="flipsnap.min.js"></script>
<script>
$(function(){
    Flipsnap('.flipsnap');
})
</script>
</head>

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

CSSの作成

flipsnap.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.jsを使用してスマートフォンのフリック操作を実現する