画面スクロール後に数秒間処理を続行したい

Question

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);

一応上記の形でパララックスの動きは実装できるのですが、
スクロール後に背景画像がすぐ止まってしまいます。

参考サイトの様に、スクロール後にゆっくり背景画像の動きが止まる様にする方法がわかりません。

もし何かお分かりの方がいらっしゃいましたら、ぜひご教授ください。
どうぞよろしくお願い申し上げます。

Answer 1

これらのJSで期待通りのことができるはずです。
これをそのままテストしてみてください。
理屈がわかったら色々組み替えてみてください。

スクロールしてない時にアニメーションA
スクロールしてる時にアニメーションBみたいな
あと上方向なのか下方向なのか

<header id="header">
	<h1><div class="logo">T</div></h1>
	<nav>
		<ul>
			<li><a id="home" href="#">1</a></li>
			<li><a id="about"  href="#">2</a></li>
			<li><a id="clients" href="#">3</a></li>
			<li><a id="us" href="#">4</a></li>
		</ul>
	</nav>	
</header>

body {
	margin: 0;
	padding: 0;
	height:5000px;
}
#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	margin-bottom: 20px;
	height: 100px;
	line-height: 100px;
	background-color: red;
	-webkit-transition: all 0.4s ease-in-out;
	   -moz-transition: all 0.4s ease-in-out;
	     -o-transition: all 0.4s ease-in-out;
	    -ms-transition: all 0.4s ease-in-out;
	        transition: all 0.4s ease-in-out;
}
#header h1,
#header ul,
#header li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}
#header h1 {
	width: 300px;
	height: 100px;
	text-align: center;
	background-color: yellow;
	-webkit-transition: all 0.4s ease-in-out;
	   -moz-transition: all 0.4s ease-in-out;
	     -o-transition: all 0.4s ease-in-out;
	    -ms-transition: all 0.4s ease-in-out;
	        transition: all 0.4s ease-in-out;
}
#header li {
	margin-left: 50px;
}
/* Active */
#header.active {
	height: 50px;
	line-height: 50px;
	background-color: pink;
}
#header.active h1 {
	width: 200px;
	height: 50px;
	text-align-last: auto;
	background-color: blue;
}

/// スクロールで上か下かの判定
var $cheight = $(window).scrollTop();
$(window).scroll(function() {
	isScrolling = 1;
	var $height = $(window).scrollTop();
	$('.logo').text($height);
	$('#home').text($height);
	$('#about').text($cheight);
	if($height > $cheight) {
		$('#clients').text('DN');
	} else {
		$('#clients').text('UP');
	}
	$cheight = $height;
});

/// スクロールしてるかしてないかの判定
var timer;
$('#us').text(0);
window.addEventListener("scroll", function () {
	$('#us').text(1);
	clearTimeout( timer ) ;
	timer = setTimeout( function () {
		$('#us').text(0);
	}, 100 ) ;
});

Comments

[uio]

返信遅くなり申し訳ございません。
回答ありがとうございます。いただいたコードで試してみました所、
スクロール中とスクロール後のアクションは実装ができたのですが、
スクロール中からスクロール後のアクションに移る間の繋ぎ目の時間に
どうしても一度動きが止まってしまうような状態になってしまいました。

そこをスムーズに繋ぎ目ができないように、easing functionでできないか等色々
トライしていたのですが、まだ解決まで至っておりません。
もう少し引き続きやってみようと思います。
ありがとうございました。