jQueryを使ったカルーセルスライダーではなく、ゆっくり右から左に画像が流れていくスライダーを作る場合、今まで「Slick」とかのライブラリ系のjQueryを使ってたんですけど、CSSのアニメーションだけでそれっぽいのがつくれたので、備忘録としてまとめておきます。
スライダーのイメージを効果音で言うなら通常のカルーセルが「サッサッサッ」と変わるなら、今回のは「サーーーッ」と流れていくイメージです。
余計にわかりにくくなったという方は下記のデモを見てください。
DEMO
まずは横に長い画像を用意
「repeat-xでリピートされている背景画像が右から左にひたすら流れていく」という構造になります。
今回はこんな感じの画像を用意しました。
ポイントとしては、繰り返しで表示させても違和感ないような画像にしましょう。
使用画像：ぱくたそ
CSSのアニメーションKeyframeを作成
画像は背景画像を使うので、CSSで読み込みます。
今回は「画像を流す」「上にテキストを入れる」「テキストが目立つように画像にオーバーレイ（うっすら色）をつける」って事をするって事で、HTMLはこんな感じで
【HTML】
1 | <div class="jp_slide_img_wrapper"> |
2 | <div class="jp_slide_img_overlay"> |
3 | <div class="main_catch"> |
5 | <img src="img/logo.png" alt="logo"> |
7 | <h1>メインキャッチを入れたりして</h1> |
CSS
5 | background-image: url('../img/main-bg.jpg'); |
6 | background-repeat: repeat-x; |
7 | background-size: cover; |
8 | background-position: 0 0; |
9 | animation-name: slide_img; |
10 | animation-duration: 200s; |
11 | animation-iteration-count: infinite; |
12 | animation-timing-function: linear; |
17 | background-position: -10000px 0; |
28 | background-color: rgba(46, 36, 100, 0.4); |
36 | transform: translateY(-50%) translateX(-50%); |
37 | -webkit- transform: translateY(-50%) translateX(-50%); |
44 | .main_catch .logo img { |
CSSのポイントは「jp_slide_img_wrapper 」にあてている
・高さを取得するために「height: 100vh;」
・背景画像をリピートするための「background-repeat: repeat-x;」
・アニメーションの始点と終点のための「background-position: 0 0;」
・「 animation-iteration-count: infinite;」で無限にアニメーションを繰り返す。
そして、Keyframeでは「background-position: -10000px 0;」としています。
これで、backgroundの位置が0〜−10000pxと横に動くアニメーションが出来上がります。
画像の長さとかで判断して「animation-duration」をいじってスピード感を調整してください。
今の設定は「200s（200秒）で10000px動く」ってなっています。
もう一回デモ置いておきます。
DEMO
サクッと画像に動きをつけたい場合におすすめ
弱点としては、画像が1つ1つと分かれていないので、個別にリンクを張ったりする事ができない事です。
使用用途としては、今回のデモみたいなメインビジュアルにサクッとアニメーションを追加したいって感じの時ですかね？今回は以上です。
参考サイト
