スライダースライダー全幅1

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

スライダー背景：ゆっくり右スクロール

■アイキャッチ文
　・時間差でフェードIN　・スライドごと：白字ベース／黒字ベース　・文字色が金色にグラデーションスライド
　・金色の下線がスライドIN ■羽／草の装飾
　・ヒラヒラと揺れるようにアニメーション ■ページネーション
　ただのボタンでなく、スライドNoと、各スライド表示時間の進捗アニメーションを表示。

装飾 草

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

ナチュラルに自分ら しさを出したいとき

装飾 羽

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

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

装飾 羽

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

ナチュラルに自分ら しさを出したいとき

装飾 羽

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

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

装飾 羽

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

ナチュラルに自分ら しさを出したいとき

装飾 草

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

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

装飾 草

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

ナチュラルに自分ら しさを出したいとき

装飾 羽

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

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

装飾 羽

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

ナチュラルに自分ら しさを出したいとき

装飾 羽

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

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

装飾 羽

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

ナチュラルに自分ら しさを出したいとき

装飾 草

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

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

slide.01slide.02slide.03slide.04slide.05slide.06

スライダー背景：ゆっくり左スクロール

■アイキャッチ文
　・時間差でフェードIN　・スライドごと：白字ベース／黒字ベース　・文字色が桃色にグラデーションスライド
　・桃色の下線がスライドIN ■羽／の装飾
　・ヒラヒラと揺れるようにアニメーション ■ページネーション
　ただのボタンでなく、スライドNoと、各スライド表示時間の進捗アニメーションを表示。

装飾 草

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

ナチュラルに自分ら しさを出したいとき

装飾 羽

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

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

装飾 羽

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

ナチュラルに自分ら しさを出したいとき

装飾 羽

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

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

装飾 羽

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

ナチュラルに自分ら しさを出したいとき

装飾 草

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

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

装飾 草

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

ナチュラルに自分ら しさを出したいとき

装飾 羽

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

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

装飾 羽

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

ナチュラルに自分ら しさを出したいとき

装飾 羽

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

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

装飾 羽

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

ナチュラルに自分ら しさを出したいとき

装飾 草

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

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

slide.01slide.02slide.03slide.04slide.05slide.06

スライダー背景：ゆっくりズームOUT

■アイキャッチ文
　・下からアコーディオン表示　・スライドごと：白字ベース／黒字ベース　・文字色が金色にグラデーションスライド
　・金色の下線がスライドIN
 ■羽／草の装飾
　・ヒラヒラと揺れるようにアニメーション ■ページネーション
　ただのボタンでなく、スライドNoと、各スライド表示時間の進捗アニメーションを表示。

装飾 草

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

ナチュラルに自分ら しさを出したいとき

装飾 羽

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

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

装飾 羽

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

ナチュラルに自分ら しさを出したいとき

装飾 羽

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

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

装飾 羽

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

ナチュラルに自分ら しさを出したいとき

装飾 草

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

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

装飾 草

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

ナチュラルに自分ら しさを出したいとき

装飾 羽

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

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

装飾 羽

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

ナチュラルに自分ら しさを出したいとき

装飾 羽

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

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

装飾 羽

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

ナチュラルに自分ら しさを出したいとき

装飾 草

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

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

slide.01slide.02slide.03slide.04slide.05slide.06

スライダー背景：ゆっくりズームIN

■アイキャッチ文
　・上からアコーディオン表示　・スライドごと：白字ベース／黒字ベース　・文字色が桃色にグラデーションスライド
　・桃色の下線がスライドIN ■羽／草の装飾
　・ヒラヒラと揺れるようにアニメーション ■ページネーション
　ただのボタンでなく、スライドNoと、各スライド表示時間の進捗アニメーションを表示。

装飾 草

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

ナチュラルに自分ら しさを出したいとき

装飾 羽

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

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

装飾 羽

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

ナチュラルに自分ら しさを出したいとき

装飾 羽

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

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

装飾 羽

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

ナチュラルに自分ら しさを出したいとき

装飾 草

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

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

装飾 草

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

ナチュラルに自分ら しさを出したいとき

装飾 羽

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

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

装飾 羽

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

ナチュラルに自分ら しさを出したいとき

装飾 羽

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

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

装飾 羽

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

ナチュラルに自分ら しさを出したいとき

装飾 草

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

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

slide.01slide.02slide.03slide.04slide.05slide.06
#PAGE TOP