Делаем плавную смену цвета фона при скроле страницы на Jquery

Идея предельно проста и понятна… Предположим, что хотим смену цвета фона страницы при прокрутке каждых 500px от верха. К сожалению найти готовый простой вариант, поддающийся модернизации, не удалось найти. Поэтому совместно с @only_darkangel был написан элементарный вариант:

Сперва подключим библиотеки в head, если они ещё не подключены
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>

Затем пару строк стилей
<style type="text/css">
body {
background: #fff;
height:4000px;
}
</style>

Далее скрипт, который и будет менять цвет страницы при прокрутке.
Цифра 400 задаёт скорость смены цвета (0,4 секунды). В самом низу цифра 451 задаёт время проверки положения скролла, данная цифра должна быть всегда больше времени скорости цвета.

<script type="text/javascript">
window.onload=function(){
setInterval(function(){
var scroll = $(window).scrollTop();
if (scroll == 0) {
$("body").animate({backgroundColor: 'white'}, 400); //изначально фон белый
}
if (scroll <= 500 && scroll >= 1) {
$("body").animate({backgroundColor: 'green'}, 400); //затем если проскроллили от 1 до 500 пикселей, то цвет меняется на зелёный
}
if (scroll <= 1000 && scroll >= 501) {
$("body").animate({backgroundColor: 'red'}, 400); //более 501 пикселей прокрутки от верха цвет смениться на красный
}
if (scroll <= 1500 && scroll >= 1001) {
$("body").animate({backgroundColor: 'blue'}, 400);
}
if (scroll >= 1501) {
$("body").animate({backgroundColor: 'yellow'}, 400);
}
}, 451);
}
</script>

ДЭМО работы скрипта. Как видим всё предельно просто и понятно, но и в то же время примитивно.

Ещё я нашел вариант более красивый, но и сложный http://jsfiddle.net/jguffey/mxkx9j2o/, возможно так же пригодится.

Задавайте вопросы в комментах, делитесь статьёй в соц. сетях нажав на соответствующую кнопочку ниже 🙂 Спасибо, что читаете!