0
スクロールして最初に表示したときにプログレスバーアニメーションを開始するにはどうすればいいですか？ウェブサイトの読み込みが完了すると、ATMのアニメーションが開始されます。プログレスバーのアニメーションを表示するまで、開始することはできません。
私は自分のjs..likeに「Xxpxをスクロールするときに作業を開始する」というものを追加する必要があると思います。どのように私はどのように寒さを追加するアイデア？ （申し訳ありませんが私はJSの専門家ではありません）
コードbleowを見つけてください。
ありがとうございました。
また、私が否定的な投票をすることを考えている場合は、私に理由を教えてください。私はこの記事で答えを見つけた
$(".progress div").each(function() {
var display = $(this),
currentValue = parseInt(display.text()),
nextValue = $(this).attr("data-values"),
diff = nextValue - currentValue,
step = (0 < diff ? 1 : -1);
if (nextValue == "0") {
$(display).css("padding", "0");
} else {
$(display).css("color", "#fff").animate({
"width": nextValue + "%"
}, "slow");
}
});.progress-bar {
background-color: #53dceb;
height: 12px;
-webkit-transition: width 1.5s ease-in-out;
transition: width 1.5s ease-in-out;
}<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<!--content-skills-->
<div style="background-color: #f5f7f8">
<div class="container">
<div style="padding-top: 2.5rem !important; padding-bottom: 2.5rem" class="row">
<div class="col-12">
<div class="row">
<!--Skills-block-1-->
<div class="col-lg-4 col-md-6 col-sm-4">
<!-- Skill1-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">d0 <span class="pull-right">30%</span></h5>
<div class="progress">
<div class="progress-bar" data-values="30" style="color: rgb(255, 255, 255);">
</div>
</div>
</div>
<!-- Skill2-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">d1 <span class="pull-right">100%</span></h5>
<div class="progress">
<div data-values="100" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill3-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">d2 <span class="pull-right">60%</span></h5>
<div class="progress">
<div data-values="60" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
<!-- Skill5-->
<div style="margin-bottom: 2rem">
<h5 style="color: #666">d3 <span class="pull-right">60%</span></h5>
<div class="progress">
<div data-values="60" class="progress-bar" style="color: rgb(255, 255, 255);"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JS code -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<!-- Recpatcha Google -->
<script src="https://www.google.com/recaptcha/api.js">
</script>
<!--JS below-->
</body>
[要素がスクロール後に表示されているかどうかを確認]（http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling）を参照してください。 – gaetanoM