01234567890 01234567890
wait, wait...
100

/* Reset and base styles */ /* Header styles */ /* Video grid */ /* Video overlay */ /* Play button */ /* Video info */ /* Modal styles */ /* Loading animation */ /* Responsive design */ /* Smooth scrolling */ /* Custom scrollbar */ /* Scroll Animation Styles */ /* Initial hidden state for scroll animations */ /* Animation classes triggered by JavaScript */ /* Stagger delays for better visual flow */ /* Add decorative header accent */ // Get all video items and modal elements // Initialize the video portfolio // Add loading state // Video loaded event // Set video poster frame (first frame) // Handle video loading errors // Click event for opening modal // Hover effects for desktop // Keyboard navigation // Modal event listeners if (video.readyState >= 2) { // HAVE_CURRENT_DATA // Set modal content // Show modal with animation // Add entrance animation // Auto-play video in modal // Pause and reset modal video // Hide modal with animation // Close button click // Click outside video to close // Escape key to close // Prevent modal video controls from closing modal // Handle fullscreen changes // Exited fullscreen, ensure modal is still visible // Lazy loading for performance optimization // Initialize lazy loading and scroll animations // Performance optimization: Pause all videos when modal opens // Handle window resize for responsive adjustments // Recalculate video dimensions if needed // Add smooth scroll behavior for better UX // Keyboard shortcuts // Only handle shortcuts when modal is closed // Initialize tooltips for better accessibility // Add focus indicators // Initialize accessibility features // Add loading progress indicator // You could add a progress bar here if needed // Add any completion callbacks here // Initialize loading progress tracking // Setup scroll animations for video grid // Add delay class for staggered animation // Choose animation based on position // Stop observing this element // Observe all video items // Add header animation // Fallback for browsers without Intersection Observer
Keep Scrolling