[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, Ł.