|
Сообщение от Igorsrt
|
|
один раз после попадания в зону видимости сработала анимация и все...
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.meter {
width: 100%;
height: 8px;
color: #fff ;
text-align: center;
margin: 30px 0;
position: relative;
}
.meter:after {
font-size: 18px;
content: attr(data-max);
color: #000;
position: absolute;
right: 5px;
top: -20px;
}
.meter:before {
font-size: 18px;
content: attr(data-title);
color: #000;
position: absolute;
left: 5px;
top: -20px;
}
p {
height: 2000px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
jQuery.easing.easeOutQuart = function(x, t, b, c, d) {
return -c * (t /= d) * (t - 2) + b
};
var num = $(".meter");
var duration = 1200;
num.each(function(indx, el) {
var max = $(el).data("max");
var color = $(el).data("color");
$(el).on("animeNum", function() {
$({
n: 0
}).delay(indx * 200).animate({
n: max
}, {
easing: "easeOutQuart",
duration: duration,
step: function(now, fx) {
now |= 0;
now += "%";
var gradient = "linear-gradient(to right, " + color + " , " + color + " " + now + ", #FFFFFF " + now + ")";
$(el).attr("data-max", now).css({
"backgroundImage": gradient
})
}
})
})
});
function checkViewport(elem) {
var rect = elem.getBoundingClientRect();
var y = rect.bottom / (innerHeight + rect.bottom - rect.top);
var isInView = y > 0 && y < 1;
return isInView
}
function visibility()
{
return $.makeArray(num).some(checkViewport)
}
visibility() ? num.trigger("animeNum") :
$(window).scroll(function anime() {
visibility() && num.trigger("animeNum") && $(window).off("scroll", anime)
})
});
</script>
</head>
<body>
<p></p>
<div class="meter" data-max="98" data-title="Оптимизация" data-color="#464c5c"></div>
<div class="meter" data-max="100" data-title="Кроссплатформенность" data-color="#6d747a"></div>
<div class="meter" data-max="99" data-title="Удобство" data-color="#8c8274"></div>
<div class="meter" data-max="99" data-title="Дизайн" data-color="#d2c6b4"></div>
<p></p>
</body>
</html>