[CSS] フォーカス・カルーセル

2024/09/01

CSS Javascript template Tool

t f B! P L
eyecatch ホームページでよく使われるカルーセル(横スライド)は、機能やデザインが多種多様になってきています。 もちろん、ホームページのクオリティにも大きく影響するため、良い感じに使えるカルーセルを模索しています。 今回は、フォーカス・カルーセルという、複数ある画像やコンテンツの中から中心の1つをフォーカスピックアップして見せて、それ以外はボカして表現するようにすることで、 少し印象深く、よりターゲットコンテンツに注目しやすくなる機能のカルーセルです。 githubにもアップしているので、cloneしてお好きにお使いください。

デモ

githubリンク

https://github.com/yugeta/focus_carousel

あとがき

今度作るホームページでこのカルーセルを使おうと思って作ってみました。 どこかで見かけたら思い出してやってください。 実は現時点で少しバグがありまして、無限ループ処理の、エレメントを移動させるJavascriptの処理で、カルーセル表示がガクついてしまいます。 どうやって解消しようか悩み中なんですが、とりあえず、見えるからいいや・・・という程度で簡易ロンチしてしまいました。 あと、ページネーション機能や、移動ボタンなど、カルーセルとして必要な機能はまだ足りていないんですが、その辺は力技で追加すると思います。 ※後程アップデートしようと予定しています。 とりあえず、いろいろなカルーセルを作りためて置こうかなっと!

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ