JSパララックスを使用して背景画像を動かしたいのですが、
その際に、上下スクロール終了の後にゆっくりと徐々に動きが止まるようにしたいと思っています。
こちらのサイトの背景の水滴部分のような動きにしたいのですが、
該当部分のJSコードを見ても何をしているのかわかりません。
リンク内容
CSSにて背景画像を設置して、JSで以下のようにコード入れてみました。
【CSS】
.contents{ overflow: hidden; background: url(images/bg1.jpg) repeat-y center top; background-size: contain; }
【JS】
(function ($) { 'use strict'; let scrollPosi = 0; $(window).scroll(function () { scrollPosi = $(document).scrollTop(); $('.contents').stop(true, true).animate({ 'background-position-y': -scrollPosi + 'px' }, 2000); }); })(jQuery);
一応上記の形でパララックスの動きは実装できるのですが、
スクロール後に背景画像がすぐ止まってしまいます。
参考サイトの様に、スクロール後にゆっくり背景画像の動きが止まる様にする方法がわかりません。
もし何かお分かりの方がいらっしゃいましたら、ぜひご教授ください。
どうぞよろしくお願い申し上げます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/12 07:25 編集