import React, { useRef } from 'react'; import './App.css'; const App = () => { const containerRef = useRef(null); return (

); }; export default App; :root { --primary-color: #1a1a2e; --secondary-color: #16213e; --accent-color: #0f3460; --highlight-color: #e94560; --square-size: 150px; } body { margin: 0; padding: 0; font-family: 'Arial', sans-serif; overflow-x: hidden; background-color: var(--primary-color); color: white; } .app-container { position: relative; height: 500vh; } .fixed-element { position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%); z-index: 10; } .parallax-section { position: relative; height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; } .floating-element { position: absolute; opacity: 0; transition: all 0.8s ease-out var(--delay); transform: translateY(50px); } .floating-element.visible { opacity: 1; transform: translateY(0); } .square { width: var(--square-size); height: var(--square-size); background-color: var(--highlight-color); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease; } .square:hover { transform: scale(1.05); } import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import './index.css'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } import { useEffect, useState } from 'react'; const useParallax = (containerRef) => { const [visibleElements, setVisibleElements] = useState([]); useEffect(() => { const handleScroll = () => { if (!containerRef.current) return; const elements = document.querySelectorAll('.floating-element'); const newVisibleElements = []; elements.forEach((element, index) => { const rect = element.getBoundingClientRect(); const isVisible = rect.top < window.innerHeight * 0.8; if (isVisible) { newVisibleElements[index] = true; element.classList.add('visible'); } }); setVisibleElements(newVisibleElements); }; window.addEventListener('scroll', handleScroll); handleScroll(); // Initial check return () => { window.removeEventListener('scroll', handleScroll); }; }, [containerRef]); return visibleElements; }; export default useParallax; import React, { useRef } from 'react'; import './App.css'; import useParallax from './useParallax'; const App = () => { const containerRef = useRef(null); useParallax(containerRef); return (

); }; export default App;