Maidens Veil Pt II

Feb 7

Written By Joseph Ibrahim

#Arnold #HtoA #Houdini #Solaris #Procedural #MaidensVeilMushroom2

Joseph Ibrahim

Joseph Omar is a portrait and fashion photographer living in Brooklyn, NY.

http://www.josephomar.co

Midjourney (One year in…)

Maidens Veil

// Function to set up scroll animations using IntersectionObserver function setupScrollObserver() { // Check if IntersectionObserver is supported by the browser if ('IntersectionObserver' in window) { const observerOptions = { root: null, // Observe intersections relative to the viewport rootMargin: '0px', // No margin around the root threshold: 0.15 // Trigger when 15% of the element is visible }; // Create a new IntersectionObserver const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { // If the element is intersecting (visible) if (entry.isIntersecting) { entry.target.classList.add('in-view'); // Add 'in-view' class for CSS animations observer.unobserve(entry.target); // Stop observing once it's in view (one-shot animation) } }); }, observerOptions); // Observe all elements with the 'scroll-animate' class document.querySelectorAll('.scroll-animate').forEach(el => { observer.observe(el); }); } else { // Fallback for browsers that do not support IntersectionObserver // Immediately add 'in-view' class to all 'scroll-animate' elements document.querySelectorAll('.scroll-animate').forEach(el => { el.classList.add('in-view'); }); } } // Initialize all animations and page setup once the DOM is fully loaded document.addEventListener('DOMContentLoaded', function() { goReady(); // Call function to set page to 'ready' state and setup initial animations setupPageTransitions(); // Initialize page transition logic setupScrollObserver(); // Initialize scroll-triggered animations }); // Fallback: If DOMContentLoaded doesn't fire (e.g., in some edge cases or slow loads), // try to initialize after a 2-second timeout. setTimeout(function() { if (!document.documentElement.classList.contains('ready')) { goReady(); setupPageTransitions(); setupScrollObserver(); } }, 2000); // 2-second delay // Function for special handling/adjustments based on screen size function adjustForLargeScreens() { // Check if the window width is greater than 1440px if (window.innerWidth > 1440) { // Adjust CSS variables for portfolio transition duration and delay step on large screens document.documentElement.style.setProperty('--portfolio-transition-duration', '2.2s'); document.documentElement.style.setProperty('--portfolio-delay-step', '0.15s'); } else { // Revert to default values for smaller screens document.documentElement.style.setProperty('--portfolio-transition-duration', '1.8s'); document.documentElement.style.setProperty('--portfolio-delay-step', '0.1s'); } } // Run screen size adjustments when the page loads and when it's resized window.addEventListener('load', adjustForLargeScreens); window.addEventListener('resize', adjustForLargeScreens);