15.09.2018, 14:07
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
var fl = true;
onscroll = function(){
if(document.querySelector("селектор_элемента_с_анимацией").getBoundingClientRect().top - innerHeight < 0 && fl) {
fl = false;
//сюда запуск анимации
}
};
если запуск нужен ниже, вместо 0 свою цифру -n
Последний раз редактировалось j0hnik, 15.09.2018 в 15:33.
|
|
15.09.2018, 15:26
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Разве вместо такого сложного и трудно поддерживаемого набора элементов не достаточно было бы использовать только 4 элемента <meter>?
j0hnik, у вас всё время, пока крутишь и видишь элемент, запускается анимация
|
|
15.09.2018, 15:34
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
Malleys,
поправил
|
|
15.09.2018, 15:50
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
Анимация запускается каждый раз, как только элемент входит в область видимости + только 4 <meter>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.skills { margin: 125vh 0; }
body::before { content: "Крути вниз!"; }
.skill {
width: 100%;
background: #eee;
padding-top: 2em;
display: flex;
flex-flow: wrap;
}
.skill .level {
flex: 1;
text-align: right;
font-size: 125%;
}
.skill meter {
width: 100%;
background: transparent;
}
.skill meter::-webkit-meter-bar {
background: transparent;
border: 0; /* убирает рамку в IE */
}
.skill meter::-moz-meter-bar {
background: currentColor;
}
.skill meter::-webkit-meter-optimum-value {
background: currentColor;
}
</style>
</head>
<body>
<section class="skills">
<meter min="0" max="100" value="98" style="color: #464c5c" title="Оптимизация"></meter>
<meter min="0" max="100" value="100" style="color: #6d747a" title="Кроссплатформенность"></meter>
<meter min="0" max="100" value="99" style="color: #8c8274" title="Удобство"></meter>
<meter min="0" max="100" value="99" style="color: #d2c6b4" title="Дизайн"></meter>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
jQuery.easing.easeOutQuart = function(x, t, b, c, d) {
return -c * (t /= d) * (t - 2) + b
};
jQuery(".skills meter").each(function(index, { value, title, style }) {
const descr = jQuery(`<span class="title">${title}</span>`);
const level = jQuery(`<span class="level" style="color: ${style.color}"></span>`);
const skill = jQuery(`<section class="skill"></section>`);
skill.append(descr, level);
$(this).replaceWith(skill);
skill.append(this);
document.addEventListener("meter:animate", () => jQuery({ value: 0 }).animate({ value }, {
duration: 1600,
easing: "easeOutQuart",
step: value => {
this.value = value;
level.text(`${value | 0}%`);
}
}));
});
let _isInView = false;
onscroll = () => {
const rect = document.querySelector(".skills").getBoundingClientRect();
const y = rect.bottom / (innerHeight + rect.bottom - rect.top);
const isInView = y > 0 && y < 1;
if(_isInView !== isInView) {
_isInView = isInView;
if(isInView)
document.dispatchEvent(new Event("meter:animate", { bubbles: true }));
}
};
</script>
</body>
</html>
Последний раз редактировалось Malleys, 15.09.2018 в 16:15.
Причина: Добавил надпись: «Крути вниз!»
|
|
15.09.2018, 17:54
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
Malleys,
|
|
16.09.2018, 01:16
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
|
О, прикольно.. А что такое этот <meter> (раньше не видел такого тега). Он везде будет работать?
|
|
16.09.2018, 01:41
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
а, все-таки, может лучше "по старинке": куда что добавить в первоначальный скрипт, что бы он срабатывал при прокрутке до блока с диаграммой один раз?  |
|
16.09.2018, 01:42
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
Igorsrt,
тогда мой пост смотрите
|
|
16.09.2018, 10:57
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
Сообщение от j0hnik
|
Igorsrt,
тогда мой пост смотрите
|
да, Ваш вариант, вроде бы, подходит, спасибо... только вот одно Но: если все-таки диаграмма изначально попадает в область экрана (например при перезагрузке страницы) , то пока не начнешь прокручивать экран "всё по нулям"... нельзя ли это тоже подправить?  |
|
16.09.2018, 13:41
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
анимация чисел в зоне видимости гистограмма jquery
<!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");
var visibility = checkViewport(el);
$(el).on("animeNum", function() {
$({
n: 0
}).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
})
}
})
}).data("visibility", visibility);
visibility && $(el).trigger("animeNum")
});
function checkViewport(elem) {
var rect = elem.getBoundingClientRect();
var y = rect.bottom / (innerHeight + rect.bottom - rect.top);
var isInView = y > 0 && y < 1;
return isInView
}
jQuery.fn.scrollComplete = function(fn, ms) {
var timer = null;
this.scroll(function() {
if (timer) clearTimeout(timer);
timer = setTimeout(fn, ms)
})
};
$(window).scrollComplete(function() {
num.each(function(indx, el) {
var visibility = checkViewport(el);
el = $(el);
var old = el.data("visibility");
old != visibility && el.data("visibility", visibility) && !old && el.trigger("animeNum")
})
},
100)
});
</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>
|
|
|
|
