SHIDEN DESIGN BLOG

thumnail_20170519

格子状に分割した画像が上下にスライドしながら切り替わるスライダーを作ってみた

SponsorLink

格子状に分割した画像を、上下にスライドさせて次の画像を表示させるスライダーを作ってみました。
 
CSSのclip-pathについて記事にしようと思って、面白いデモが作れないかとアレコレやっていたのですが、気が付いたらスライダーが出来上がっていました。
なので、少し粗削りな部分はありますが、コードとサンプル、簡単な解説も載せておきますので、もし需要があれば、自由にコピペしたり改変して使ってください。
 

 

 

 

 
 
 

解説

 
 
 
全部を説明するとかなり長くなりますので、要点だけの説明とさせていただきます。
全体としてどんな処理を行っているのかについてですがslide_innerでラップしたimgタグと、2つのspanタグを画像を一番上にして重ねています。
 
spanタグのback-groundは、表示中の画像になるようにjsで処理しています。

image_20170519_01
 
 
次に、重ねたspanタグが格子状になるように引いたpathをclip-pathの値に指定してクリッピングしています。

image_20170519_02
 
 
あとはslide_innerを重ねて、今回のデモでは表示から4秒後に、一番上に表示されているslide_innerのimgのopacityを0にし、表示から5秒後に、クリッピングしたspanタグをそれぞれ上下に移動させることで、次の画像を表示させていきます。

image_20170519_04
 
 
重なり順はslide_innerにshowとsplitいうz-indexを指定したクラスを与えて制御していますのでjsの主な処理は、背景の指定とクラスの切り替えです。
 
 
 

clip-pathについて

 
 
 
本当はこっちをメインの記事を考えていたのですが、それはまた別の機会にするとして。今回のデモのようにpolygonで設定したさいの値がどうなっているかだけ、簡単に説明しておきます。
 

 
最初のポイントをx軸とy軸で設定します。
,で区切って次のポイントを設定してを繰り返します。
 
要素の左上のを0として、右方向にx軸の正の値、左方向に負の値、下方向にy軸の正の値、上方向に負の値となります。

image_20170519_06
 
 
文字で説明するよりも、実際にいじってみた方が理解しやすいと思うので、画像をクリッピングするのに便利なジェネレーターを紹介しておきます。
ただし、このジェネレーターでは負の値を入力出来ません。
 

 
 

SponsorLink

Related Articles