jQeuryで横にはみ出させた要素をフリックでスライドさせる
スマホのアプリやサイトでは、横幅が大きく制限されるため、
横並びの要素を意図的にはみ出させて、フリック操作でスライドさせるというUIを度々見かけます。
今回はそちらをjQueryで試しに組んでみました。
↓作ってみたもの
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | $(function() { //スライド初期設定 var targetSelector = "ul", childrenSelector = "ul li", $target = $(targetSelector), $children = $(childrenSelector); $children.css({ "width": $children.eq(0).width() + "px" }); $target.wrap("<div class='slideWrapper' />"); var $wrapper = $target.closest(".slideWrapper"); $target.css({ "width": $children.eq(0).outerWidth() * $children.size() + "px", "transform": "matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 1,0,0,1)" }); $wrapper.css({ "padding": "0 15px", "margin": "0 -15px", "overflow": "hidden" }); //クリック・タップ時 or ドラッグ開始時の動作 $target.on(EVENT.TOUCH_START, function(e){ e.preventDefault ? e.preventDefault() : e.returnValue = false var scale = $target.width / $target.clientWidth, //レスポンシブでのCanvasの縮小率を取得 cx = e.originalEvent.pageX ? e.originalEvent.pageX : e.originalEvent.changedTouches[0].pageX, prevTransform = $target.get(0).style.transform; prevTransform = prevTransform.replace("matrix3d(", ""); prevTransform = prevTransform.replace(")", ""); prevTransform = prevTransform.split(","); $target.data = { prevCX: cx, //移動前のマウスの横位置 prevTranslateX: Number(prevTransform[12]) } $target.css({ "transition": "none" }); }); //ドラッグ中の操作 $target.on(EVENT.TOUCH_MOVE, function(e){ if($target.data.prevCX) { e.preventDefault ? e.preventDefault() : e.returnValue = false; var cx = e.originalEvent.pageX ? e.originalEvent.pageX : e.originalEvent.changedTouches[0].pageX; $target.css({ "transform": "matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, " + ($target.data.prevTranslateX + (cx - $target.data.prevCX)) + ",0,0,1)" }); } }); //ドラッグ終了時の操作 $target.on(EVENT.TOUCH_END, function(e){ e.preventDefault ? e.preventDefault() : e.returnValue = false; if($target.data.prevCX) { $target.css({ "transition": "0.2s" }); var cx = e.originalEvent.pageX ? e.originalEvent.pageX : e.originalEvent.changedTouches[0].pageX; if($target.data.prevTranslateX + (cx - $target.data.prevCX) > 0) { $target.css({ "transform": "matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1)" }); } if(($target.data.prevTranslateX + (cx - $target.data.prevCX)) - ($wrapper.outerWidth() - $target.outerWidth() - 15) < 0) { $target.css({ "transform": "matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, " + ($wrapper.outerWidth() - $target.outerWidth() - 15) + ",0,0,1)" }); } $target.data.prevCX = null; //移動を無効に } }); }); |
今回はスマホで動きが軽くなるように、スライドの動作にCSS3のtransform 3Dを使ってみました。
現状では使い回しが難しい状態なので、
改善できたら、また詳しくご紹介したいと思います。
参考サイト
Author Profile
SHARE
