スライダースライダー:パターン1

■アニメーション付きのWEB部品を、コーディング時の参考にするサンプルなので、アニメーション多めになっています。 ■アニメーション:背景、文字の動き・色、線や枠、キラッと光る、図、SVG画像、時間ごとにレイアウト全体のカラーを切り替えなど。 ■コーディング部品用なので、画像を できるだけ使わずに、できるだけコーディングで作っています。 ※文章や画像は、ダミーデータです。

スライダー進捗アニメーション

■各スライド表示時間の進捗アニメーションが、3種類あります。

スライダー進捗アニメーション

■各スライド表示時間の進捗アニメーションが、3種類あります。 ■スライドに枠の装飾アニメーション

スライダー無限スライド1

■ループ処理:CSSのみ ■画像の拡大処理:画像の拡大CSSを、JSで設定。

スライダー無限スライド2

■ループ処理:Swiper.js ■無限ループするだけだと 何でもないので、スライドごとに順次拡大していくアレンジ。

自由にメイクを楽しんでほしい

大空を羽ばたく鳥のように

自由にメイクを楽しんでほしい

エレガントに

背伸びしてみたいとき

ナチュラルに

自分らしさを出したいとき

大空を羽ばたく鳥のように

自由にメイクを楽しんでほしい

大空を羽ばたく鳥のように

自由にメイクを楽しんでほしい

エレガントに

背伸びしてみたいとき

ナチュラルに

自分らしさを出したいとき

大空を羽ばたく鳥のように

自由にメイクを楽しんでほしい

大空を羽ばたく鳥のように

自由にメイクを楽しんでほしい

エレガントに

背伸びしてみたいとき

ナチュラルに

自分らしさを出したいとき

大空を羽ばたく鳥のように

自由にメイクを楽しんでほしい

大空を羽ばたく鳥のように

自由にメイクを楽しんでほしい

エレガントに背伸びしてみたいとき

ナチュラルに

自分らしさを出したいとき

大空を羽ばたく鳥のように

#PAGE TOP