56 lines
2.1 KiB
JavaScript
56 lines
2.1 KiB
JavaScript
/* ============================================================================
|
|
SoftSPM - wejście bloków i liczniki
|
|
Delikatne pojawianie się sekcji przy przewijaniu oraz naliczanie liczb
|
|
w pasku Akademii. Wszystko wyłącza się przy prefers-reduced-motion,
|
|
a bez JavaScriptu treść i tak jest widoczna - styl startowy nakładamy
|
|
dopiero po dodaniu klasy js-reveal.
|
|
========================================================================= */
|
|
(function () {
|
|
'use strict';
|
|
|
|
var supported = 'IntersectionObserver' in window && 'classList' in document.documentElement;
|
|
var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
|
|
if (!supported || reduced) {
|
|
return;
|
|
}
|
|
|
|
document.documentElement.classList.add('js-reveal');
|
|
|
|
function countUp(node) {
|
|
var target = parseInt(node.getAttribute('data-count'), 10);
|
|
if (isNaN(target)) { return; }
|
|
var suffix = node.getAttribute('data-suffix') || '';
|
|
var duration = 900;
|
|
var started = null;
|
|
|
|
function step(now) {
|
|
if (started === null) { started = now; }
|
|
var progress = Math.min(1, (now - started) / duration);
|
|
// wyhamowanie na końcu - liczba dobija do wartości, nie przeskakuje
|
|
var eased = 1 - Math.pow(1 - progress, 3);
|
|
node.textContent = Math.round(target * eased) + suffix;
|
|
if (progress < 1) { requestAnimationFrame(step); }
|
|
}
|
|
|
|
node.textContent = '0' + suffix;
|
|
requestAnimationFrame(step);
|
|
}
|
|
|
|
var observer = new IntersectionObserver(function (entries) {
|
|
for (var i = 0; i < entries.length; i++) {
|
|
var entry = entries[i];
|
|
if (!entry.isIntersecting) { continue; }
|
|
var node = entry.target;
|
|
node.classList.add('is-in');
|
|
observer.unobserve(node);
|
|
|
|
var counters = node.querySelectorAll('[data-count]');
|
|
for (var c = 0; c < counters.length; c++) { countUp(counters[c]); }
|
|
}
|
|
}, { rootMargin: '0px 0px -12% 0px', threshold: 0.12 });
|
|
|
|
var blocks = document.querySelectorAll('[data-reveal]');
|
|
for (var i = 0; i < blocks.length; i++) { observer.observe(blocks[i]); }
|
|
})();
|