freefuntimes今回は結構難しかった。記事にするか悩んだがなんとか実装できたので書いていきたい。最近のWEBデザインのページを見ていると、スライダー部分に対して、プログレスバーに連動してスライドが切り替わるものが多く、これをswiperでできないかと考えた。今回は下記の記事を応用して作成している。該当記事はこちら円形のプログレスバーを作る知識も必要になるので、CSSの知識がある程度ないと厳しい内容かと思うが、こちらも合わせて解説していければと思う。class="swiper-button-prev"></div></div>上記ソースでは、mySwiper2(任意の名前でOK)のclass名をつけて画像部分のスライダーを作成している。ナビゲーション(左右の丸い矢印部分)も合わせて対応している。これらの点は前回書いた記事の内容と同じである。</div></div>上記ソースでは、mySwiper(任意の名前でOK)のclass名をつけて画像部分のスライダーを作成している。ポイントは画像部分でつけていたmySwiper2と別の名前のclass名をつけることである。class="circle_inner">3</div></div>今回は、ベースとなる円(circle)ベースよりも一回り小さい円(circle_inner)ベースと同じ円の直径の正方形×2(擬似要素で対応)を作成して、CSS側で調整していくことになる。これでHTML側の準備が完了となる。}}下記部分は以前と変わっていないので、解説は省略する。pointer;}ソース自体はそこまで難しい内容ではない。1つ目のポイントは、backgroundのカラーだ。このカラーがデモにあるようなプログレスバーが進行していく部分のカラーにあたる。下記の青色で囲んだ部分になる。自分が実装したい任意のカラーに設定すればよい。2つ目のポイントは、overflowをhiddenにしている点だ。これはこの後、擬似要素を用いて正方形を作成する際にポイントとなってくる部分だ。詳しくは後ほど解説する。3つ目のポイントは、z-indexを1にしている点だ。これもこの後に出てくる、一回り小さい円と正方形2つよりも小さな値を設定することがポイントとなってくる。4つ目のポイントは、positionをrelativeにしておくことだ。この後の正方形を作成するときに関わってくるためである。これでベースの円の準備が整った。3;}擬似要素に対して正方形を作っている。正方形のbackgroundのカラーは、ベースの円で設定した色に近い色でかつ薄めの色を選択するとデザイン的にもよくなるのではないかと思う。横50px)を作るところだ。beforeで作った正方形と、afterで作った正方形の位置も重要になってくる。円の右半分には、afterで作成した正方形の左半分を重ねた位置に配置する。文章だとわかりにくいと思うので、下記の画像を参照してほしい。※見やすいように半透明にしているが、実際は透過していないので注意。あとはこの正方形を回転させて、プログレスバー風に見せるような動きを実装していくことになる。上記のソースで、transform-originの値を指定しているが、これは回転軸をどこにするか決めるために必要な記述になる。この指定をすることで、x軸方向ならびにy軸方向の座標が決定できる。初期値は50%、50%で回転軸が正方形の中心になっているので、この値を変更する必要がある。leftは左端、rightは右端、topは上端、bottomは下端、任意の数値+pxは要素の左上を基準として位置を指定する。25pxを指定している。画像にすると下記のイメージになる。これで擬似要素は準備ができた。#c3512f;}こちらもそこまで難しくない。上下左右中央になるように直径が45pxの円を配置した。テキストを中に入れた時に、上下左右中央に配置されるようにも設定している。これで、小さい円がベースの円の上並びに2つの正方形のレイヤーの上に重なったため、見た目がボーダーのような円ができる。ちなみに、この円がいらない場合、円グラフの12時の針から割合がどんどん増えて1周していくような見た目になる。}}animationやkeyframesの詳しい使い方は解説すると長くなるので省略させていただく。swiper-slide-thumb-activeのclassは、スライダーがアクティブになっている状態の時に指定できるもので、swiperスライダーに元々つけられているclassだ。このアクティブになっているときのbeforeとafterに対して、animationを使って回転させるようになっている。beforeについて5秒かけて(5s)、circleBefore(keyframesで指定した内容を)、アニメーション開始から終了まで一定に変化させ(linear)、アニメーションが終わった状態を維持させる(forwards)、という内容だ。circleBeforeのkeyframesでは、0%〜50%までは回転しないように設定されているので、実際は2.5秒〜5秒の間で正方形が0度〜180度回転するアニメーションが発火される。これが左半分のプログレスバーを実装する部分にあたる。afterについて5秒かけて(5s)、circleAfter(keyframesで指定した内容を)、アニメーション開始から終了まで一定に変化させ(linear)、アニメーションが終わった状態を維持させる(forwards)、という内容だ。#c3512fで360度の場所まで一気に回転するアニメーションが発火される。カラーを設定する必要があるのかというと、回転する順番を元に説明していければと思う。1.右側のafterの正方形が0〜2.5秒かけて180度回転する。右側のafterの正方形が回転した時、これまで正方形で隠れていたベースの円が見えた状態になる。これがプログレスバーの右半分(時計で例えると0時〜6時まで)にあたる。右側のafterの正方形が回転した時、左半分の円に重なってしまう。このためにbackgroundでカラーを正方形と同じ色にしている(厳密には2.のステップでbackgroundが別の色になるので元に戻すという理由になる)。2.左側のbeforeの正方形が2.5秒〜5秒かけて180度回転する。同時に右側のafterの正方形が2.5秒直後〜5秒かけて一気に360度まで回転する。左側のbeforeの正方形が回転した時、これまで正方形で隠れていたベースの円が見えた状態になる。これがプログレスバーの左半分(時計で例えると6時〜12時まで)にあたる。左側のbeforeの正方形が回転した時、右半分の円に重なってしまうが、z-indexの重なり順の関係で影響は出ないようになっている。右側のafterの正方形が2.5秒直後〜5秒かけて一気に360度まで回転したときは、backgroundのカラーをベースの円と同じ色にする必要がある。テキストだと複雑なので、画像も作ってみた。下記のようなイメージになる。これでCSSは実装完了となる。})}前回の記事と同じソース部分の解説は省略するので、読んでいない方は下記の記事を読んでから読み進めることをおすすめする。5000の秒数と、下記のソース部分だ。},},今回は、5秒経過(delay)したら、0.3秒(speed)かけてスライダーが切り替わるようにページを実装している。ここでちょっと考えることが出てくる。初めにページを読み込んだときに、1枚目から2枚目にスライダーが切り替わる時間は何秒であるかということだ。答えは、ページ読み込み時のspeedの0.3秒が計算されなくなるので、実際は5秒になる。ここからまた、考えてほしい。今度は2枚目から3枚目にスライダーが切り替わるときは何秒になるだろうか。先ほどの考えに当てはめると、speedの0.3秒が計算されることになるので、5.3秒になる。これは3枚目以降も同様の秒数で切り替わる。いうことは、ページを読み込んでからスライダーが1枚目から2枚目に切り替わる時間の5秒と、2枚目以降の切り替わる5.3秒には、0.3秒の差が生じていることがわかる。この0.3秒という差を埋めるために、先程あげたソースを記述している。使い方は下記リンクでも紹介されている。0)が4.7秒経過(delay)したら切り替わるという内容である。このrealIndexがなぜ0という値になっているのかというと、JavaScriptでは初めの配列(インデックス)の番号が0から始まるようになっているので、初めのスライダー1枚目に対して、JavaScript側では0という番号に対応するようになっている。0とすることで、2枚目以降のスライドに対して指定することができるのだ。詰め込んではみたが、デメリットもあることだけはお伝えしておきたい。スライドの数があまりにも多くなった場合は、このやり方はおすすめできない。いうと、毎回HTML側にサムネイル部分のソースを記述する手間が増えてしまうためだ。JavaScript側でもサムネイルの数を調整したり、CSSでも数が多くなったときの調整が意外と大変になってくる。用途に応じて使ってみることをおすすめする。(2)人気ブログランキングこのサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。