自動じゃなくてスクロール値に合わせて背景画像をクロスフェードさせることってできるの?取り敢えず、具体的な方法論はさておき、技術的に可能なのかお聞きしたいっす。
出来るししてるサイトが多いだろ
できますし、実装難易度も簡単ですね。
パッと切り替わるんじゃなくて、少しずつ互いにフェードアウト、フェードインして切り替わる感じなんですが…具体的に実装しているサイトってどこかありますかね?
2番目に回答したものです。
具体的なサイトはパっとは思いつきませんが、とりあえず背景色をフェードイン/アウトさせるサンプルコード書きました。若干スクロールポジションの取得箇所が適当&Chromeでしか動作確認していませんが、画像に置き換えつつコード理解すれば使えるはずです。
jsfiddle.net/mkegx4ug/
こういうことではなかったらスミマセン…。
ありがとうございます。赤と青の中間色みたいのが出ているので多分技術的にはそのとおりだと思うのですが…いかんせん0%(赤)→50%(中間)→100%(青)の3パターンがパッと切り替わってる感じでフェードイン、アウトしている風に見えなかったっす…
もしかしたら3パターンに見えるのはディスプレイのサイズ(高さ)と、実装サンプルのスクロール領域の高さでそう見えてしまうかもしれません。.↓スクロール領域を増やしたものjsfiddle.net/mkegx4ug/1/.またクロスフェード(前に表示されているものがフェードアウトしながら、重ねて次の表示がフェードインしてくる)場合は、こんな感じの見た目になりますが、JSの実装方法を調整する事で、
とりあえずあくまで色のサンプルだとトピ主さんがやりたいものとは異なるものの為、イメージされているものと異なって感じてしまう可能性もあると思いますので、一度実際に画像に置き換えてみて動作を確認してみるのが良いと思います。
おおっ、すばらしい!もうおネムなので、自分の環境に移して画像に切替えてやってみては無いですが、これって画像は固定されたままで、2枚の透過率をスクロールでコントロールしてるんですよね?で、あればまさにこの通りです!
みんなの回答 3 件
出来るししてるサイトが多いだろ
できますし、実装難易度も簡単ですね。
パッと切り替わるんじゃなくて、少しずつ互いにフェードアウト、フェードインして切り替わる感じなんですが…
具体的に実装しているサイトってどこかありますかね?
関連するトピックス