CSSだけで実現するパララックスの練習

(追記 2016-06-06)
本文中のCSSのみのデモは、IE11でマウスホイールを使ってスクロールすると画面がチラつきます。
Edgeでは問題ありませんが、やはりJavaScriptライブラリを使うのが良いと思います。
「ScrollMagic」というライブラリを使ったデモを公開しています。

🔗 デモ: https://sutara79.github.io/demo-scrollmagic/03.html
🔗 ソースコード: https://github.com/sutara79/demo-scrollmagic

ScrollMagicは、数ある視差効果用のプラグインの中でも下記の利点があるのでオススメです。

• IEでのマウスホイールによるスクロールでも画面がチラつかない。
• モバイルでの動作にも対応。

関連記事: 2016-06-21 パララックス用JavaScriptプラグインを使う場合はマウスホイールに注意

---

🔗 デモ: https://sutara79.github.io/demo-css-parallax
🔗 GitHub: https://github.com/sutara79/demo-css-parallax/

パララックスエフェクトにはあまり興味がなかったのですが、CSSだけで実現できるならと練習で作ってみました。
パララックスにもいろいろありますが、ごく簡単な、スクロールに応じて幕が上がるように背景画像が切り替わるエフェクトです。

思っていたよりも簡単でした。
複雑な視差効果はあまり実用性を感じられないのですが、これは使うかもしれません。

下記のページがとても参考になりました。 m(_ _)m
(パクって組み合わせた、と言うほうが正しいですね…)

🔗 jQuery×HTML5×CSS3を真面目に勉強（1）：パララックスエフェクトの基本 (3/4) - ＠IT
🔗 [CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック | コリス