Show statistics animation in viewport only
This commit is contained in:
parent
aaae228cfd
commit
c6e6121f06
1 changed files with 37 additions and 15 deletions
|
@ -8,21 +8,43 @@ $(function() {
|
||||||
.then(handleFetchError)
|
.then(handleFetchError)
|
||||||
.then(handleFetchResponse)
|
.then(handleFetchResponse)
|
||||||
.then(function(response) {
|
.then(function(response) {
|
||||||
showStatistic(
|
/**
|
||||||
$('#wishes .value'),
|
* Intersection observer
|
||||||
response.data.wishes.count,
|
*
|
||||||
0
|
* @link https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
|
||||||
);
|
*/
|
||||||
showStatistic(
|
var observerOptions = {
|
||||||
$('#wishlists .value'),
|
rootMargin : '0px',
|
||||||
response.data.wishlists.count,
|
threshold : 0
|
||||||
0
|
};
|
||||||
);
|
var observerCallbackWishes = (entries, observer) => {
|
||||||
showStatistic(
|
entries.forEach(entry => {
|
||||||
$('#users .value'),
|
if (entry.isIntersecting) {
|
||||||
response.data.users.count,
|
showStatistic($('#wishes .value'), response.data.wishes.count, 0);
|
||||||
0
|
}
|
||||||
);
|
});
|
||||||
|
};
|
||||||
|
var observerCallbackWishlists = (entries, observer) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
showStatistic($('#wishlists .value'), response.data.wishlists.count, 0);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
var observerCallbackUsers = (entries, observer) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
showStatistic($('#users .value'), response.data.users.count, 0);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
var observerWishes = new IntersectionObserver(observerCallbackWishes, observerOptions);
|
||||||
|
var observerWishlists = new IntersectionObserver(observerCallbackWishlists, observerOptions);
|
||||||
|
var observerUsers = new IntersectionObserver(observerCallbackUsers, observerOptions);
|
||||||
|
|
||||||
|
observerWishes.observe(document.querySelector('#wishes'));
|
||||||
|
observerWishlists.observe(document.querySelector('#wishlists'));
|
||||||
|
observerUsers.observe(document.querySelector('#users'));
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue