スライド
geralt / Pixabay

 トップページにJavaScriptなしで動くスライダーを設置しました。どんな感じになったかは、トップページをご覧ください。

広告

どうやって作ったか

 Cryout Serious Sliderから出力されていたスライダー用のHTMLを元に改造したHTMLで基礎を設定し、あとはCSSアニメーションを駆使しました。
 最近は便利になったもので、これだけでトップページにあるスライダーの機能を実装できました。
 さらに細かくしようと思うなら、たぶんJavaScriptがいります。

どんな感じのスライダーか

最初はオートプレイ

 最初はアニメーションで、自動的にスライドが移り変わるようになっています。
 ただし、どれかひとつのスライダーを下のシークバーか矢印から選択して表示した場合、アニメーションは停止します。

ホバリングでアニメーションを停止

 スライダーの上にカーソルを合わせると、アニメーションは停止します。

表示スライダーの選択も可能

 表示スライダーを下のボタン、あるいはスライダー上の矢印から選択することができます。
 ただし、選択した場合、自動的にスライダーが移り変わる状態に戻ることはたぶんないと思います。

スライダーの移り変わりはフェードイン・フェードアウト方式

 opacityを使ったフェードイン・フェードアウト方式です。

オートプレイをスライダー選択後もしない理由

 オートプレイも、手間はかかりますができました。
 しかし、スライダーを選んだなら閲覧するかたがたはそのまま遷移するか、ページを下に移動させるだろうと思ったので、オートプレイを継続させる理由は特になく、このかたちになりました。
 それに伴い、ユーザが選んだスライダーが固定されるようになっています。人それぞれの好みかもしれませんが、こっちのほうがもしかするとユーザビリティ的にはいいかな? と思い、そこはそのままにしています。というか、CSSだけだとそれ以上はちょっと難しかった…。

その他やり残していること

 こんな感じでスライダー自体は整ったのですが、レスポンシブ対応など、細かいところを設定しきれていません。順次整える予定です。

広告

関連コンテンツと広告

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA