-
ID:JUbvuW さんの質問

下記のページのスクロールの動きを再現したいです。
http://www.tsovet.com/shop-collections/
レイヤーが重なっていてそれぞれ動いているように見えるのですが、画面左側の画像が、スクロールすると下から切り替わっていくのがどうやっているのか構造がわかりません。
ページのソースからsectionタグを置いてその中にdivを置いてさらにそのdiv内に画像を読み取りdivのbackground画像と同じ画像を重ねているのではとは思うのですが、HTMLをそのように書いてみても右側の画像が画面上では見えなくなってしまったりとうまく表示されません。
簡単に教えていただけませんか?

みんなの回答 6 件

ID:mQRWxl さんの回答

ID違いますがトピ主です。
このサイトはレスポンシブサイトなのでPCからアクセスして見てなければスクロールは再現されません。
どうぞよろしくお願いします。

ID:YblB0b さんの回答

ソース見てないけど、
この動きは「background-attachment: scroll;」
使ってるんじゃないかな?

ID:MqHcBX さんの回答

それぞれの画像ですが、

左は全て空divの背景にbackground-attachment:fixedで画像が固定されているレイヤー。
右は普通のimgタグ。

よくあるパララックスサイトだけど、左は全て背景画像、なだけですね。

空divだと文法に問題があるので、imgタグで画像を入れているだけだと思います(opacity:0なので、消しても見た目に変化はありませんでした)。

ID:Iknces さんの回答

質問系ってなぜか放置が多いな。ひとことありがとうとか言っといた方がいいのに。

ID:GhCCve さんの回答

トピ主です。
皆様回答ありがとうございます!!
background-attachmentを設定してみて固定画面とスクロール画面を重ねてつくるところまでやってみました。
ですが、右画像の設定がまだうまくいきません。
アドバイス思いつく方いらっしゃいましたらどうぞよろしくお願いします。

ID:aQZfxg さんの回答

時間が無いので細かく見てませんがjQueryとcssのoverflow:hidden;で可能じゃないですか?それぞれのコンテンツをoverflow:hidden;でマスクしてるだけのような気がしますが。

ID:aQZfxg

この動きでレスポンシブ対応か頭を使いますねw

最終更新日:2013-10-21 (4,163 views)

関連するトピックス

ページ上部に戻る