トップページにJavaScriptなしで動くスライダーを設置しました。どんな感じになったかは、トップページをご覧ください。
広告
どうやって作ったか
Cryout Serious Sliderから出力されていたスライダー用のHTMLを元に改造したHTMLで基礎を設定し、あとはCSSアニメーションを駆使しました。
最近は便利になったもので、これだけでトップページにあるスライダーの機能を実装できました。
さらに細かくしようと思うなら、たぶんJavaScriptがいります。
どんな感じのスライダーか
最初はオートプレイ
最初はアニメーションで、自動的にスライドが移り変わるようになっています。
ただし、どれかひとつのスライダーを下のシークバーか矢印から選択して表示した場合、アニメーションは停止します。
ホバリングでアニメーションを停止
スライダーの上にカーソルを合わせると、アニメーションは停止します。
表示スライダーの選択も可能
表示スライダーを下のボタン、あるいはスライダー上の矢印から選択することができます。
ただし、選択した場合、自動的にスライダーが移り変わる状態に戻ることはたぶんないと思います。
スライダーの移り変わりはフェードイン・フェードアウト方式
opacityを使ったフェードイン・フェードアウト方式です。
オートプレイをスライダー選択後もしない理由
オートプレイも、手間はかかりますができました。
しかし、スライダーを選んだなら閲覧するかたがたはそのまま遷移するか、ページを下に移動させるだろうと思ったので、オートプレイを継続させる理由は特になく、このかたちになりました。
それに伴い、ユーザが選んだスライダーが固定されるようになっています。人それぞれの好みかもしれませんが、こっちのほうがもしかするとユーザビリティ的にはいいかな？ と思い、そこはそのままにしています。というか、CSSだけだとそれ以上はちょっと難しかった…。
その他やり残していること
こんな感じでスライダー自体は整ったのですが、レスポンシブ対応など、細かいところを設定しきれていません。順次整える予定です。