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

[lukash82]

Witam,

Dzięki za naprowadzenie. Nieco udało mi się temat ogarnąć. Ale mam jeszcze "drobny" problem. Najlepiej na przykładzie, popełniłem do tej pory coś takiego: https://jsfiddle.net/hwghx6y8/

Są tam 2 kwadraty.

1 - widoczny od razu, powyżej "linii zgięcia" ekranu. Tu akcja "wjazdu" obrazka odpala się na starcie i jest ok.

2 - widoczny dopiero po scrolowaniu (mówię tu cały czas o stronie typu one page). Przy 2 obrazku chciałbym uzyskać efekt wywołania przesunięcia dopiero w momencie gdy użytkownik zjedzie w to miejsce. A tymczasem to usilnie ładuje się na starcie i tyle...

Chciałbym uzyskać coś takiego: http://www.templatemonster.com/demo/51858.html

Czy do takiego efektu konieczny jest JS? Proszę o jakąś podpowiedź jak tego szukać. Pozdrawiam, Ł.