Forum PHP.pl

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

http://www.w3schools.com/css/css3_transitions.asp

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

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

https://daneden.github.io/animate.css/ oraz http://mynameismatthieu.com/WOW/