-
1:ID:5sBMDw · 3週間前

このスライダーの作り方がわからない

https://infcurion.digital/

このサイトのスライダー切り替え時の挙動ですが、
幅が100%から0%になる時に、
背景画像が左じゃなく右起点になっていると思うのですが、
cssを見てもbackground-positionはcenterでした。

これはどうやって右起点にしているのでしょうか;

わかる方教えていただきたいです。

2 件の回答

2:ID:GnyJr3 · 3週間前

背景画像は右起点にじゃないぞ。divを3つ重ねるんだ。
まず、背景用div。backgroundで背景にしたい画像を指定して、widthを105vwにする。このdivを最初left-3vw(厳密にはtranslate3d(-3%, 0, 0))からleft0vw(厳密にはtranslate3d(0, 0, 0))にしてtransitionでアニメーションを実装する。これで左から右に画像がゆっくり流れる動き。
次に、この画像自体の横幅を固定するdiv。position:absoluteでtop0、left0。width100vw、height100vhでフルスクリーンに固定。これを置かないと3つ目のdivのwidth操作ができなくなる。
最後に、横幅可変のdiv。このdivのwidthとz-indexを操作して、切り替えのアニメーション。
親要素の幅を動かしつつ、子要素の幅を固定することでマスクアニメーションができる。

3:ID: · 3週間前

なるほど、ありがとうごござます!

コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る