Jontil88
2b462bc0e6
- Static HTML hotel website with Bootstrap 5 - i18next-based client-side internationalization - Language switcher (DE/EN) in navbar - German and English translation JSON files - Translated: navigation, content, forms, FAQ, legal pages (AGB) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
88 lines
No EOL
2.3 KiB
JavaScript
88 lines
No EOL
2.3 KiB
JavaScript
(function () {
|
||
|
||
'use trict';
|
||
// How long you want the animation to take, in ms
|
||
const animationDuration = 2000;
|
||
// Calculate how long each ‘frame’ should last if we want to update the animation 60 times per second
|
||
const frameDuration = 1000 / 60;
|
||
// Use that to calculate how many frames we need to complete the animation
|
||
const totalFrames = Math.round( animationDuration / frameDuration );
|
||
// An ease-out function that slows the count as it progresses
|
||
const easeOutQuad = t => t * ( 2 - t );
|
||
|
||
|
||
const numberWithCommas = n => {
|
||
return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||
}
|
||
|
||
// The animation function, which takes an Element
|
||
const animateCountUp = el => {
|
||
let frame = 0;
|
||
const countTo = parseInt( el.innerHTML, 10 );
|
||
// Start the animation running 60 times per second
|
||
const counter = setInterval( () => {
|
||
frame++;
|
||
// Calculate our progress as a value between 0 and 1
|
||
// Pass that value to our easing function to get our
|
||
// progress on a curve
|
||
const progress = easeOutQuad( frame / totalFrames );
|
||
// Use the progress value to calculate the current count
|
||
const currentCount = Math.round( countTo * progress );
|
||
|
||
// If the current count has changed, update the element
|
||
if ( parseInt( el.innerHTML, 10 ) !== currentCount ) {
|
||
el.innerHTML = numberWithCommas(currentCount);
|
||
}
|
||
|
||
// If we’ve reached our last frame, stop the animation
|
||
if ( frame === totalFrames ) {
|
||
clearInterval( counter );
|
||
}
|
||
}, frameDuration );
|
||
};
|
||
|
||
// Run the animation on all elements with a class of ‘countup’
|
||
const runAnimations = () => {
|
||
const countupEls = document.querySelectorAll( '.countup' );
|
||
countupEls.forEach( animateCountUp );
|
||
};
|
||
|
||
|
||
|
||
|
||
// In Viewed
|
||
var elements;
|
||
var windowHeight;
|
||
|
||
function init() {
|
||
elements = document.querySelectorAll('.section-counter');
|
||
windowHeight = window.innerHeight;
|
||
}
|
||
|
||
function checkPosition() {
|
||
var i;
|
||
for (i = 0; i < elements.length; i++) {
|
||
var element = elements[i];
|
||
var positionFromTop = elements[i].getBoundingClientRect().top;
|
||
if (positionFromTop - windowHeight <= 0) {
|
||
if( !element.classList.contains('viewed') ) {
|
||
element.classList.add('viewed');
|
||
runAnimations();
|
||
} else {
|
||
if ( element.classList.contains('viewed') ) {
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
window.addEventListener('scroll', checkPosition);
|
||
window.addEventListener('resize', init);
|
||
|
||
init();
|
||
checkPosition();
|
||
|
||
|
||
})() |