Blog

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

2016.03.15Cat:jQuery デザイナー

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

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

↓作ってみたもの

DEMO

コード

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

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

 

参考サイト

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

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
     
  • Launch Cart越境ECカート

Archive

ページTOPへ