Graf im Ansichtsfenster

Question

Ich arbeite zählen Zahl wie in diesem Link auf der Schaffung von: Themeforest Link-

Aber es gibt viele Probleme:

Erstes Problem: Ich brauche Animation zu tun, wenn das Element wird im View-Port angezeigt.

Zweites Problem: Wenn ich wieder scrolle, ist die Elementnummer Animation von oben nach unten und die Dauer funktioniert nicht gut. Ich weiß nicht, warum dieses Problem auftritt. unter

ist der Code:

function countUp() { 
 
    $('.count').each(function() { 
 
     $(this).prop('Counter', 0).animate({ 
 
      Counter: $(this).text() 
 
     }, { 
 
      duration: 4000, 
 
      easing: 'swing', 
 
      step: function (now) { 
 
       $(this).text(Math.ceil(now)); 
 
      } 
 
     }); 
 
    }); 
 
} 
 
$(function() { 
 
    "user strict"; 
 
    $(window).scroll(function() { 
 
     console.log("scroll top=" + $(this).scrollTop()); 
 
     console.log("div offset top=" + $("div").offset().top); 
 
     var scrolling = $(this).scrollTop(), 
 
      divoffset = $(".count").offset().top; 
 
     if (scrolling > divoffset - 300) { 
 
      countUp(); 
 
     } 
 
    }) 
 
})

body{ 
 
    height:4000px; 
 
} 
 
.count{ 
 
    width:200px; 
 
    height:200px; 
 
    text-align:center; 
 
    line-height:200px; 
 
    border:1px solid #10f880; 
 
    margin:1000px auto 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="count">1000</div>

Hinweis: Ich habe versucht, diese Stack Overflow suggestion, aber ich mag die Idee verstehen, danke:

Answer 1

function countUp() { 
 
$('.count').each(function() { 
 
    $(this).prop('Counter', 0).animate({ 
 
     Counter: $(this).text() 
 
    }, { 
 
     duration: 4000, 
 
     easing: 'swing', 
 
     step: function(now) { 
 
     $(this).text(Math.ceil(now)); 
 
     } 
 
    }); 
 
    }); 
 
} 
 
$(function() { 
 
    "user strict"; 
 
    var bAnimate = true; 
 
    $(".count").css ("opacity", "0.0"); 
 
    
 
    $(window).scroll(function() { 
 
    // console.log("scroll top=" + $(this).scrollTop()); 
 
    // console.log("div offset top=" + $("div").offset().top); 
 
    var scrolling = $(this).scrollTop(), 
 
     divoffset = $(".count").offset().top, 
 
     screenBottom = scrolling + $(window).height(), 
 
     elemBottom = divoffset + $(".count").outerHeight(); // 
 
    if (screenBottom > elemBottom) { 
 
     if (bAnimate) { 
 
     $(".count").css ("opacity", "1.0"); 
 
     countUp(); 
 
     bAnimate = false; 
 
     } 
 
    } 
 
    }) 
 
})

body { 
 
    height: 4000px; 
 
} 
 

 
.count { 
 
    width: 200px; 
 
    height: 200px; 
 
    text-align: center; 
 
    line-height: 200px; 
 
    border: 1px solid #10f880; 
 
    margin: 1000px auto 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="count">1000</div>

Führen Sie die Funktion aus, wenn der untere Teil des Bildschirms (Fensterhöhe) größer ist als der untere Teil des Elements (oben auf Element + äußereHöhe). Verwenden Sie boolean, um die zweite Ausführung der Funktion zu stoppen.