[css] efekt fade in, po scrolowaniu strony do danej sekcji Opcje

[lukash82]

Witam,

Mam na stronie (typu one page) wykorzystany efekt fadein w css:

[CSS] pobierz, plaintext 
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
 
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
 
  100% {
    opacity: 1;
  }
}
 
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
/*sekcje */
#home, #oferta, #kontakt{
	animation				: fadeIn 1s;
	-moz-animation			: fadeIn 1s; /* Firefox */
	-webkit-animation		: fadeIn 1s; /* Safari and Chrome */
	-o-animation			: fadeIn 1s; /* Opera */}
[CSS] pobierz, plaintext 

Nic skomplikowanego. Jednak efekt ten generuje się od razu dla wszystkich elementów na stronie, przez co dla niższych partii strony praktycznie go nie widać. Chciałbym uzyskać taki efekt, że w momencie scrolowania strony w kolejnych sekcjach efekt fadein dopiero wtedy jest wywoływany. Jeśli ktoś mógłby mi podpowiedzieć w którą stronę iść. Guglałem trochę, na stockoverflow też nic konkretnego nie znalazłem. Chciałbym uniknąć korzystania z JS, ale jak będzie trzeba to trudno.

Pozdrawiam, Ł.

[Rufus_84]

Witam,
Raczej bez js się nie obejdzie, bo trzeba wykryć, że element jest widoczny.

Można to zrobić w ten sposób:

[HTML] pobierz, plaintext 
 
var myDiv = $('.my-div').offset().top - $(window).height();
 
if ($(window).scrollTop() > myDiv) {
    $(myDiv).addClass('fadein');
       LUB
   $(myDiv).fadeIn(500);
}
 
[HTML] pobierz, plaintext 

Można dodać klasę po zescrollowaniu co odpali css lub od razu w jquery zastosować fadein