-
ID:nw/2RS さんの質問

自動じゃなくてスクロール値に合わせて背景画像をクロスフェードさせることってできるの?
取り敢えず、具体的な方法論はさておき、技術的に可能なのかお聞きしたいっす。

みんなの回答 3 件

ID:bSjEDq さんの回答

出来るししてるサイトが多いだろ

ID:WT1oGr さんの回答

できますし、実装難易度も簡単ですね。

ID:nw/2RS さんの回答

パッと切り替わるんじゃなくて、少しずつ互いにフェードアウト、フェードインして切り替わる感じなんですが…
具体的に実装しているサイトってどこかありますかね?

ID:/rjTyQ

2番目に回答したものです。

具体的なサイトはパっとは思いつきませんが、とりあえず背景色をフェードイン/アウトさせるサンプルコード書きました。若干スクロールポジションの取得箇所が適当&Chromeでしか動作確認していませんが、画像に置き換えつつコード理解すれば使えるはずです。

jsfiddle.net/mkegx4ug/

ID:/rjTyQ

こういうことではなかったらスミマセン…。

ID:nw/2RS

ありがとうございます。赤と青の中間色みたいのが出ているので多分技術的にはそのとおりだと思うのですが…
いかんせん0%(赤)→50%(中間)→100%(青)の3パターンがパッと切り替わってる感じでフェードイン、アウトしている風に見えなかったっす…

ID:/rjTyQ

もしかしたら3パターンに見えるのはディスプレイのサイズ(高さ)と、実装サンプルのスクロール領域の高さでそう見えてしまうかもしれません。
.
↓スクロール領域を増やしたもの
jsfiddle.net/mkegx4ug/1/
.
またクロスフェード(前に表示されているものがフェードアウトしながら、重ねて次の表示がフェードインしてくる)場合は、こんな感じの見た目になりますが、JSの実装方法を調整する事で、

  1. 最初の要素がフェードアウト開始
  2. 最初の要素がフェードアウト完了(画面は白く表示される)
  3. 次の要素がフェードイン開始
  4. 次の要素がフェードイン完了
    といった実装も簡単にでき、実装手法としてはこんな感じで実装するしかないと思いますので、後はご自身でやりたいように動きを調整頂ければ…と思います。
ID:/rjTyQ

とりあえずあくまで色のサンプルだとトピ主さんがやりたいものとは異なるものの為、イメージされているものと異なって感じてしまう可能性もあると思いますので、一度実際に画像に置き換えてみて動作を確認してみるのが良いと思います。

ID:nw/2RS

おおっ、すばらしい!
もうおネムなので、自分の環境に移して画像に切替えてやってみては無いですが、これって画像は固定されたままで、2枚の透過率をスクロールでコントロールしてるんですよね?
で、あればまさにこの通りです!

最終更新日:2017-01-14 (1,978 views)

関連するトピックス

ページ上部に戻る