Studio
Happyvalley

舞踏派
スライダー

スワイプ対応スライダーを
ネイティブJSで開発。

image: 舞踏派スライダー
Swipe Slider

舞踏派スライダーはスワイプで舞うようにスライド。

2021/02/10

概要

スワイプスライダーをCSS TranscormとネイティブJavascriptで開発

機能の説明

画像の縦横比はフリー
  • ・画像の縦横比はフリーです。どのような比率でもサイズでも実装できます。
    ・スワイプでスクロールできます。
    ・シンプルにしたかったので左右の矢印ボタン以外は実装してません。
    ・面倒だったのでプラグイン化もしてません。(汗)
    ・一応初期設定でオートプレイも設定できます。

    舞踏派スライダー基礎:
    https://labo.studio-happyvalley.com/swipeSlider/def/

技術仕様

  • しくみは、touchmove,mousemoveでリアルタイムに座標を取得しCSSのtransreteでその座標へ移動させ(この移動はアニメーションは未使用)、touchend,mouseupで画像幅ごとの座標へtransitionでアニメーションさせています。
    JSだとpositon値を使用しますがCSS3なので(MDNによると)デカルト座標とやらを使用するそうです。そのため慣れないと、両者がごっちゃになります。

https://studio-happyvalley.com/wp/wp-content/uploads/2021/02/swipeslider_fig_1.png

いやいや、ソールライター展より前から傘に興味はありましたよ。

https://studio-happyvalley.com/wp/wp-content/uploads/2021/02/swipeslider_fig_2.png

むか~し制作したスライダーはJSでアニメーションしてました。
デザインもコテコテです。

『舞踏派スライダー』関連のお薦め

このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら