すたらブログ

文系Webプログラマの備忘録

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

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

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

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

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


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

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

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