Как сделать, чтобы цвет плавно менялся, когда прокручиваешь страницу?

Question

[Deomid]

Здравствуйте, помогите пожалуйста.
Как добиться такого цветового эффекта? calculit.piratesdeaudouce.com
Хочется, чтобы цвет плавно менялся, когда прокручиваешь страницу.
Заранее спасибо.

Comments

[Нерон Лордов]

не разработчик я)

Answer 1

[xtala zen]

Используется библиотека Jquery color animate, если верить отладчику.
Вот здесь подробней:
https://jqueryui.com/animate/
З. Ы учитесь пользоваться браузерным дебагером, многие вопросы отпадут сами собой.

Answer 2

[Alexander Pushkarev]

Вот их код

var tabBgColor = ['#f13640', '#0096c8', '#89b600', '#9f5200', '#f6a11c', '#a539b5'];

	$(window).scroll(function () { 
		colorOnScroll();
	});
	colorOnScroll();

	function colorOnScroll(){
		var scrollTopValue = $(window).scrollTop();
		var tabSectionOffsetTop = [];
		$.each($(".filet"),function(k,v){
			var sectionOffsetTop = $(this).offset().top + ($(this).height() / 2);
			tabSectionOffsetTop.push(sectionOffsetTop);
		});
		if(scrollTopValue<tabSectionOffsetTop[0]){
			$('body').stop().animate({ backgroundColor: tabBgColor[0] });
		}else{
			for(var i=0; i<tabSectionOffsetTop.length;i++){
				if(scrollTopValue>tabSectionOffsetTop[i] && scrollTopValue<tabSectionOffsetTop[i+1]){
					$('body').stop().animate({ backgroundColor: tabBgColor[i+1] });
				}
			}
		}
	}

Comments

[Philipp]

Если бы был нормальный parent() селектор в CSS, то можно было бы обойтись без JS.

Answer 3

[IsaevDev]

самый кошерный вариант, мне кажется, привязать цвет к значению scrollTop
в вашем примере дошли до точки - поменяли
а лучше бы по ходу скролла менять плавно. и чем быстрее скролл - тем быстрее изменения. мне кажется это можно реализовать