jQuery

【jQuery】データ属性を使用してパララックス効果を設定する[data-parallax]

October 17, 2016
[data-parallax]

data-parallaxはデータ属性を使用して簡単にパララックス効果を設定するためのjQueryプラグイン。

Installation

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery.requestAnimationFrame/jquery.requestAnimationFrame.min.js"></script>
<script src="bower_components/jquery-data-parallax/jquery.data-parallax.min.js"></script>

Usage

使用データの属性

<div data-parallax='{"y":"70%","scale":2,"rotate":180,"opacity":0}'></div>

javascript

$("#selector").parallax({
    "y": "70%",
    "scale": 2,
    "rotate": 180,
    "opacity": 0
});

Properties

<div data-parallax='{"opacity":{"to":1,"from":0.5,"duration":100},"translateY":"50%","duration":200}'></div>

MIT