下記のページのスクロールの動きを再現したいです。
http://www.tsovet.com/shop-collections/
レイヤーが重なっていてそれぞれ動いているように見えるのですが、画面左側の画像が、スクロールすると下から切り替わっていくのがどうやっているのか構造がわかりません。
ページのソースからsectionタグを置いてその中にdivを置いてさらにそのdiv内に画像を読み取りdivのbackground画像と同じ画像を重ねているのではとは思うのですが、HTMLをそのように書いてみても右側の画像が画面上では見えなくなってしまったりとうまく表示されません。
簡単に教えていただけませんか？
みんなの回答 6 件
ID違いますがトピ主です。
このサイトはレスポンシブサイトなのでPCからアクセスして見てなければスクロールは再現されません。
どうぞよろしくお願いします。
ソース見てないけど、
この動きは「background-attachment: scroll;」
使ってるんじゃないかな？
それぞれの画像ですが、
左は全て空divの背景にbackground-attachment:fixedで画像が固定されているレイヤー。
右は普通のimgタグ。
よくあるパララックスサイトだけど、左は全て背景画像、なだけですね。
空divだと文法に問題があるので、imgタグで画像を入れているだけだと思います（opacity:0なので、消しても見た目に変化はありませんでした）。
質問系ってなぜか放置が多いな。ひとことありがとうとか言っといた方がいいのに。
トピ主です。
皆様回答ありがとうございます！！
background-attachmentを設定してみて固定画面とスクロール画面を重ねてつくるところまでやってみました。
ですが、右画像の設定がまだうまくいきません。
アドバイス思いつく方いらっしゃいましたらどうぞよろしくお願いします。
時間が無いので細かく見てませんがjQueryとcssのoverflow:hidden;で可能じゃないですか？それぞれのコンテンツをoverflow:hidden;でマスクしてるだけのような気がしますが。
関連するトピックス