Studio
Happyvalley

ふんわり
変わる
スライダー

CSSでアニメーション

image: ふんわり変わるスライダー
Swipe Slider

順番待ちが長くてもスマートにスライド。

概要

  • CSSのtransform を使ってスライダーを制作しました。

機能の説明

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

技術仕様

  • しくみは、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でアニメーションしてました。

『ふんわり変わるスライダー』関連のお薦め

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