Animacja po scrollu :)

pytanie zadane 22 marca 2017 w HTML i CSS przez SandraS Obywatel (1,400 p.)
zamknięte 31 marca 2017 przez SandraS

Cześć! Zaczynam przygodę z animacją. Teraz w trendzie jest funkcjonalność objawiająca się pojawianiem się różnych elementów strony wraz ze scrollowaniem strony ku dołowi. Nie wiem jak ten temat ugryźć. Nie mam zielonego pojęcia z czym to się je. Czy trzeba pobrać jakieś biblioteki i odwoływać się do specyficznych klas czy za pomocą css-a? Czy ktoś nakieruje laika na początek? ;/ Internet zalewa mnie niejednoznacznymi informacjami ;/

komentarz zamknięcia: znalezienie odpowiedzi

4 odpowiedzi

odpowiedź 22 marca 2017 przez Artek Stary wyjadacz (11,800 p.)
wybrane 31 marca 2017 przez SandraS

Najlepsza

Tu masz przykład z użycie Js i jQuery z mojej stronki.

$(window).scroll(function()
	  {
	    if((pageYOffset > 40)&&(window.innerWidth > 620))
		{
		  $(".top-contact").css("display","none");
		  $(".menu").css({"position" : "fixed","top":"0","width":"100%","border":"1px solid black","box-shadow":"0px 4px 2px black"});
		  $(".background-images-container").css("margin-top","90px");
		}
		else if(window.innerWidth > 620 )
		{
		  $(".top-contact").css("display","block");
		  $(".menu").css({"position":"static","border":"none"});
		  $(".background-images-container").css("margin-top","0");
		}
		
	  });

komentarz 29 marca 2017 przez SandraS Obywatel (1,400 p.)
edycja 29 marca 2017 przez SandraS

Rozumiem, że pageYOffset oraz window.innerWidth to wygenerowane przez Ciebie zmienne sprawdzające min. przesunięcie scrollem na stronie.
Teraz rozumiem działanie, za chwilę się tym pobawię. Jak jednak sprawić aby te elementy się pojawiały w fajny sposób np. łukiem, trzęsąc się, powoli - chodzi mi teraz o różne efekty :)

Co ja tu robię źle skoro div schowany za lewym marginesem nie chce się wysunąć po scrollu?

https://jsfiddle.net/o2gxgz9r/4647/

komentarz 30 marca 2017 przez Artek Stary wyjadacz (11,800 p.)

pageYOffset oraz window.innerWidth to nie są zmienne przeze mnie wygenerowane. Wygogluj, a wszystko będziesz wiedział

komentarz 31 marca 2017 przez SandraS Obywatel (1,400 p.)

Okej, wszystko działa, tylko pojawił się jeden problem, przy scrollu 800px pojawiać się mają trzy divy, wszystko niby okej, ale po załadowaniu strony one już są i dopiero jak zjadę te 600px to znikają i pojawiają się za pomocą animacji. Gdy je ukrywam za pomocą hide() to znika wszystko i nie pojawia się po scrollu. Jak to najlepiej rozwiązać?