こんにちはアートディレクターの奥田です。
最近は娘の成長を見るのがとても楽しみで、寝返りしたと思えば次の日にはずりばいの練習をしていたりと日々成長していく姿に感動しております。
さて、Webサイトに高級感を与える慣性スクロールとパララックスエフェクトのVanilla.jsのプラグインを作ってみました。
サイト制作にぜひ役立ててみてください。
Table of contents
インストール
npmで簡単にインストール可能です。
npm install luxy.js --saveまたは、ページにスクリプトを含めることで使用できます。
<script src="path/to/luxy.js" charset="utf-8"></script>プロジェクトにluxy.jsを含めて以下のように初期化してください。
<script charset="utf-8">
luxy.init();
</script>
使い方
使い方を見ていきましょう。
#luxyでコンテンツをラップすることで、慣性スクロールが適用されます。
こちらはbodyの高さを取得し、#luxyの高さをbodyと同じにしてtransformで動かしています。
なので、position:fixed;している固定ヘッダーなどは#luxyから除外する必要があることに注意してください。
<div id="luxy">
... Entire content
</div>
また、.luxy-elを付与した要素にパララックス効果を与えます。
<div id="luxy">
<div class="luxy-el"></div>
</div>縦方向のパララックス効果の速度をdata-speed-y属性で指定し、offsetをdata-offset属性で指定します。
<div id="luxy">
<div class="luxy-el" data-speed-y="5" data-offset="-50"></div>
</div>水平方向に移動する場合は、data-horizontalに「1」を指定し、data-speed-x属性を使用して水平方向の速度を指定します。
<div id="luxy">
<div class="luxy-el" data-horizontal="1" data-speed-x="-5"></div>
</div>オプション
非常にシンプルではありますが、以下のようなオプションを指定できます。
| Name | default | description |
|---|---|---|
| wrapper | ‘#luxy’ | Entire content wrapper element. |
| targets | ‘.luxy-el’ | Parallax effect targets elements. |
| wrapperSpeed | 0.08 | Inertia scroll speed. |
オプションの指定方法は以下のようにします。
<script charset="utf-8">
luxy.init({
wrapper: '#luxy',
targets : '.luxy-el',
wrapperSpeed: 0.08
});
</script>
補足
スマホやタブレットでは少しもたつくような印象がある場合は以下のように条件分岐をしてPCのみに適用してみてください。
var _ua = (function(u){
return {
Tablet:(u.indexOf("windows") != -1 && u.indexOf("touch") != -1 && u.indexOf("tablet pc") == -1)
|| u.indexOf("ipad") != -1
|| (u.indexOf("android") != -1 && u.indexOf("mobile") == -1)
|| (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1)
|| u.indexOf("kindle") != -1
|| u.indexOf("silk") != -1
|| u.indexOf("playbook") != -1,
Mobile:(u.indexOf("windows") != -1 && u.indexOf("phone") != -1)
|| u.indexOf("iphone") != -1
|| u.indexOf("ipod") != -1
|| (u.indexOf("android") != -1 && u.indexOf("mobile") != -1)
|| (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1)
|| u.indexOf("blackberry") != -1
}
})(window.navigator.userAgent.toLowerCase());
if(!_ua.Mobile&&!_ua.Tablet){
luxy.init();
}さいごに
今回初めてnpmに公開する作業をやってみました。
https://www.npmjs.com/package/luxy.js
見様見真似だったのですが公開されたときは感動しますね。
また、デモサイトのために二次配布できる素材を探していたときに「Pixabay」という著作権フリーの素材サイトを発見したのですが、かなりクオリティーが高くこういう時にもってこいだなと思いました。
https://pixabay.com
皆様も良ければお使いください。