NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Diskuze: Ako spustiť animáciu až vtedy, keď scrollnem na daný <div>?

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
oliver.olejnik
Člen
Avatar
oliver.olejnik:2.12.2016 13:43

Zdravím, ako spustiť animáciu textu až vtedy, keď scrollnem na daný <div>? Teraz mi animácie celej stránky prebehnú na začiatku, keď sa mi načíta web, no chcem pomocou JQuery zistiť, či som na danom dive a až vtedy spustiť animáciu. Ako to urobiť? Toto je môj terajší kód... Vďaka za pomoc! :)

HTML:

<div class="obsah slideInRight" style="visibility: visible; animation-name: slideInRight;">

       tu je obsah, ktorý príde zprava...

</div>


CSS:

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  -webkit-animation: slideInRight 1s ease ;
  -moz-animation: slideInRight 1s ease ;
  animation: slideInRight 1s ease ;

}

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
 
Odpovědět
2.12.2016 13:43
Avatar
Ján Timoranský
Tvůrce
Avatar
Ján Timoranský:2.12.2016 14:59

No v prvom rade daj preč classu slideInRight z elementu, pridáš ju totiž cez javascript a to tak, že budeš kontrolovať $window.scrollTop(); a porovnávať ho s $('.obsah').of­fset().top;. Následne iba pridáš classu elementu $('.obsah')

$('.obsah').addClass( 'slideInRight' );

a animácia by sa ti mala spustiť akonáhle sa stretne vrch okna s horným okrajom elementu. Samozrejme toto je celkom basic, ide to aj lepšie spraviť, pridať offset alebo tak.

Editováno 2.12.2016 15:00
Nahoru Odpovědět
2.12.2016 14:59
Find what you love and let it kill you.
Avatar
oliver.olejnik
Člen
Avatar
oliver.olejnik:2.12.2016 15:06

A napísal by si mi kompletne celý javascript prosím ťa? Pretože som to už takto raz skúšal a nefungovalo to a tú syntax javascriptu moc neovládam..

Editováno 2.12.2016 15:07
 
Nahoru Odpovědět
2.12.2016 15:06
Avatar
Ján Timoranský
Tvůrce
Avatar
Ján Timoranský:2.12.2016 15:38

Nech sa páči jsFiddle . Mierne som to zjednodušil, ak máš iba dvojkrokovú animáciu 0-100%, bohate stačí transition property. Ako ale hovorím, určite to ide urobiť aj lepšie, to len tak na ukážku.

Nahoru Odpovědět
2.12.2016 15:38
Find what you love and let it kill you.
Avatar
oliver.olejnik
Člen
Avatar
oliver.olejnik:2.12.2016 17:01

Vďaka za kód, ale nejako mi to aj tak nefunguje :/ Nedal by sa urobiť nejaký javascript priamo na môj kód s tým, že by classa .slideInRight zostala nezmenená? Pretože animácia, ktorú mám je fajn, len ju chcem spustiť vtedy, keď chcem ja.

 
Nahoru Odpovědět
2.12.2016 17:01
Avatar
Ján Timoranský
Tvůrce
Avatar
Odpovídá na oliver.olejnik
Ján Timoranský:3.12.2016 12:44

Veď to funguje tak isto, čo sa javascriptu týka. V css môžeš mať animáciu akú chceš. Ak ti to nefunguje, tak sa uisti, že máš linknuté jQuery na stránke.

Nahoru Odpovědět
3.12.2016 12:44
Find what you love and let it kill you.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 6 zpráv z 6.