MASATAKA KIMURA BLOG

スワイプ

ソースコードの一部

[プログラミング言語]
JavaScript

[概要]
汎用目的でヘッダーバナーのスワイプ機能を作りました。

[制作期間]
・1週間

[特徴]
バナーを左右にスワイプでき、タップ(またはクリック)するとリンク先へ移動します。

[対応デバイス]
PC・iPad・iPhone・Android

[工夫したところ]
・大画面からモバイルまでひとつのスクリプトでリサイズを完結しています。
・勢いをつけたときの加速度を計算して「投げる」操作感を意識しています。
・納品後、クライアント様側でがカンタンにバナーの追加や削除ができる設計にしています
・後からのサイズ変更や自動再生の有無、タイマー秒数などもセッティング可能。
・ひとつのコードでマルチデバイスの条件に対応。

[デモ]
http://kimura-webdesign.jp/blog/demo/javascript/swipe/