michi.vonah/website-v3
1
0
Fork 0
mirror of https://github.com/michivonah/website-v3.git synced 2025-12-22 21:36:28 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

implement animations on scroll

Browse source
This commit is contained in:
Michi 2025-03-20 21:49:02 +01:00
parent f5745b9e81
commit 448ae8a49b
5 changed files with 121 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

38
static/main.js
View file

@ -70,20 +70,27 @@ function updateNavStyle(){
// intersection observer for animations
// credits: https://coolcssanimation.com/how-to-trigger-a-css-animation-on-scroll/
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
const actionObject = entry.target.querySelector('.contact-title');
if (entry.isIntersecting) {
actionObject.classList.add('typewriter-animation');
return;
}
actionObject.classList.remove('typewriter-animation');
});
});
observer.observe(document.querySelector('.contact-title-wrapper'));
function animationOnScroll(triggerSelector, animationClass, targetElement){
const trigger = document.querySelector(triggerSelector);
const target = ((targetElement) ? document.querySelector(targetElement) : trigger);
if(trigger){
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
target.classList.add(animationClass);
}
else{
target.classList.remove(animationClass);
}
});
}, { rootMargin: '0px 0px 5% 0px', threshold: 0.1 });
return observer.observe(trigger);
}
}
animationOnScroll('.contact-title-wrapper', 'typewriter-animation', '.contact-title');
// calculate age
function calculateAge(selector){
@ -145,8 +152,9 @@ async function getProjectCard(data){
});
const container = document.createElement("div");
container.classList = "project-card";
container.classList = "project-card fade-up";
container.classList.add(category);
//container.style.animation = "fade-up var(--baseDuration) linear";
//container.style.backgroundImage = `url(${image})`;
const cardFirst = document.createElement("div");