Blog

jQeuryで横にはみ出させた要素をフリックでスライドさせる

2016.03.15Cat:jQuery デザイナー
ss

スマホのアプリやサイトでは、横幅が大きく制限されるため、
横並びの要素を意図的にはみ出させて、フリック操作でスライドさせるというUIを度々見かけます。

今回はそちらをjQueryで試しに組んでみました。

↓作ってみたもの

DEMO

コード

今回はスマホで動きが軽くなるように、スライドの動作にCSS3のtransform 3Dを使ってみました。

現状では使い回しが難しい状態なので、
改善できたら、また詳しくご紹介したいと思います。

 

参考サイト

transform:matrix3d()-CSS3リファレンス

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ