Új hozzászólás Aktív témák

• #15854 Tatejka84 tag martonx #15853

  Új Válasz 2017-08-07 17:35:18 #15854

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  Tatejka84

  tag

  válasz martonx #15853 üzenetére

  Köszi.

  Sikerült! Csak a problémám most az, hogy nekem három ilyen animációm van egymás alatt és az alábbi kóddal csak egyet tudok időzíteni.

  HTML

  <div class="big-number">
<svg class="circle">
<circle class="circle-path first" cx="135" cy="135" r="115"></circle>
</svg>
</div>

  CSS

  .big-number..circle-path.first {
stroke-dasharray: 636.3684;
stroke-dashoffset: 636.3684;
}
.big-number .circle-path.first.animate {
animation: dash 2s linear forwards;
}

  JQ

  var $window = $(window);
var $elem = $(".first")

function isScrolledIntoView($elem, $window) {
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height();

var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();

return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(document).on("scroll", function () {
if (isScrolledIntoView($elem, $window)) {
$elem.addClass("animate")
}
});

  Így működik, de csak mindig csak 1. Ha csinálok a JQ-ban a "first"-t mellett "second"-ot akkor mindig az utolsó fog működni. Nem nagyon értek a javascript-hez , gondolom ez látszik is.

  Hogy tudom megcsinálni, hogy mindegyik működjön?

Új hozzászólás Aktív témák