概要
CSSのtransform を使ってスライダーを制作しました。
CSSのtransform を使ってスライダーを制作しました。
・画像の縦横比はフリーです。どのような比率でもサイズでも実装できます。
・スワイプでスクロールできます。
・シンプルにしたかったので左右の矢印ボタン以外は実装してません。
・面倒だったのでプラグイン化もしてません。(汗)
・一応初期設定でオートプレイも設定できます。
しくみは、touchmove,mousemoveでリアルタイムに座標を取得しCSSのtransreteでその座標へ移動させ(この移動はアニメーションは未使用)、touchend,mouseupで画像幅ごとの座標へtransitionでアニメーションさせています。JSだとpositon値を使用しますがCSS3なので(MDNによると)デカルト座標とやらを使用するそうです。そのため慣れないと、両者がごっちゃになります。特に難しいことはしてませんのでコードもシンプルです。
スライダーも最近は使っているサイトが少なくなってきました。
増えているのは背景に動画サイトでしょうか。
スクロールでアニメーションさせるのも最初はいいけど
なんかうるさいですからね。
シンプルなのが一番でしょうか。
いやいや、ソールライター展より前から傘に興味はありましたよ。
以前制作したスライダーはJSでアニメーションしてました。