jQuery

【jQuery】画像プリローダーとカスタムスクロール機能を備えたパララックススクロールjQuery Parallax

August 2, 2018
jQuery Parallax

jQuery Parallaxは画像プリローダーとカスタムスクロール機能を備えた、美しいパララックススクロール効果を生成するためのjQueryライブラリー。

Examples

ライブラリを追加

<link href="src/css/parallax.css" rel="stylesheet" type="text/css" />
<script src="src/js/parallax.js" type="text/javascript"></script>

Example 1 – Without Parameters
CSS

#my-parallax {
    background: #111 url(../img/1.jpg) no-repeat 0px 0px;
    background-size: 100% auto;
}

HTML

<div id="my-parallax" class="parallax parallax-dark"></div>

JS

$("#my-parallax").parallax();

Settings

var settings = {
    image : "./demo/img/1.jpg",
    height : "400",
    scroll : "default"
};
  1. image
  2. height
  3. scroll

MIT