Skip to content

sutara79/demo-parallax.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Parallax.jsの使い方

下記のjQueryプラグインの簡潔な使い方です。

デモ

注意: IEやEdgeで画面がチラつく場合がある

<body><html>には、position: static以外を指定してはなりません。
InternetExplorerやEdgeでマウスホイールを使って画面をスクロールさせると、画面がチラつきます。
下記のページをIEまたはEdgeで開いてみてください。

なお、<body><html>以外の親要素のpositionは影響しません。

このことから、フッターを常に画面下部に固定するための、下記のようなCSSテクニックとの併用ができなくなります。

上のテクニックでは、<html>position: relative;を指定しています。
他の似たようなテクニックでも<body><html>のどちらかをrelativeにしています。

ただ、視差効果を狙ったページは総じて縦長であり、画面の高さ以上の長さになることはほぼ間違いないので、問題ないと思います。

注意: jQuery3.0では動作しない

2016年6月現在、parallax.jsの最新バージョンは1.4.2ですが、jQuery3.0.0では動作しないようです。

About

my practice to use Parallax.js

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages