-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Dae Sanghwi
committed
Nov 19, 2024
1 parent
f214e2a
commit edf33d4
Showing
4 changed files
with
618 additions
and
121 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| class AnimationManager { | ||
| constructor() { | ||
| this.init(); | ||
| this.setupIntersectionObserver(); | ||
| this.setupPageTransitions(); | ||
| } | ||
|
|
||
| init() { | ||
| // Prevent animations on page load | ||
| document.documentElement.classList.add('preload'); | ||
| window.addEventListener('load', () => { | ||
| document.documentElement.classList.remove('preload'); | ||
| this.animateHeroSection(); | ||
| this.checkVisibleSections(); | ||
| }); | ||
| } | ||
|
|
||
| setupIntersectionObserver() { | ||
| // Create observer for sections | ||
| this.observer = new IntersectionObserver((entries) => { | ||
| entries.forEach(entry => { | ||
| if (entry.isIntersecting) { | ||
| entry.target.classList.add('visible'); | ||
| if (entry.target.classList.contains('project-card')) { | ||
| entry.target.style.transitionDelay = `${Math.random() * 0.3}s`; | ||
| } | ||
| } | ||
| }); | ||
| }, { | ||
| threshold: 0.1, | ||
| rootMargin: '0px' | ||
| }); | ||
|
|
||
| // Observe all sections and project cards | ||
| document.querySelectorAll('section, .project-card').forEach(element => { | ||
| this.observer.observe(element); | ||
| }); | ||
| } | ||
|
|
||
| setupPageTransitions() { | ||
| // Create transition overlay | ||
| const overlay = document.createElement('div'); | ||
| overlay.className = 'page-transition'; | ||
| document.body.appendChild(overlay); | ||
|
|
||
| // Handle navigation | ||
| document.querySelectorAll('a[href^="#"]').forEach(link => { | ||
| link.addEventListener('click', (e) => { | ||
| e.preventDefault(); | ||
| const target = document.querySelector(link.getAttribute('href')); | ||
| if (target) { | ||
| this.transitionToSection(target, link.getAttribute('href')); | ||
| } | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| async transitionToSection(target, hash) { | ||
| const overlay = document.querySelector('.page-transition'); | ||
|
|
||
| // Start transition | ||
| overlay.classList.add('active'); | ||
| await this.delay(600); // Match the CSS transition duration | ||
|
|
||
| // Update URL and scroll | ||
| history.pushState(null, null, hash); | ||
| target.scrollIntoView(); | ||
|
|
||
| // End transition | ||
| overlay.classList.remove('active'); | ||
| await this.delay(600); | ||
|
|
||
| // Animate target section | ||
| target.classList.add('visible'); | ||
| } | ||
|
|
||
| animateHeroSection() { | ||
| const hero = document.querySelector('.hero'); | ||
| if (hero) { | ||
| hero.classList.add('animate'); | ||
| setTimeout(() => { | ||
| hero.classList.add('visible'); | ||
| }, 600); | ||
| } | ||
| } | ||
|
|
||
| checkVisibleSections() { | ||
| // Initial check for visible sections | ||
| const sections = document.querySelectorAll('section, .project-card'); | ||
| sections.forEach(section => { | ||
| const rect = section.getBoundingClientRect(); | ||
| if (rect.top < window.innerHeight && rect.bottom >= 0) { | ||
| section.classList.add('visible'); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| delay(ms) { | ||
| return new Promise(resolve => setTimeout(resolve, ms)); | ||
| } | ||
|
|
||
| showLoadingScreen() { | ||
| const loadingScreen = document.createElement('div'); | ||
| loadingScreen.className = 'loading-screen'; | ||
| loadingScreen.innerHTML = '<div class="loading-animation"></div>'; | ||
| document.body.appendChild(loadingScreen); | ||
| return loadingScreen; | ||
| } | ||
|
|
||
| hideLoadingScreen(loadingScreen) { | ||
| loadingScreen.classList.add('hidden'); | ||
| setTimeout(() => { | ||
| loadingScreen.remove(); | ||
| }, 600); | ||
| } | ||
| } | ||
|
|
||
| // Initialize animation manager when DOM is ready | ||
| document.addEventListener('DOMContentLoaded', () => { | ||
| window.animationManager = new AnimationManager(); | ||
| }); |
Oops, something went wrong.