Płynna zmiana koloru tła przy przewijaniu (scrollowaniu)

Dla specjalistów Webmastering
#1

Witajcie.
Chciałbym na mojej stronie zastosować przejście kolorów tła przy przewijaniu.
Znalazłem coś takiego: https://codepen.io/daveredfern/pen/zBGBJV/, ale nie mogę sobie poradzić z poprawnym działaniem.
Próbowałem już chyba wszystkiego, co przyszło mi do głowy. Nie mam doświadczenia z javascript i prawdopodobnie stąd tak się przy tym upachałem :slight_smile:
Może gdzieś występuje jakiś konflikt, którego nie potrafię zlokalizować, a może przeoczyłem coś w css…

Strona: http://nox.5v.pl/
Są tu 3 sekcje, które przy przewijaniu miałyby zmieniać kolor tła jak w powyższym przykładzie.

Bardzo zależy mi na tym efekcie i stąd moja wielka prośba o pomoc.
Będę bardzo wdzięczny za udzielone wsparcie.
Pięknie pozdrawiam.

#2

Musisz na stronie dodać bibliotekę jQuery. - teraz zauważyłem, że jest dodana. Musisz najpierw załadować jQuery dopiero potem index.js - zmień kolejność skryptów i wykonaj drugi punkt.
Musisz kod z index.js - czyli de facto cały kod JS który znalazłeś na codepen umieścić w takiej klauzuli:

(function($){
    // tutaj umieszczasz swoj kod
})(jQuery)

Gotowiec:

(function($){
	$(window).scroll(function() {

	// selectors
	var $window = $(window),
	  $body = $('body'),
	  $panel = $('.panel');

	// Change 33% earlier than scroll position so colour is there when you arrive.
	var scroll = $window.scrollTop() + ($window.height() / 3);

	$panel.each(function () {
	var $this = $(this);

	// if position is within range of this panel.
	// So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
	// Remember we set the scroll to 33% earlier in scroll var.
	if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
		  
	  // Remove all classes on body with color-
	  $body.removeClass(function (index, css) {
		return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
	  });
	   
	  // Add class of currently active div
	  $body.addClass('color-' + $(this).data('color'));
	}
	});    

	}).scroll();
})(jQuery)

EDIT:
Musisz jeszcze dodać odpowiednią regułę CSS dla body z animacją tła (transition).

1 polubienie
#3

Fizyda, jesteś wielki!
Dziękuję, działa!
Swoją drogą, sprawdziłem 101 możliwości, a na to nie wpadłem :slight_smile:
Pozdrawiam.

#4

Dużo sam i tak zrobiłeś. Jeśli tak jak piszesz praktycznie nie znasz się na tym, to takich rzeczy miałeś prawo nie wiedzieć i mieć z tym problem. Więc tym bardziej gratki za kreatywność w rozwiązywaniu problemów i chęci, bo byłeś naprawdę blisko zrobienia tego samemu :wink:.

2 polubienia