3D text effects can transform ordinary typography into eye-catching, dynamic visuals. These effects are perfect for adding depth and dimension to your designs.
In this article, we will explore 10 stunning 3D text effect examples that can elevate your creative projects. Each example showcases unique techniques and styles to inspire your next design endeavor.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Subframe's drag-and-drop interface and intuitive, responsive canvas make it easy to create pixel-perfect 3D text effects. Loved by designers and developers alike, Subframe ensures stunning results every time.
Start for free and elevate your design game today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Ready to elevate your design game? With Subframe, you can create stunning UIs, including 3D text effects, with unmatched efficiency and precision.
Experience the power of pixel-perfect design and start creating immediately. Start for free today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>INCEPTION: ORIGINS | Movie Trailer</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700;900&display=swap'); body { background-color: #0a0a0a; color: #ffffff; perspective: 1000px; overflow-x: hidden; height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; } .trailer-container { width: 100%; max-width: 700px; height: 100%; max-height: 700px; overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: center; } .bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; z-index: -1; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)); z-index: -1; } .content { padding: 2rem; position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } .title-container { position: relative; margin-bottom: 2rem; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .title-container:hover { transform: scale(1.05) translateZ(20px); } .title { font-size: 4.5rem; font-weight: 900; letter-spacing: 0.3rem; text-transform: uppercase; color: #e8e8e8; text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.3), 0 10px 30px rgba(0, 0, 0, 0.8); transform: translateZ(50px); transition: all 0.3s ease; animation: titlePulse 4s infinite alternate; } .subtitle { font-size: 1.8rem; font-weight: 300; letter-spacing: 0.2rem; color: #b8b8b8; text-shadow: 0 0 15px rgba(0, 0, 0, 0.8); margin-top: -10px; transform: translateZ(30px); animation: subtitleFloat 5s infinite alternate; } .synopsis { max-width: 80%; text-align: center; font-size: 1rem; line-height: 1.6; margin-bottom: 2rem; color: #d8d8d8; text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); transform: translateZ(20px); opacity: 0; animation: fadeIn 1s forwards 0.5s; } .release-date { font-size: 1.5rem; font-weight: 700; letter-spacing: 0.2rem; color: #ff0044; text-shadow: 0 0 15px rgba(255, 0, 68, 0.6); margin-bottom: 2rem; opacity: 0; animation: fadeIn 1s forwards 0.8s, datePulse 3s infinite alternate 1s; } .cta-button { position: relative; padding: 0.8rem 2.5rem; font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1rem; background: linear-gradient(135deg, #ff0044, #ff6a00); border: none; color: white; cursor: pointer; border-radius: 0; overflow: hidden; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(255, 0, 68, 0.4); opacity: 0; animation: fadeIn 1s forwards 1s; z-index: 20; } .cta-button:before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: 0.5s; } .cta-button:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(255, 0, 68, 0.6); } .cta-button:hover:before { left: 100%; } .video-reflection { position: absolute; width: 80%; height: 20%; bottom: -25%; left: 10%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent); filter: blur(5px); transform: rotateX(180deg) scaleY(0.4); opacity: 0.4; pointer-events: none; } .floating-particles { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; z-index: 1; } .particle { position: absolute; background: radial-gradient(circle, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)); border-radius: 50%; pointer-events: none; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); display: flex; justify-content: center; align-items: center; z-index: 100; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .modal.active { opacity: 1; visibility: visible; } .modal-content { position: relative; width: 90%; max-width: 800px; aspect-ratio: 16/9; background-color: #000; border: 1px solid #333; box-shadow: 0 0 30px rgba(255, 0, 68, 0.5); } .close-modal { position: absolute; top: -40px; right: 0; color: white; font-size: 1.5rem; cursor: pointer; background: none; border: none; transition: all 0.2s ease; } .close-modal:hover { transform: scale(1.2); color: #ff0044; } .rating { position: absolute; top: 2rem; right: 2rem; font-size: 1rem; color: #ffffff; background-color: rgba(255, 0, 68, 0.8); padding: 0.3rem 0.7rem; border-radius: 4px; font-weight: 700; letter-spacing: 0.1rem; transform: rotate(5deg); box-shadow: 0 0 15px rgba(255, 0, 68, 0.5); opacity: 0; animation: fadeIn 1s forwards 1.2s; } @keyframes titlePulse { 0%, 100% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.3), 0 10px 30px rgba(0, 0, 0, 0.8); } 50% { text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 30px rgba(255, 255, 255, 0.5), 0 10px 40px rgba(0, 0, 0, 0.8); } } @keyframes subtitleFloat { 0%, 100% { transform: translateZ(30px) translateY(0); } 50% { transform: translateZ(30px) translateY(-5px); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes datePulse { 0%, 100% { color: #ff0044; text-shadow: 0 0 15px rgba(255, 0, 68, 0.6); } 50% { color: #ff6a00; text-shadow: 0 0 15px rgba(255, 106, 0, 0.6); } } @media (max-width: 768px) { .title { font-size: 3rem; } .subtitle { font-size: 1.2rem; } .synopsis { font-size: 0.9rem; max-width: 95%; } .release-date { font-size: 1.2rem; } .cta-button { padding: 0.7rem 2rem; font-size: 1rem; } .rating { top: 1rem; right: 1rem; font-size: 0.8rem; } } @media (max-width: 480px) { .title { font-size: 2rem; } .subtitle { font-size: 1rem; margin-top: -5px; } .content { padding: 1rem; } .cta-button { padding: 0.6rem 1.5rem; font-size: 0.9rem; } } </style> </head> <body> <div class="trailer-container"> <div class="overlay"></div> <video class="bg-video" autoplay loop muted playsinline> <source src="https://assets.mixkit.co/videos/preview/mixkit-spinning-top-in-a-blue-environment-9748-large.mp4" type="video/mp4"> </video> <div class="content"> <div class="rating">PG-13</div> <div class="title-container"> <h1 class="title">INCEPTION</h1> <p class="subtitle">ORIGINS</p> </div> <p class="synopsis">Fifteen years before the events of "Inception," Cobb and Arthur form their unlikely partnership as dream-sharing technology is militarized. When a dangerous new method threatens to weaponize the subconscious, they must navigate layers of deceit to protect the very fabric of reality.</p> <div class="release-date">SUMMER 2024</div> <button class="cta-button" id="watchTrailer">WATCH TRAILER</button> <div class="video-reflection"></div> </div> <div class="floating-particles" id="particles"></div> </div> <div class="modal" id="trailerModal"> <div class="modal-content"> <button class="close-modal" id="closeModal">×</button> <div style="padding:56.25% 0 0 0;position:relative;"> <iframe width="100%" height="100%" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // 3D effect based on mouse movement const container = document.querySelector('.trailer-container'); const titleContainer = document.querySelector('.title-container'); const title = document.querySelector('.title'); const subtitle = document.querySelector('.subtitle'); container.addEventListener('mousemove', function(e) { const xAxis = (window.innerWidth / 2 - e.pageX) / 25; const yAxis = (window.innerHeight / 2 - e.pageY) / 25; titleContainer.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg) scale(1.05)`; title.style.textShadow = ` ${xAxis * 0.5}px ${yAxis * 0.5}px 10px rgba(255, 255, 255, 0.5), ${xAxis}px ${yAxis}px 20px rgba(255, 255, 255, 0.3), ${xAxis * 1.5}px ${yAxis * 1.5}px 30px rgba(0, 0, 0, 0.8) `; subtitle.style.transform = `translateZ(30px) translateX(${-xAxis * 0.5}px) translateY(${-yAxis * 0.5}px)`; }); // Reset transforms when mouse leaves container.addEventListener('mouseleave', function() { titleContainer.style.transform = 'rotateY(0deg) rotateX(0deg) scale(1)'; title.style.textShadow = '0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.3), 0 10px 30px rgba(0, 0, 0, 0.8)'; subtitle.style.transform = 'translateZ(30px)'; }); // Generate floating particles const particlesContainer = document.getElementById('particles'); const particleCount = 50; for (let i = 0; i < particleCount; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); // Random size between 2-8px const size = Math.random() * 6 + 2; particle.style.width = `${size}px`; particle.style.height = `${size}px`; // Random starting position const posX = Math.random() * 100; const posY = Math.random() * 100; particle.style.left = `${posX}%`; particle.style.top = `${posY}%`; // Random opacity particle.style.opacity = Math.random() * 0.5 + 0.1; // Animation properties const duration = Math.random() * 15 + 10; const delay = Math.random() * 5; particle.style.animation = `floatParticle ${duration}s infinite ease-in-out ${delay}s`; // Add keyframe animation dynamically const styleSheet = document.styleSheets[0]; const keyframes = ` @keyframes floatParticle { 0% { transform: translate(0, 0); } 50% { transform: translate(${Math.random() * 40 - 20}px, ${Math.random() * 40 - 20}px); } 100% { transform: translate(0, 0); } }`; try { styleSheet.insertRule(keyframes, styleSheet.cssRules.length); } catch(e) { console.warn('Could not insert CSS rule:', e); } particlesContainer.appendChild(particle); } // Modal functionality const watchButton = document.getElementById('watchTrailer'); const modal = document.getElementById('trailerModal'); const closeModal = document.getElementById('closeModal'); watchButton.addEventListener('click', function() { modal.classList.add('active'); // For demonstration, no actual trailer loaded }); closeModal.addEventListener('click', function() { modal.classList.remove('active'); }); // Close modal when clicking outside of content window.addEventListener('click', function(e) { if (e.target === modal) { modal.classList.remove('active'); } }); // Prevent form submit for demo purposes document.addEventListener('submit', function(e) { e.preventDefault(); return false; }); }); </script> </body> </html>
<html> <head> <style> :root { --neon-blue: #00f3ff; --neon-purple: #ff00f5; --neon-green: #00ff8e; --dark-bg: #070b18; --cyber-yellow: #ffe600; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Rajdhani', sans-serif; } body { background-color: var(--dark-bg); min-height: 700px; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; position: relative; width: 100%; max-width: 700px; margin: 0 auto; padding: 20px; } body::before { content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(45deg, var(--dark-bg) 25%, transparent 25%, transparent 75%, var(--dark-bg) 75%, var(--dark-bg)), linear-gradient(45deg, var(--dark-bg) 25%, rgba(7, 11, 24, 0.8) 25%, rgba(7, 11, 24, 0.8) 75%, var(--dark-bg) 75%, var(--dark-bg)); background-size: 60px 60px; background-position: 0 0, 30px 30px; opacity: 0.1; } #container { position: relative; width: 100%; max-width: 650px; height: 100%; z-index: 1; } .glitch-container { position: relative; display: flex; justify-content: center; margin-bottom: 30px; transform-style: preserve-3d; perspective: 1000px; } .main-title { font-size: 4.5rem; font-weight: 700; text-align: center; color: white; text-transform: uppercase; letter-spacing: 4px; position: relative; transform-style: preserve-3d; animation: pulse 3s infinite; } .main-title::before, .main-title::after { content: 'NEXUS'; position: absolute; width: 100%; height: 100%; left: 0; top: 0; transform-style: preserve-3d; } .main-title::before { color: var(--neon-blue); animation: glitch-left 4.5s infinite; clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); transform: translate(-2px, 0); } .main-title::after { color: var(--neon-purple); animation: glitch-right 4.8s infinite; clip-path: polygon(0 80%, 100% 20%, 100% 100%, 0 100%); transform: translate(2px, 0); } .subtitle { font-size: 1.5rem; color: white; text-align: center; margin-bottom: 20px; opacity: 0.9; text-transform: uppercase; letter-spacing: 2px; font-weight: 300; transform: translateZ(20px); } .game-categories { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 40px; perspective: 1000px; } .category { position: relative; width: 120px; height: 120px; border-radius: 10px; overflow: hidden; cursor: pointer; transform-style: preserve-3d; transition: transform 0.5s, box-shadow 0.5s; box-shadow: 0 0 15px rgba(0, 243, 255, 0.3); } .category:hover { transform: translateZ(20px) scale(1.05); box-shadow: 0 0 25px var(--neon-blue), 0 0 35px rgba(0, 243, 255, 0.2); } .category:nth-child(2n):hover { box-shadow: 0 0 25px var(--neon-purple), 0 0 35px rgba(255, 0, 245, 0.2); } .category:nth-child(3n):hover { box-shadow: 0 0 25px var(--neon-green), 0 0 35px rgba(0, 255, 142, 0.2); } .category::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0, 243, 255, 0.3), rgba(255, 0, 245, 0.3)); z-index: 1; } .category:nth-child(2n)::before { background: linear-gradient(135deg, rgba(255, 0, 245, 0.3), rgba(0, 255, 142, 0.3)); } .category:nth-child(3n)::before { background: linear-gradient(135deg, rgba(0, 255, 142, 0.3), rgba(0, 243, 255, 0.3)); } .category-icon { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: white; font-size: 2rem; position: relative; z-index: 2; } .category-label { position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; color: white; font-size: 0.9rem; font-weight: 500; z-index: 2; text-transform: uppercase; letter-spacing: 1px; } .search-bar { position: relative; width: 80%; max-width: 500px; margin: 30px auto; perspective: 1000px; } .search-input { width: 100%; padding: 12px 20px; padding-right: 50px; border: none; background: rgba(255, 255, 255, 0.08); border-radius: 25px; color: white; font-size: 1rem; outline: none; box-shadow: 0 0 10px rgba(0, 243, 255, 0.2); transition: box-shadow 0.3s, transform 0.3s; transform-style: preserve-3d; } .search-input:focus { box-shadow: 0 0 20px var(--neon-blue), 0 0 30px rgba(0, 243, 255, 0.2); transform: translateZ(10px); } .search-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--neon-blue); font-size: 1.2rem; cursor: pointer; } .grid-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.1; background-image: linear-gradient(rgba(0, 243, 255, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 243, 255, 0.2) 1px, transparent 1px); background-size: 40px 40px; background-position: center center; animation: grid-move 15s linear infinite; } .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; } .particle { position: absolute; display: block; opacity: 0; animation: particles 15s linear infinite; } .user-status { position: absolute; top: 20px; right: 20px; display: flex; align-items: center; gap: 10px; color: white; font-size: 0.9rem; padding: 8px 15px; border-radius: 20px; background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 10px rgba(0, 243, 255, 0.2); cursor: pointer; transition: box-shadow 0.3s, transform 0.3s; } .user-status:hover { box-shadow: 0 0 15px var(--cyber-yellow), 0 0 20px rgba(255, 230, 0, 0.2); transform: scale(1.05); } .user-avatar { width: 25px; height: 25px; border-radius: 50%; background-color: var(--neon-purple); display: flex; justify-content: center; align-items: center; font-size: 0.8rem; font-weight: bold; } .featured-game { width: 100%; max-width: 500px; margin: 0 auto 30px; border-radius: 10px; padding: 15px; background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 15px rgba(0, 243, 255, 0.15); position: relative; overflow: hidden; transform-style: preserve-3d; transition: transform 0.5s, box-shadow 0.5s; } .featured-game:hover { transform: translateZ(15px) scale(1.02); box-shadow: 0 0 25px var(--neon-green), 0 0 35px rgba(0, 255, 142, 0.2); } .featured-game::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--neon-green); box-shadow: 0 0 15px var(--neon-green); } .featured-label { position: absolute; top: 10px; right: 10px; padding: 5px 10px; background: rgba(0, 255, 142, 0.2); color: var(--neon-green); font-size: 0.8rem; border-radius: 5px; font-weight: bold; text-transform: uppercase; } .featured-title { color: white; font-size: 1.4rem; margin-bottom: 5px; transform: translateZ(10px); } .featured-desc { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; margin-bottom: 10px; } .play-button { display: inline-block; padding: 8px 20px; background: var(--neon-green); color: black; font-weight: bold; text-transform: uppercase; border-radius: 5px; font-size: 0.9rem; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; box-shadow: 0 0 10px rgba(0, 255, 142, 0.5); } .play-button:hover { transform: scale(1.05); box-shadow: 0 0 20px var(--neon-green); } /* Animations */ @keyframes glitch-left { 0%, 100% { transform: translate(-2px, 0); } 20% { transform: translate(-4px, 3px); } 40% { transform: translate(-2px, -2px); } 60% { transform: translate(2px, 1px); } 80% { transform: translate(0, 0); } } @keyframes glitch-right { 0%, 100% { transform: translate(2px, 0); } 20% { transform: translate(3px, -2px); } 40% { transform: translate(0, 2px); } 60% { transform: translate(-1px, -1px); } 80% { transform: translate(0, 0); } } @keyframes pulse { 0%, 100% { text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px var(--neon-blue), 0 0 40px var(--neon-purple); } 50% { text-shadow: 0 0 15px white, 0 0 25px white, 0 0 40px var(--neon-blue), 0 0 60px var(--neon-purple); } } @keyframes grid-move { 0% { background-position: 0 0; } 100% { background-position: 40px 40px; } } @keyframes particles { 0% { transform: translateY(0) rotate(0deg); opacity: 0; border-radius: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 50%; } } /* Media Queries */ @media (max-width: 600px) { .main-title { font-size: 3rem; } .subtitle { font-size: 1.2rem; } .category { width: 100px; height: 100px; } .featured-game { padding: 10px; } .featured-title { font-size: 1.2rem; } } @media (max-width: 400px) { .main-title { font-size: 2.5rem; } .subtitle { font-size: 1rem; } .category { width: 80px; height: 80px; } .category-label { font-size: 0.7rem; } } </style> <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head> <body> <div class="grid-bg"></div> <div class="particles" id="particles"></div> <div id="container"> <div class="user-status"> <div class="user-avatar">V</div> <span>VoidRunner</span> </div> <div class="glitch-container"> <h1 class="main-title">NEXUS</h1> </div> <p class="subtitle">Your gateway to virtual worlds</p> <div class="search-bar"> <input type="text" class="search-input" placeholder="Search games, tournaments, players..."> <div class="search-icon"> <i class="fas fa-search"></i> </div> </div> <div class="featured-game"> <div class="featured-label">HOT</div> <h3 class="featured-title">Cyber Drift 2077</h3> <p class="featured-desc">Race through neon-lit streets in this high-octane cyberpunk racing simulator.</p> <div class="play-button">Play Now</div> </div> <div class="game-categories"> <div class="category"> <div class="category-icon"><i class="fas fa-gamepad"></i></div> <div class="category-label">Action</div> </div> <div class="category"> <div class="category-icon"><i class="fas fa-brain"></i></div> <div class="category-label">Strategy</div> </div> <div class="category"> <div class="category-icon"><i class="fas fa-running"></i></div> <div class="category-label">Sports</div> </div> <div class="category"> <div class="category-icon"><i class="fas fa-ghost"></i></div> <div class="category-label">Horror</div> </div> <div class="category"> <div class="category-icon"><i class="fas fa-vr-cardboard"></i></div> <div class="category-label">VR</div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Create particles const particlesContainer = document.getElementById('particles'); const particlesCount = 15; for (let i = 0; i < particlesCount; i++) { createParticle(particlesContainer); } // Interactive elements const categories = document.querySelectorAll('.category'); const searchInput = document.querySelector('.search-input'); const mainTitle = document.querySelector('.main-title'); const featuredGame = document.querySelector('.featured-game'); // Add mouse move effect for 3D tilting document.addEventListener('mousemove', (e) => { const xAxis = (window.innerWidth / 2 - e.pageX) / 25; const yAxis = (window.innerHeight / 2 - e.pageY) / 25; mainTitle.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`; featuredGame.style.transform = `translateZ(15px) rotateY(${xAxis/3}deg) rotateX(${yAxis/3}deg)`; }); // Reset transforms when mouse leaves document.addEventListener('mouseleave', () => { mainTitle.style.transform = 'rotateY(0deg) rotateX(0deg)'; featuredGame.style.transform = 'translateZ(15px)'; }); // Add interactive hover effects for categories categories.forEach(category => { category.addEventListener('mouseenter', () => { // Generate random neon colors const colors = [ 'var(--neon-blue)', 'var(--neon-purple)', 'var(--neon-green)', 'var(--cyber-yellow)' ]; const randomColor = colors[Math.floor(Math.random() * colors.length)]; category.style.boxShadow = `0 0 25px ${randomColor}, 0 0 35px ${randomColor}`; // Create a pulse effect category.animate([ { transform: 'translateZ(20px) scale(1.05)' }, { transform: 'translateZ(25px) scale(1.07)' }, { transform: 'translateZ(20px) scale(1.05)' } ], { duration: 800, iterations: 1 }); }); }); // Interactive search bar searchInput.addEventListener('focus', () => { const searchBar = document.querySelector('.search-bar'); searchBar.style.transform = 'translateZ(20px)'; }); searchInput.addEventListener('blur', () => { const searchBar = document.querySelector('.search-bar'); searchBar.style.transform = 'translateZ(0)'; }); // Play button effect const playButton = document.querySelector('.play-button'); playButton.addEventListener('click', (e) => { e.preventDefault(); // Create ripple effect const ripple = document.createElement('div'); ripple.style.position = 'absolute'; ripple.style.width = '5px'; ripple.style.height = '5px'; ripple.style.background = 'rgba(255, 255, 255, 0.8)'; ripple.style.borderRadius = '50%'; ripple.style.pointerEvents = 'none'; ripple.style.left = `${e.offsetX}px`; ripple.style.top = `${e.offsetY}px`; ripple.style.transform = 'translate(-50%, -50%)'; playButton.appendChild(ripple); ripple.animate([ { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' }, { opacity: 0, transform: 'translate(-50%, -50%) scale(50)' } ], { duration: 800, easing: 'ease-out' }).onfinish = () => { ripple.remove(); }; // Simulate game launching playButton.textContent = 'Loading...'; playButton.style.background = 'var(--dark-bg)'; playButton.style.color = 'var(--neon-green)'; setTimeout(() => { playButton.textContent = 'Play Now'; playButton.style.background = 'var(--neon-green)'; playButton.style.color = 'black'; }, 2000); }); // Add glitch effect on title click mainTitle.addEventListener('click', () => { triggerGlitch(); }); }); function createParticle(container) { const particle = document.createElement('span'); particle.classList.add('particle'); // Random properties const size = Math.random() * 15 + 5; const posX = Math.random() * 100; const delay = Math.random() * 15; const duration = Math.random() * 10 + 15; // Neon colors const colors = [ 'rgba(0, 243, 255, 0.3)', 'rgba(255, 0, 245, 0.3)', 'rgba(0, 255, 142, 0.3)' ]; const color = colors[Math.floor(Math.random() * colors.length)]; // Set styles particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.background = color; particle.style.boxShadow = `0 0 10px ${color}, 0 0 20px ${color}`; particle.style.left = `${posX}%`; particle.style.bottom = '-100px'; particle.style.borderRadius = Math.random() > 0.5 ? '50%' : '0'; // Set animation particle.style.animation = `particles ${duration}s linear ${delay}s infinite`; container.appendChild(particle); } function triggerGlitch() { const mainTitle = document.querySelector('.main-title'); // Add intense glitch effect mainTitle.animate([ { transform: 'translate(-2px, 0) skew(0deg)' }, { transform: 'translate(2px, -2px) skew(2deg)' }, { transform: 'translate(0, 2px) skew(-2deg)' }, { transform: 'translate(2px, 0) skew(0deg)' }, { transform: 'translate(-2px, -1px) skew(-1deg)' }, { transform: 'translate(0, 0) skew(0deg)' } ], { duration: 500, iterations: 2 }); // Create screen shake effect document.getElementById('container').animate([ { transform: 'translate(0, 0)' }, { transform: 'translate(-5px, 5px)' }, { transform: 'translate(5px, -5px)' }, { transform: 'translate(-5px, -5px)' }, { transform: 'translate(5px, 5px)' }, { transform: 'translate(0, 0)' } ], { duration: 500, iterations: 1 }); } </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NexusCorp - Strategic Excellence</title> <style> :root { --primary-color: #2c3e50; --secondary-color: #3498db; --accent-color: #1abc9c; --text-color: #333; --light-color: #f8f9fa; --shadow-color: rgba(0, 0, 0, 0.08); --transition-time: 0.4s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif; } html, body { width: 100%; height: 100%; overflow-x: hidden; background-color: var(--light-color); color: var(--text-color); scroll-behavior: smooth; } .container { width: 100%; max-width: 700px; height: 700px; margin: 0 auto; padding: 20px; position: relative; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--secondary-color) var(--light-color); } .container::-webkit-scrollbar { width: 6px; } .container::-webkit-scrollbar-track { background: var(--light-color); } .container::-webkit-scrollbar-thumb { background-color: var(--secondary-color); border-radius: 6px; } .nav { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; position: sticky; top: 0; background-color: rgba(248, 249, 250, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 100; border-bottom: 1px solid rgba(52, 152, 219, 0.1); } .logo { font-size: 24px; font-weight: 700; color: var(--primary-color); position: relative; } .logo::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background-color: var(--secondary-color); transition: width var(--transition-time) ease; } .logo:hover::after { width: 100%; } .nav-links { display: flex; gap: 20px; } .nav-link { color: var(--primary-color); text-decoration: none; font-weight: 500; font-size: 14px; position: relative; overflow: hidden; padding: 5px 0; transition: color var(--transition-time) ease; } .nav-link::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: var(--secondary-color); transform: translateX(-100%); transition: transform var(--transition-time) ease; } .nav-link:hover { color: var(--secondary-color); } .nav-link:hover::after { transform: translateX(0); } .hero { padding: 40px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; min-height: 300px; } .hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 20% 30%, rgba(26, 188, 156, 0.03) 0%, transparent 20%), radial-gradient(circle at 80% 60%, rgba(52, 152, 219, 0.03) 0%, transparent 20%); pointer-events: none; } .three-d-title { font-size: 48px; font-weight: 800; color: var(--primary-color); text-align: center; margin-bottom: 20px; position: relative; transform-style: preserve-3d; perspective: 500px; transition: transform 0.5s ease; } .three-d-title span { display: inline-block; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05), 2px 2px 2px rgba(0, 0, 0, 0.05), 3px 3px 3px rgba(0, 0, 0, 0.05); transform: translateZ(10px); transition: all 0.3s ease; } .subtitle { font-size: 18px; color: var(--text-color); text-align: center; max-width: 600px; margin-bottom: 30px; opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s forwards 0.5s; } .cta-button { background-color: var(--secondary-color); color: white; border: none; padding: 12px 24px; border-radius: 30px; font-weight: 600; font-size: 16px; cursor: pointer; transition: transform var(--transition-time) ease, box-shadow var(--transition-time) ease; box-shadow: 0 4px 6px rgba(52, 152, 219, 0.1); position: relative; overflow: hidden; z-index: 1; } .cta-button::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.8s ease; z-index: -1; } .cta-button:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(52, 152, 219, 0.2); } .cta-button:hover::before { left: 100%; } .section { padding: 40px 0; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .section.active { opacity: 1; transform: translateY(0); } .section-title { font-size: 32px; font-weight: 700; color: var(--primary-color); margin-bottom: 20px; position: relative; padding-bottom: 10px; } .section-title::after { content: ""; position: absolute; bottom: 0; left: 0; width: 60px; height: 3px; background: linear-gradient(90deg, var(--secondary-color), var(--accent-color)); border-radius: 3px; } .services { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 30px; } .service-card { background-color: white; border-radius: 10px; padding: 25px; box-shadow: 0 10px 20px var(--shadow-color); transition: transform var(--transition-time) ease, box-shadow var(--transition-time) ease; position: relative; overflow: hidden; z-index: 1; cursor: pointer; } .service-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, transparent 0%, rgba(52, 152, 219, 0.03) 50%, transparent 100%); z-index: -1; opacity: 0; transition: opacity var(--transition-time) ease; } .service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px var(--shadow-color); } .service-card:hover::before { opacity: 1; } .service-icon { font-size: 36px; color: var(--secondary-color); margin-bottom: 15px; transition: transform var(--transition-time) ease; } .service-card:hover .service-icon { transform: scale(1.1); } .service-title { font-size: 18px; font-weight: 600; margin-bottom: 10px; color: var(--primary-color); } .service-desc { font-size: 14px; color: var(--text-color); line-height: 1.5; } .testimonials { margin-top: 30px; position: relative; } .testimonial-slider { position: relative; overflow: hidden; border-radius: 10px; height: 180px; } .testimonial { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 20px; background-color: white; box-shadow: 0 10px 20px var(--shadow-color); opacity: 0; transform: translateX(100px); transition: opacity 0.5s ease, transform 0.5s ease; } .testimonial.active { opacity: 1; transform: translateX(0); } .quote { font-size: 16px; line-height: 1.6; font-style: italic; margin-bottom: 15px; } .client { font-weight: 600; color: var(--primary-color); } .company { font-size: 14px; color: var(--secondary-color); } .nav-buttons { display: flex; justify-content: center; gap: 10px; margin-top: 15px; } .nav-btn { background: white; border: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 6px var(--shadow-color); cursor: pointer; transition: all var(--transition-time) ease; } .nav-btn:hover { background-color: var(--secondary-color); color: white; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(52, 152, 219, 0.2); } .footer { margin-top: 40px; padding: 20px 0; text-align: center; font-size: 14px; color: var(--text-color); position: relative; } .footer::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80%; height: 1px; background: linear-gradient(90deg, transparent, var(--secondary-color), transparent); } .social-links { display: flex; justify-content: center; gap: 15px; margin-top: 15px; } .social-link { width: 36px; height: 36px; border-radius: 50%; background-color: var(--light-color); display: flex; align-items: center; justify-content: center; color: var(--primary-color); text-decoration: none; box-shadow: 0 2px 4px var(--shadow-color); transition: all var(--transition-time) ease; } .social-link:hover { background-color: var(--secondary-color); color: white; transform: translateY(-3px) rotate(10deg); box-shadow: 0 4px 8px rgba(52, 152, 219, 0.2); } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } /* Responsive adjustments */ @media (max-width: 600px) { .nav-links { gap: 12px; } .nav-link { font-size: 12px; } .three-d-title { font-size: 36px; } .subtitle { font-size: 16px; padding: 0 10px; } .section-title { font-size: 28px; } .services { grid-template-columns: 1fr; } .service-card { padding: 20px; } } /* Add movement for 3D effect */ #three-d-container { transform-style: preserve-3d; perspective: 1000px; } /* Pattern overlay */ .pattern-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233498db' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; z-index: -1; opacity: 0.5; } /* Glowing effect on 3D text */ .glow { text-shadow: 0 0 5px rgba(52, 152, 219, 0.1), 0 0 10px rgba(52, 152, 219, 0.1); } </style> </head> <body> <div class="pattern-overlay"></div> <div class="container"> <nav class="nav"> <div class="logo">NexusCorp</div> <div class="nav-links"> <a href="#services" class="nav-link">Services</a> <a href="#about" class="nav-link">About</a> <a href="#testimonials" class="nav-link">Clients</a> <a href="#contact" class="nav-link">Contact</a> </div> </nav> <section class="hero"> <div id="three-d-container"> <h1 class="three-d-title" id="three-d-text"><span>Strategic</span> <span class="glow">Excellence</span></h1> </div> <p class="subtitle">We transform business challenges into streamlined solutions with sophisticated technology and data-driven strategies.</p> <button class="cta-button">Schedule a Consultation</button> </section> <section id="services" class="section"> <h2 class="section-title">Our Expertise</h2> <div class="services"> <div class="service-card"> <div class="service-icon">⚙️</div> <h3 class="service-title">Process Optimization</h3> <p class="service-desc">Streamline operations with AI-powered workflow analysis and custom efficiency frameworks.</p> </div> <div class="service-card"> <div class="service-icon">📊</div> <h3 class="service-title">Data Analytics</h3> <p class="service-desc">Transform raw metrics into actionable insights with our proprietary visualization tools.</p> </div> <div class="service-card"> <div class="service-icon">🔒</div> <h3 class="service-title">Cyber Security</h3> <p class="service-desc">Enterprise-grade protection systems with continuous threat monitoring and response.</p> </div> </div> </section> <section id="about" class="section"> <h2 class="section-title">Our Approach</h2> <p>At NexusCorp, we deliver executive-level strategies with tactical precision. Our methodology blends innovation with proven frameworks, ensuring each solution is tailored to your specific business context.</p> <p style="margin-top: 15px;">Operating at the intersection of technology and business intelligence, we create seamless integrations that drive measurable outcomes across your organization.</p> </section> <section id="testimonials" class="section"> <h2 class="section-title">Client Success Stories</h2> <div class="testimonials"> <div class="testimonial-slider"> <div class="testimonial active"> <p class="quote">"NexusCorp's data visualization platform reduced our decision cycle by 68% and directly contributed to a 23% revenue increase in Q2."</p> <p class="client">Katherine Matthews</p> <p class="company">CTO, Meridian Financial</p> </div> <div class="testimonial"> <p class="quote">"Their security implementation detected and neutralized a sophisticated breach attempt that our previous systems completely missed."</p> <p class="client">James Wilson</p> <p class="company">Director of IT, Vertex Healthcare</p> </div> <div class="testimonial"> <p class="quote">"We've achieved unprecedented efficiency after implementing NexusCorp's process optimization framework across our 12 global offices."</p> <p class="client">Alexandra Chen</p> <p class="company">COO, Quantum Logistics</p> </div> </div> <div class="nav-buttons"> <button class="nav-btn" id="prev-btn">←</button> <button class="nav-btn" id="next-btn">→</button> </div> </div> </section> <section id="contact" class="section"> <h2 class="section-title">Connect With Us</h2> <p style="margin-bottom: 20px;">Ready to elevate your business operations? Our strategic consultants are ready to discuss your specific challenges.</p> <button class="cta-button">Request a Strategic Assessment</button> </section> <footer class="footer"> <p>© 2023 NexusCorp · Strategic Business Solutions</p> <div class="social-links"> <a href="#" class="social-link">Li</a> <a href="#" class="social-link">Tw</a> <a href="#" class="social-link">In</a> </div> </footer> </div> <script> // Observer for section animations const sections = document.querySelectorAll('.section'); const observerOptions = { root: null, rootMargin: '0px', threshold: 0.2 }; const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('active'); observer.unobserve(entry.target); } }); }, observerOptions); sections.forEach(section => { observer.observe(section); }); // 3D Text Effect with Mouse Movement const container = document.getElementById('three-d-container'); const text = document.getElementById('three-d-text'); const spans = text.querySelectorAll('span'); container.addEventListener('mousemove', (e) => { const x = e.clientX / window.innerWidth - 0.5; const y = e.clientY / window.innerHeight - 0.5; text.style.transform = `rotateY(${x * 10}deg) rotateX(${-y * 10}deg)`; spans.forEach((span, index) => { span.style.transform = `translateZ(${10 + index * 5}px)`; span.style.textShadow = ` ${x * 5}px ${y * 5}px 5px rgba(0, 0, 0, 0.05), ${x * 10}px ${y * 10}px 10px rgba(0, 0, 0, 0.03) `; }); }); container.addEventListener('mouseleave', () => { text.style.transform = 'rotateY(0deg) rotateX(0deg)'; spans.forEach(span => { span.style.transform = 'translateZ(10px)'; span.style.textShadow = '1px 1px 1px rgba(0, 0, 0, 0.05), 2px 2px 2px rgba(0, 0, 0, 0.05), 3px 3px 3px rgba(0, 0, 0, 0.05)'; }); }); // Testimonial Slider const testimonials = document.querySelectorAll('.testimonial'); const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); let currentSlide = 0; function showSlide(index) { testimonials.forEach(testimonial => testimonial.classList.remove('active')); if (index < 0) { currentSlide = testimonials.length - 1; } else if (index >= testimonials.length) { currentSlide = 0; } else { currentSlide = index; } testimonials[currentSlide].classList.add('active'); } prevBtn.addEventListener('click', () => { showSlide(currentSlide - 1); }); nextBtn.addEventListener('click', () => { showSlide(currentSlide + 1); }); // Auto-slide testimonials setInterval(() => { showSlide(currentSlide + 1); }, 5000); // Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { const container = document.querySelector('.container'); const navHeight = document.querySelector('.nav').offsetHeight; const targetPosition = targetElement.offsetTop - navHeight; container.scrollTo({ top: targetPosition, behavior: 'smooth' }); } }); }); // Prevent actual form submission document.querySelectorAll('button').forEach(button => { button.addEventListener('click', (e) => { e.preventDefault(); // Add a visual feedback instead const originalText = button.textContent; button.textContent = "Thank you!"; button.style.backgroundColor = "#1abc9c"; setTimeout(() => { button.textContent = originalText; button.style.backgroundColor = ""; }, 2000); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FutureTech Startup Showcase</title> <style> :root { --primary-color: #2196F3; --secondary-color: #00BCD4; --accent-color: #7C4DFF; --dark-bg: #121212; --surface: #1e1e1e; --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.7); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient(135deg, #121212, #1a1a1a); color: var(--text-primary); overflow-x: hidden; height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; perspective: 1000px; } .container { max-width: 100%; margin: 0 auto; padding: 1rem; height: 100%; overflow-y: auto; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--accent-color) var(--dark-bg); } .container::-webkit-scrollbar { width: 6px; } .container::-webkit-scrollbar-track { background: var(--dark-bg); } .container::-webkit-scrollbar-thumb { background-color: var(--accent-color); border-radius: 3px; } header { position: relative; height: 140px; display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; overflow: hidden; } .logo-3d { position: relative; font-size: 2.5rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: transparent; background: linear-gradient(135deg, #e0e0e0, #b0b0b0); -webkit-background-clip: text; background-clip: text; text-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); transform-style: preserve-3d; transition: transform 0.3s ease; } .logo-3d::before { content: "NEXUS"; position: absolute; top: 0; left: 0; color: transparent; background: linear-gradient(135deg, #e0e0e0, #b0b0b0); -webkit-background-clip: text; background-clip: text; transform: translateZ(-10px); opacity: 0.5; } .logo-3d::after { content: "NEXUS"; position: absolute; top: 0; left: 0; color: rgba(255, 255, 255, 0.1); transform: translateZ(5px); } .subtitle { font-size: 1rem; color: var(--secondary-color); text-align: center; margin-top: -0.5rem; letter-spacing: 3px; opacity: 0.8; transform: translateY(10px); } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .startup-card { position: relative; background: linear-gradient(145deg, #1e1e1e, #2a2a2a); border-radius: 12px; padding: 1.5rem; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); transform-style: preserve-3d; perspective: 1000px; } .startup-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%); z-index: 1; pointer-events: none; border-radius: 12px; } .startup-card:hover { transform: translateY(-10px) rotateX(5deg); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 25px rgba(33, 150, 243, 0.2); } .startup-card:hover .card-icon { transform: translateZ(30px) rotateY(15deg); } .card-content { position: relative; z-index: 2; } .card-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); border-radius: 50%; margin-bottom: 1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); transition: transform 0.5s ease; color: white; font-size: 1.5rem; } .chrome-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; background: linear-gradient(to right, #e0e0e0, #b0b0b0, #e0e0e0); -webkit-background-clip: text; background-clip: text; color: transparent; text-transform: uppercase; letter-spacing: 1px; } .chrome-title::after { content: ''; display: block; width: 30%; height: 3px; background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); margin-top: 0.5rem; border-radius: 2px; } .card-description { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 1.5rem; } .tech-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .tag { padding: 0.3rem 0.7rem; background: rgba(33, 150, 243, 0.1); border-radius: 20px; font-size: 0.7rem; color: var(--secondary-color); backdrop-filter: blur(5px); border: 1px solid rgba(33, 150, 243, 0.2); transition: all 0.3s ease; } .tag:hover { background: rgba(33, 150, 243, 0.2); transform: translateY(-2px); } .learn-more { display: inline-flex; align-items: center; margin-top: 1rem; color: var(--primary-color); text-decoration: none; font-size: 0.9rem; font-weight: 600; transition: all 0.3s ease; } .learn-more span { margin-left: 0.5rem; transition: transform 0.3s ease; } .learn-more:hover { color: var(--secondary-color); } .learn-more:hover span { transform: translateX(5px); } .featured-section { margin-top: 3rem; padding: 1.5rem; background: linear-gradient(145deg, rgba(33, 150, 243, 0.1), rgba(0, 188, 212, 0.1)); border-radius: 12px; position: relative; overflow: hidden; } .featured-section::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(124, 77, 255, 0.1) 0%, rgba(33, 150, 243, 0) 70%); z-index: 0; animation: pulse 15s infinite linear; } @keyframes pulse { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .featured-title { font-size: 1.8rem; margin-bottom: 1rem; position: relative; z-index: 1; color: var(--text-primary); text-transform: uppercase; letter-spacing: 2px; } .featured-content { display: flex; flex-direction: column; gap: 1rem; position: relative; z-index: 1; } @media (min-width: 768px) { .featured-content { flex-direction: row; } } .featured-image { flex: 1; position: relative; border-radius: 8px; overflow: hidden; height: 200px; background: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b') center/cover; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .featured-image::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3)); z-index: 1; } .featured-text { flex: 1; z-index: 2; position: relative; } .cta-button { display: inline-block; margin-top: 1.5rem; padding: 0.8rem 1.5rem; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; border-radius: 30px; text-decoration: none; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; border: none; cursor: pointer; box-shadow: 0 5px 15px rgba(33, 150, 243, 0.3); transition: all 0.3s ease; position: relative; overflow: hidden; } .cta-button::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 80%); transform: rotate(45deg); z-index: 0; transition: all 0.5s ease; opacity: 0; } .cta-button:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(33, 150, 243, 0.5); } .cta-button:hover::before { animation: shine 1.5s; } @keyframes shine { 0% { opacity: 0; left: -50%; } 50% { opacity: 1; } 100% { opacity: 0; left: 150%; } } .chrome-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)); pointer-events: none; z-index: 0; } .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .blur-overlay { position: fixed; bottom: 0; left: 0; width: 100%; height: 80px; background: linear-gradient(to top, var(--dark-bg), transparent); pointer-events: none; z-index: 10; } @media (max-width: 768px) { .logo-3d { font-size: 2rem; } .subtitle { font-size: 0.8rem; } .grid { grid-template-columns: 1fr; } .featured-section { padding: 1rem; } .featured-title { font-size: 1.5rem; } } @keyframes floatText { 0% { transform: translateY(0) translateZ(0) rotateX(0); } 50% { transform: translateY(-10px) translateZ(10px) rotateX(5deg); } 100% { transform: translateY(0) translateZ(0) rotateX(0); } } .logo-3d { animation: floatText 5s ease-in-out infinite; } /* Chip animation */ .chip-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(33, 150, 243, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(33, 150, 243, 0.1) 1px, transparent 1px); background-size: 20px 20px; z-index: 0; transform: perspective(500px) rotateX(60deg); transform-origin: top; opacity: 0.2; pointer-events: none; } @keyframes gridMove { 0% { background-position: 0 0; } 100% { background-position: 0 20px; } } .chip-grid { animation: gridMove 2s linear infinite; } /* Ripple effect on cards */ .startup-card-ripple { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 12px; z-index: -1; opacity: 0; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%); transform: scale(0); transition: transform 0.5s ease-out, opacity 0.5s ease-out; } /* Modal */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 100; opacity: 0; visibility: hidden; transition: all 0.3s ease; backdrop-filter: blur(5px); } .modal-content { background: linear-gradient(145deg, #1e1e1e, #2a2a2a); width: 90%; max-width: 600px; border-radius: 12px; padding: 2rem; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); transform: scale(0.9); transition: all 0.3s ease; position: relative; } .modal.active { opacity: 1; visibility: visible; } .modal.active .modal-content { transform: scale(1); } .close-modal { position: absolute; top: 15px; right: 15px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; color: var(--text-primary); cursor: pointer; transition: all 0.3s ease; } .close-modal:hover { background: rgba(255, 255, 255, 0.2); transform: rotate(90deg); } .modal-title { font-size: 1.8rem; margin-bottom: 1rem; background: linear-gradient(to right, #e0e0e0, #b0b0b0, #e0e0e0); -webkit-background-clip: text; background-clip: text; color: transparent; } .modal-description { margin-bottom: 1.5rem; color: var(--text-secondary); line-height: 1.6; } </style> </head> <body> <div class="container"> <header> <div class="chrome-bg"></div> <div class="chip-grid"></div> <div class="header-content"> <h1 class="logo-3d">NEXUS</h1> <p class="subtitle">FUTURE TECH SHOWCASE</p> </div> </header> <div class="featured-section"> <h2 class="featured-title">Breakthrough Innovation</h2> <div class="featured-content"> <div class="featured-image"></div> <div class="featured-text"> <p class="card-description"> Quantum Edge is redefining what's possible with their proprietary quantum computing architecture. Their 512-qubit processor achieves computational feats previously thought impossible, processing complex simulations 300x faster than traditional supercomputers. </p> <button class="cta-button" id="featured-cta">Join Private Demo</button> </div> </div> </div> <div class="grid"> <div class="startup-card" data-name="Neural Sync" data-desc="Real-time brain-computer interface that achieves 98.7% accuracy in translating neural signals to digital commands. Currently deployed in medical settings for paralysis patients with a 5ms latency - a 10x improvement over competitors."> <div class="startup-card-ripple"></div> <div class="card-content"> <div class="card-icon">🧠</div> <h3 class="chrome-title">Neural Sync</h3> <p class="card-description"> Real-time brain-computer interface that achieves 98.7% accuracy in translating neural signals to digital commands. </p> <div class="tech-tags"> <span class="tag">Neural Interface</span> <span class="tag">AI Prediction</span> <span class="tag">Med-Tech</span> </div> <a href="#" class="learn-more">View Technology <span>→</span></a> </div> </div> <div class="startup-card" data-name="Orbital Systems" data-desc="Pioneering micro-satellite constellation technology that provides real-time global data coverage with 3.5cm imaging resolution. Their mesh network design reduces deployment costs by 78% while increasing uptime to 99.997%."> <div class="startup-card-ripple"></div> <div class="card-content"> <div class="card-icon">🛰️</div> <h3 class="chrome-title">Orbital Systems</h3> <p class="card-description"> Micro-satellite constellation providing real-time global data coverage with 3.5cm imaging resolution. </p> <div class="tech-tags"> <span class="tag">Aerospace</span> <span class="tag">IoT Networks</span> <span class="tag">Data Analytics</span> </div> <a href="#" class="learn-more">View Technology <span>→</span></a> </div> </div> <div class="startup-card" data-name="Fusion Dynamics" data-desc="After 10 years of R&D, they've achieved sustained plasma confinement at 120 million °C for 8.7 minutes - a critical milestone toward commercial fusion energy. Their modular reactor design can be deployed at 1/5th the cost of traditional nuclear plants."> <div class="startup-card-ripple"></div> <div class="card-content"> <div class="card-icon">⚡</div> <h3 class="chrome-title">Fusion Dynamics</h3> <p class="card-description"> Achieved sustained plasma confinement at 120 million °C for 8.7 minutes - a milestone toward commercial fusion. </p> <div class="tech-tags"> <span class="tag">Clean Energy</span> <span class="tag">Plasma Physics</span> <span class="tag">Superconductors</span> </div> <a href="#" class="learn-more">View Technology <span>→</span></a> </div> </div> <div class="startup-card" data-name="Carbon Forge" data-desc="Revolutionary carbon capture technology that extracts CO2 directly from the atmosphere at 94% efficiency, converting it into carbon nanotubes for industrial applications. Each modular unit processes 500 metric tons of CO2 annually while generating carbon materials worth $1.2M."> <div class="startup-card-ripple"></div> <div class="card-content"> <div class="card-icon">🌱</div> <h3 class="chrome-title">Carbon Forge</h3> <p class="card-description"> Carbon capture tech extracts CO2 at 94% efficiency, converting it into carbon nanotubes for industrial use. </p> <div class="tech-tags"> <span class="tag">Climate Tech</span> <span class="tag">Material Science</span> <span class="tag">Carbon Capture</span> </div> <a href="#" class="learn-more">View Technology <span>→</span></a> </div> </div> </div> </div> <div class="blur-overlay"></div> <div class="modal" id="startup-modal"> <div class="modal-content"> <div class="close-modal" id="close-modal">✕</div> <h3 class="modal-title" id="modal-title">Startup Name</h3> <p class="modal-description" id="modal-description">Description will go here.</p> <button class="cta-button">Request Access</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // 3D Logo effect const logo = document.querySelector('.logo-3d'); document.addEventListener('mousemove', function(e) { const x = (window.innerWidth / 2 - e.pageX) / 50; const y = (window.innerHeight / 2 - e.pageY) / 50; logo.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`; }); // Ripple effect on cards const cards = document.querySelectorAll('.startup-card'); cards.forEach(card => { card.addEventListener('mouseenter', function(e) { const ripple = this.querySelector('.startup-card-ripple'); ripple.style.left = '0px'; ripple.style.top = '0px'; ripple.style.opacity = '1'; ripple.style.transform = 'scale(2.5)'; }); card.addEventListener('mouseleave', function(e) { const ripple = this.querySelector('.startup-card-ripple'); ripple.style.opacity = '0'; ripple.style.transform = 'scale(0)'; }); // Modal functionality card.addEventListener('click', function() { const modal = document.getElementById('startup-modal'); const modalTitle = document.getElementById('modal-title'); const modalDescription = document.getElementById('modal-description'); modalTitle.textContent = this.getAttribute('data-name'); modalDescription.textContent = this.getAttribute('data-desc'); modal.classList.add('active'); }); }); // Close modal document.getElementById('close-modal').addEventListener('click', function() { document.getElementById('startup-modal').classList.remove('active'); }); // Close modal when clicking outside window.addEventListener('click', function(e) { const modal = document.getElementById('startup-modal'); if (e.target === modal) { modal.classList.remove('active'); } }); // Featured CTA button document.getElementById('featured-cta').addEventListener('click', function() { const modal = document.getElementById('startup-modal'); const modalTitle = document.getElementById('modal-title'); const modalDescription = document.getElementById('modal-description'); modalTitle.textContent = "Quantum Edge"; modalDescription.textContent = "Get exclusive access to Quantum Edge's revolutionary 512-qubit processor demonstration. Experience real-time complex simulations that process 300x faster than traditional supercomputers. Our secure virtual environment allows you to test your own computational problems and see the quantum advantage firsthand."; modal.classList.add('active'); }); // Make all anchor tags non-functional to prevent navigation const links = document.querySelectorAll('a'); links.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); // Instead of navigating, show the modal const parentCard = this.closest('.startup-card'); if (parentCard) { const modal = document.getElementById('startup-modal'); const modalTitle = document.getElementById('modal-title'); const modalDescription = document.getElementById('modal-description'); modalTitle.textContent = parentCard.getAttribute('data-name'); modalDescription.textContent = parentCard.getAttribute('data-desc'); modal.classList.add('active'); } }); }); // Create 3D hover effect for all cards cards.forEach(card => { card.addEventListener('mousemove', function(e) { const cardRect = card.getBoundingClientRect(); const cardCenterX = cardRect.left + cardRect.width / 2; const cardCenterY = cardRect.top + cardRect.height / 2; const angleY = (e.clientX - cardCenterX) / 15; const angleX = (cardCenterY - e.clientY) / 15; this.style.transform = `perspective(1000px) rotateX(${angleX}deg) rotateY(${angleY}deg) translateZ(10px)`; // Dynamic shadow based on mouse position const shadowX = (e.clientX - cardCenterX) / 5; const shadowY = (e.clientY - cardCenterY) / 5; this.style.boxShadow = `${shadowX}px ${shadowY}px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(33, 150, 243, 0.2)`; }); card.addEventListener('mouseleave', function() { this.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateZ(0)'; this.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.2)'; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D Educational Text Effects</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { display: flex; justify-content: center; align-items: center; height: 700px; width: 100%; max-width: 700px; margin: 0 auto; background: linear-gradient(135deg, #f5f7fa 0%, #e8eaec 100%); overflow: hidden; } .container { width: 100%; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; } h1 { font-size: 2.5rem; margin-bottom: 30px; text-align: center; color: #2d3748; position: relative; z-index: 1; font-weight: 800; letter-spacing: 1px; text-shadow: 2px 2px 0 #718096, 4px 4px 0 rgba(0, 0, 0, 0.1); transform-style: preserve-3d; transition: transform 0.3s ease, text-shadow 0.3s ease; } h1:hover { transform: translateZ(10px) scale(1.05); text-shadow: 3px 3px 0 #718096, 6px 6px 0 rgba(0, 0, 0, 0.1); cursor: pointer; } .text-effect-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; width: 100%; max-width: 650px; } .text-card { background: white; border-radius: 15px; padding: 25px 20px; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; cursor: pointer; } .text-card:hover { transform: translateY(-10px) scale(1.05); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); } .text-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, var(--accent-color), var(--accent-color-secondary)); } .text-title { font-size: 1.5rem; margin-bottom: 10px; color: var(--accent-color); font-weight: 700; transform-style: preserve-3d; transform: translateZ(0); transition: transform 0.3s ease; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1); } .text-card:hover .text-title { transform: translateZ(20px); text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15); } .text-content { font-size: 0.9rem; color: #4a5568; line-height: 1.5; margin-bottom: 15px; } .explore-btn { background: var(--accent-color); color: white; border: none; padding: 8px 16px; border-radius: 20px; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; } .explore-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); background: var(--accent-color-secondary); } .explore-btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.5); border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; transition: transform 0.5s ease, opacity 0.5s ease; } .explore-btn:hover::after { transform: translate(-50%, -50%) scale(50); opacity: 0.2; } /* Custom themes for each card */ .text-card:nth-child(1) { --accent-color: #4361ee; --accent-color-secondary: #3a0ca3; } .text-card:nth-child(2) { --accent-color: #f72585; --accent-color-secondary: #b5179e; } .text-card:nth-child(3) { --accent-color: #4cc9f0; --accent-color-secondary: #4895ef; } .text-card:nth-child(4) { --accent-color: #4d908e; --accent-color-secondary: #43aa8b; } @media (max-width: 600px) { h1 { font-size: 1.8rem; } .text-effect-cards { grid-template-columns: 1fr; } .text-card { padding: 20px 15px; } .text-title { font-size: 1.3rem; } } /* Color themes for hover states */ .color-theme { position: absolute; bottom: 10px; right: 10px; display: flex; gap: 8px; } .color-dot { width: 15px; height: 15px; border-radius: 50%; cursor: pointer; transition: transform 0.3s ease; } .color-dot:hover { transform: scale(1.3); } /* Interactive animation elements */ .floating-shapes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .shape { position: absolute; opacity: 0.1; animation: float 15s infinite ease-in-out; } .shape:nth-child(1) { top: 10%; left: 10%; width: 80px; height: 80px; background: #4361ee; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; animation-delay: 0s; } .shape:nth-child(2) { top: 60%; left: 80%; width: 100px; height: 100px; background: #f72585; border-radius: 58% 42% 35% 65% / 57% 48% 52% 43%; animation-delay: -2s; } .shape:nth-child(3) { top: 80%; left: 30%; width: 60px; height: 60px; background: #4cc9f0; border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%; animation-delay: -5s; } .shape:nth-child(4) { top: 30%; left: 70%; width: 70px; height: 70px; background: #4d908e; border-radius: 30% 70% 30% 70% / 50% 40% 60% 50%; animation-delay: -8s; } @keyframes float { 0% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(30px, -50px) rotate(120deg); } 66% { transform: translate(-20px, 20px) rotate(240deg); } 100% { transform: translate(0, 0) rotate(360deg); } } /* Interactive mode switch */ .mode-switch { position: absolute; top: 20px; right: 20px; z-index: 10; } .mode-switch input { display: none; } .mode-switch label { display: block; width: 50px; height: 26px; background: #e2e8f0; border-radius: 13px; position: relative; cursor: pointer; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); transition: background 0.3s ease; } .mode-switch label::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: white; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); transition: transform 0.3s ease; } .mode-switch input:checked + label { background: #4361ee; } .mode-switch input:checked + label::after { transform: translateX(24px); } /* Dark mode styling */ .dark-mode { background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); } .dark-mode h1 { color: #e2e8f0; text-shadow: 2px 2px 0 #4a5568, 4px 4px 0 rgba(0, 0, 0, 0.3); } .dark-mode .text-card { background: #2d3748; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } .dark-mode .text-content { color: #cbd5e0; } .dark-mode .shape { opacity: 0.05; } </style> </head> <body> <div class="container"> <h1 class="main-title">Interactive 3D Text Studio</h1> <div class="text-effect-cards"> <div class="text-card"> <h2 class="text-title">Depth Explorer</h2> <p class="text-content">Create stunning depth effects with adjustable layers and shadows. Perfect for science and math concepts that need dimensional visualization.</p> <button class="explore-btn">Try it now</button> <div class="color-theme"> <div class="color-dot" style="background: #4361ee;" data-color="#4361ee"></div> <div class="color-dot" style="background: #3a0ca3;" data-color="#3a0ca3"></div> </div> </div> <div class="text-card"> <h2 class="text-title">Color Psychology</h2> <p class="text-content">Explore how color affects learning with accessibility-focused palettes. Apply color theory to enhance content retention in your lessons.</p> <button class="explore-btn">Explore colors</button> <div class="color-theme"> <div class="color-dot" style="background: #f72585;" data-color="#f72585"></div> <div class="color-dot" style="background: #b5179e;" data-color="#b5179e"></div> </div> </div> <div class="text-card"> <h2 class="text-title">Motion Learning</h2> <p class="text-content">Add subtle animations that respond to interactions, helping students visualize concepts through controlled movement and transitions.</p> <button class="explore-btn">See motion</button> <div class="color-theme"> <div class="color-dot" style="background: #4cc9f0;" data-color="#4cc9f0"></div> <div class="color-dot" style="background: #4895ef;" data-color="#4895ef"></div> </div> </div> <div class="text-card"> <h2 class="text-title">Shadow Workshop</h2> <p class="text-content">Master the art of subtle shadows that enhance readability without distraction. Ideal for long-form educational content and presentations.</p> <button class="explore-btn">Light & shadow</button> <div class="color-theme"> <div class="color-dot" style="background: #4d908e;" data-color="#4d908e"></div> <div class="color-dot" style="background: #43aa8b;" data-color="#43aa8b"></div> </div> </div> </div> <div class="floating-shapes"> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> </div> <div class="mode-switch"> <input type="checkbox" id="dark-mode-toggle"> <label for="dark-mode-toggle"></label> </div> </div> <script> // Interactive 3D effect on main title const mainTitle = document.querySelector('.main-title'); document.addEventListener('mousemove', (e) => { const x = (window.innerWidth / 2 - e.pageX) / 30; const y = (window.innerHeight / 2 - e.pageY) / 30; mainTitle.style.transform = `translateZ(10px) rotateX(${y}deg) rotateY(${-x}deg)`; }); // Reset transform when mouse leaves document.addEventListener('mouseleave', () => { mainTitle.style.transform = 'translateZ(0) rotateX(0) rotateY(0)'; }); // Interactive cards const cards = document.querySelectorAll('.text-card'); cards.forEach(card => { card.addEventListener('mousemove', function(e) { const rect = this.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const midCardWidth = rect.width / 2; const midCardHeight = rect.height / 2; const angleY = (x - midCardWidth) / 8; const angleX = (y - midCardHeight) / 8; this.style.transform = ` perspective(1000px) rotateX(${-angleX}deg) rotateY(${angleY}deg) translateZ(10px) `; const title = this.querySelector('.text-title'); title.style.transform = `translateZ(50px)`; }); card.addEventListener('mouseleave', function() { this.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateZ(0)'; const title = this.querySelector('.text-title'); title.style.transform = 'translateZ(0)'; }); // Button ripple effect const button = card.querySelector('.explore-btn'); button.addEventListener('click', function(e) { e.preventDefault(); // Create a ripple element const ripple = document.createElement('span'); ripple.classList.add('ripple-effect'); // Apply custom animation for the clicked button this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = ''; }, 150); // Card animation on button click card.style.transform = 'scale(1.02)'; setTimeout(() => { card.style.transform = ''; }, 300); }); // Color theme selection const colorDots = card.querySelectorAll('.color-dot'); colorDots.forEach(dot => { dot.addEventListener('click', function(e) { e.stopPropagation(); const color = this.getAttribute('data-color'); card.style.setProperty('--accent-color', color); // Animate the color change this.animate([ { transform: 'scale(1)' }, { transform: 'scale(1.5)' }, { transform: 'scale(1)' } ], { duration: 300, easing: 'ease-in-out' }); }); }); }); // Dark mode toggle const darkModeToggle = document.getElementById('dark-mode-toggle'); darkModeToggle.addEventListener('change', function() { document.body.classList.toggle('dark-mode', this.checked); }); // Add interactive floating animation to shapes based on mouse movement const shapes = document.querySelectorAll('.shape'); document.addEventListener('mousemove', (e) => { const mouseX = e.clientX / window.innerWidth; const mouseY = e.clientY / window.innerHeight; shapes.forEach((shape, index) => { const offsetX = (mouseX - 0.5) * (index + 1) * 10; const offsetY = (mouseY - 0.5) * (index + 1) * 10; shape.style.transform = `translate(${offsetX}px, ${offsetY}px) rotate(${offsetX + offsetY}deg)`; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LUXE - Elevated Fashion Experience</title> <style> @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Montserrat:wght@200;300;400;500;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #f8f5f1; --secondary: #262626; --accent: #d4af7a; --light-accent: #e7d8c3; } body { font-family: 'Montserrat', sans-serif; background-color: var(--primary); color: var(--secondary); overflow-x: hidden; height: 100vh; width: 100%; display: flex; flex-direction: column; } .container { width: 100%; max-width: 700px; margin: 0 auto; padding: 20px; height: 100%; display: flex; flex-direction: column; } header { padding: 15px 0; position: relative; z-index: 10; } .logo { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 2.2rem; letter-spacing: 8px; text-align: center; color: var(--secondary); position: relative; margin-bottom: 15px; text-shadow: 1px 1px 1px rgba(0,0,0,0.05); transition: all 0.5s ease; } .logo:hover { text-shadow: 2px 2px 4px rgba(212, 175, 122, 0.3); letter-spacing: 10px; } .logo::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 30px; height: 1px; background: var(--accent); transition: width 0.3s ease; } .logo:hover::after { width: 100px; } nav { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; } nav a { font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: var(--secondary); text-decoration: none; padding: 5px 0; position: relative; transition: all 0.3s ease; } nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--accent); transition: width 0.3s ease; } nav a:hover { color: var(--accent); } nav a:hover::after { width: 100%; } .hero { position: relative; overflow: hidden; height: 45vh; margin-bottom: 30px; background: linear-gradient(135deg, #f8f5f1 0%, #e7d8c3 100%); } .hero-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 80%; z-index: 2; } h1 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 2.5rem; letter-spacing: 3px; margin-bottom: 15px; color: var(--secondary); text-shadow: 1px 1px 1px rgba(0,0,0,0.05); position: relative; transition: all 0.5s ease; transform-style: preserve-3d; } h1::after { content: attr(data-text); position: absolute; left: 2px; top: 2px; z-index: -1; color: var(--accent); opacity: 0.4; transition: all 0.3s ease; } h1:hover::after { left: 4px; top: 4px; opacity: 0.6; } .hero p { font-weight: 300; font-size: 0.9rem; line-height: 1.6; margin-bottom: 30px; max-width: 500px; margin-left: auto; margin-right: auto; } .btn { display: inline-block; padding: 12px 30px; background: transparent; border: 1px solid var(--secondary); color: var(--secondary); font-family: 'Montserrat', sans-serif; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; cursor: pointer; position: relative; overflow: hidden; transition: all 0.4s ease; z-index: 1; } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--accent); transition: all 0.4s ease; z-index: -1; } .btn:hover { color: var(--primary); border-color: var(--accent); } .btn:hover::before { left: 0; } .collection { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; } .product { position: relative; background: #fff; padding: 15px; border-radius: 2px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); overflow: hidden; cursor: pointer; transition: all 0.4s ease; transform-style: preserve-3d; perspective: 1000px; } .product:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); } .product img { width: 100%; height: 150px; object-fit: cover; border-radius: 2px; margin-bottom: 10px; transition: all 0.4s ease; } .product:hover img { transform: scale(1.05); } .product h3 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.1rem; margin-bottom: 5px; transition: all 0.3s ease; } .product p { font-size: 0.8rem; color: #888; margin-bottom: 8px; transition: all 0.3s ease; } .price { font-family: 'Montserrat', sans-serif; font-weight: 500; color: var(--accent); font-size: 0.9rem; } .product-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(248,245,241,0.95) 0%, rgba(212,175,122,0.95) 100%); display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: all 0.4s ease; transform: translateY(10px); padding: 20px; } .product:hover .product-overlay { opacity: 1; visibility: visible; transform: translateY(0); } .product-overlay h3 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.2rem; margin-bottom: 10px; color: var(--secondary); } .product-overlay p { font-size: 0.8rem; color: var(--secondary); text-align: center; margin-bottom: 15px; } .product-btn { font-family: 'Montserrat', sans-serif; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--secondary); background: transparent; border: 1px solid var(--secondary); padding: 8px 20px; cursor: pointer; transition: all 0.3s ease; } .product-btn:hover { background: var(--secondary); color: var(--primary); } .shimmer { position: absolute; top: 0; left: -150%; width: 100%; height: 100%; background: linear-gradient( to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100% ); transform: skewX(-25deg); transition: all 0.7s ease; } .product:hover .shimmer { left: 150%; } footer { text-align: center; margin-top: auto; padding: 20px 0; font-size: 0.7rem; color: #888; } .gradient-text { background: linear-gradient(135deg, #262626 0%, #d4af7a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; display: inline-block; } .fancy-divider { width: 100%; height: 1px; background: linear-gradient(to right, transparent, var(--accent), transparent); margin: 20px 0; } @media (max-width: 600px) { .logo { font-size: 1.8rem; letter-spacing: 5px; } nav { gap: 10px; } .hero { height: 40vh; } h1 { font-size: 2rem; } .collection { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; } .product img { height: 120px; } } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--primary); } ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; } /* Animation for light movement */ @keyframes lightMovement { 0% { transform: translateX(-50%) translateY(-50%) rotate(0deg); } 100% { transform: translateX(-50%) translateY(-50%) rotate(360deg); } } .light-effect { position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(212,175,122,0.3) 0%, rgba(212,175,122,0) 70%); transform: translateX(-50%) translateY(-50%); opacity: 0.7; animation: lightMovement 25s linear infinite; pointer-events: none; z-index: 1; } .cart-icon { position: absolute; right: 20px; top: 20px; font-size: 1.2rem; cursor: pointer; transition: all 0.3s ease; } .cart-icon:hover { color: var(--accent); transform: scale(1.1); } /* Modal styles */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 100; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .modal.open { opacity: 1; visibility: visible; } .modal-content { background: var(--primary); width: 90%; max-width: 600px; padding: 30px; border-radius: 2px; position: relative; transform: translateY(30px); transition: all 0.4s ease; } .modal.open .modal-content { transform: translateY(0); } .close-modal { position: absolute; top: 15px; right: 15px; font-size: 1.5rem; cursor: pointer; color: var(--secondary); transition: all 0.3s ease; } .close-modal:hover { color: var(--accent); transform: rotate(90deg); } .product-detail { display: flex; flex-direction: column; } .product-detail-img { width: 100%; height: 250px; object-fit: cover; margin-bottom: 20px; border-radius: 2px; } .product-detail h2 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.8rem; margin-bottom: 10px; } .product-detail p { font-size: 0.9rem; line-height: 1.6; margin-bottom: 20px; } .product-detail .price { font-size: 1.2rem; margin-bottom: 20px; } .size-selector { margin-bottom: 20px; } .size-selector label { font-size: 0.9rem; margin-bottom: 10px; display: block; } .sizes { display: flex; gap: 10px; } .size-option { width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border: 1px solid #ddd; cursor: pointer; transition: all 0.3s ease; } .size-option:hover, .size-option.selected { border-color: var(--accent); background: var(--light-accent); color: var(--secondary); } .add-to-cart-btn { padding: 12px 30px; background: var(--secondary); color: var(--primary); border: none; font-family: 'Montserrat', sans-serif; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: all 0.3s ease; margin-top: 10px; } .add-to-cart-btn:hover { background: var(--accent); } </style> </head> <body> <div class="container"> <header> <div class="logo">LUXE</div> <nav> <a href="#" data-section="new">New Arrivals</a> <a href="#" data-section="women">Women</a> <a href="#" data-section="men">Men</a> <a href="#" data-section="accessories">Accessories</a> </nav> <div class="cart-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <circle cx="9" cy="21" r="1"></circle> <circle cx="20" cy="21" r="1"></circle> <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path> </svg> </div> </header> <section class="hero"> <div class="light-effect"></div> <div class="hero-content"> <h1 data-text="Autumn Essentials">Autumn Essentials</h1> <p>Discover our curated collection of timeless pieces designed for the season's transition. Each garment blends sophisticated craftsmanship with modern silhouettes.</p> <a href="#" class="btn">Explore Collection</a> </div> </section> <div class="fancy-divider"></div> <section class="collection" id="collection"> <div class="product" data-id="1"> <img src="https://images.unsplash.com/photo-1608748761487-d79bb0097c93?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" alt="Cashmere Sweater"> <h3>Cashmere Sweater</h3> <p>Italian Knit</p> <div class="price">€295</div> <div class="shimmer"></div> <div class="product-overlay"> <h3>Cashmere Sweater</h3> <p>Luxurious Italian cashmere in a relaxed fit with ribbed details at cuffs and hem.</p> <button class="product-btn view-product">View Details</button> </div> </div> <div class="product" data-id="2"> <img src="https://images.unsplash.com/photo-1548126032-079a0fb0099d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" alt="Wool Coat"> <h3>Belted Wool Coat</h3> <p>Double-faced</p> <div class="price">€495</div> <div class="shimmer"></div> <div class="product-overlay"> <h3>Belted Wool Coat</h3> <p>Double-faced wool with a relaxed silhouette and self-belt for defined waist.</p> <button class="product-btn view-product">View Details</button> </div> </div> <div class="product" data-id="3"> <img src="https://images.unsplash.com/photo-1605763240000-7e93b172d754?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" alt="Silk Blouse"> <h3>Silk Blouse</h3> <p>French Cuff</p> <div class="price">€245</div> <div class="shimmer"></div> <div class="product-overlay"> <h3>Silk Blouse</h3> <p>Fluid silk with a relaxed fit, featuring elegant French cuffs and mother-of-pearl buttons.</p> <button class="product-btn view-product">View Details</button> </div> </div> <div class="product" data-id="4"> <img src="https://images.unsplash.com/photo-1543076447-215ad9ba6923?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" alt="Tailored Trouser"> <h3>Tailored Trouser</h3> <p>Italian Wool</p> <div class="price">€320</div> <div class="shimmer"></div> <div class="product-overlay"> <h3>Tailored Trouser</h3> <p>High-rise with a tapered leg in premium Italian wool for a refined silhouette.</p> <button class="product-btn view-product">View Details</button> </div> </div> <div class="product" data-id="5"> <img src="https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" alt="Leather Ankle Boot"> <h3>Leather Ankle Boot</h3> <p>Handcrafted</p> <div class="price">€425</div> <div class="shimmer"></div> <div class="product-overlay"> <h3>Leather Ankle Boot</h3> <p>Handcrafted in Italy from supple calf leather with a stacked wooden heel.</p> <button class="product-btn view-product">View Details</button> </div> </div> <div class="product" data-id="6"> <img src="https://images.unsplash.com/photo-1619785292559-a15caa28bde6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" alt="Structured Bag"> <h3>Structured Bag</h3> <p>Full-grain Leather</p> <div class="price">€545</div> <div class="shimmer"></div> <div class="product-overlay"> <h3>Structured Bag</h3> <p>Architectural silhouette crafted from full-grain leather with minimal gold hardware.</p> <button class="product-btn view-product">View Details</button> </div> </div> </section> <footer> <p>© 2023 LUXE. All Rights Reserved. Artisanal luxury for the discerning collector.</p> </footer> </div> <!-- Modal for product details --> <div class="modal" id="productModal"> <div class="modal-content"> <span class="close-modal">×</span> <div class="product-detail" id="productDetail"> <!-- Product details will be populated by JavaScript --> </div> </div> </div> <script> // Products data const products = [ { id: 1, name: "Cashmere Sweater", description: "Our signature cashmere sweater, sourced from the finest Mongolian goats and meticulously crafted in Italy. Features a relaxed fit with ribbed details at cuffs and hem for a contemporary silhouette with timeless appeal.", price: "€295", image: "https://images.unsplash.com/photo-1608748761487-d79bb0097c93?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" }, { id: 2, name: "Belted Wool Coat", description: "A statement piece for your fall wardrobe, our double-faced wool coat offers exceptional warmth without bulk. The relaxed silhouette with self-belt creates a defined waist, while the deep pockets add functionality to luxury.", price: "€495", image: "https://images.unsplash.com/photo-1548126032-079a0fb0099d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" }, { id: 3, name: "Silk Blouse", description: "Crafted from lustrous mulberry silk with a fluid drape that moves with the body. The relaxed fit features elegant French cuffs and mother-of-pearl buttons, making it equally appropriate for workwear or evening.", price: "€245", image: "https://images.unsplash.com/photo-1605763240000-7e93b172d754?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" }, { id: 4, name: "Tailored Trouser", description: "These high-rise trousers with a tapered leg cut from premium Italian wool offer a refined silhouette. The front pleats add dimension while maintaining a clean line, perfect for transitioning from office to dinner.", price: "€320", image: "https://images.unsplash.com/photo-1543076447-215ad9ba6923?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" }, { id: 5, name: "Leather Ankle Boot", description: "Handcrafted in Italy from supple calf leather, these ankle boots feature a stacked wooden heel and subtle almond toe. The side zip ensures easy wear, while the leather sole bears the signature of the artisan.", price: "€425", image: "https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" }, { id: 6, name: "Structured Bag", description: "An architectural silhouette crafted from full-grain leather with minimal gold hardware. The interior offers a suede-lined compartment with a detachable pouch, striking the perfect balance between form and function.", price: "€545", image: "https://images.unsplash.com/photo-1619785292559-a15caa28bde6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" } ]; // DOM elements const modal = document.getElementById('productModal'); const productDetail = document.getElementById('productDetail'); const closeModal = document.querySelector('.close-modal'); const productItems = document.querySelectorAll('.product'); const viewButtons = document.querySelectorAll('.view-product'); const navItems = document.querySelectorAll('nav a'); const logo = document.querySelector('.logo'); // Add hover effect for product images productItems.forEach(product => { product.addEventListener('mouseenter', () => { const shimmer = product.querySelector('.shimmer'); shimmer.style.left = '-150%'; setTimeout(() => { shimmer.style.left = '150%'; }, 0); }); }); // Open modal with product details function openProductModal(productId) { const product = products.find(p => p.id === parseInt(productId)); if (product) { productDetail.innerHTML = ` <img src="${product.image}" alt="${product.name}" class="product-detail-img"> <h2>${product.name}</h2> <div class="price">${product.price}</div> <p>${product.description}</p> <div class="size-selector"> <label>Size</label> <div class="sizes"> <div class="size-option">XS</div> <div class="size-option">S</div> <div class="size-option">M</div> <div class="size-option">L</div> <div class="size-option">XL</div> </div> </div> <button class="add-to-cart-btn">Add to Cart</button> `; // Size selector functionality const sizeOptions = productDetail.querySelectorAll('.size-option'); sizeOptions.forEach(option => { option.addEventListener('click', () => { sizeOptions.forEach(opt => opt.classList.remove('selected')); option.classList.add('selected'); }); }); // Add to cart button functionality const addToCartBtn = productDetail.querySelector('.add-to-cart-btn'); addToCartBtn.addEventListener('click', () => { const selectedSize = productDetail.querySelector('.size-option.selected'); if (!selectedSize) { alert('Please select a size'); return; } // Show animation instead of actual form submission addToCartBtn.textContent = 'Added to Cart'; addToCartBtn.style.background = 'var(--accent)'; setTimeout(() => { addToCartBtn.textContent = 'Add to Cart'; addToCartBtn.style.background = 'var(--secondary)'; }, 2000); }); modal.classList.add('open'); // Prevent body scrolling when modal is open document.body.style.overflow = 'hidden'; } } // Event listeners for view product buttons viewButtons.forEach(button => { button.addEventListener('click', (e) => { e.preventDefault(); const productId = button.closest('.product').getAttribute('data-id'); openProductModal(productId); }); }); // Product click opens modal productItems.forEach(product => { product.addEventListener('click', (e) => { if (!e.target.classList.contains('product-btn')) { const productId = product.getAttribute('data-id'); openProductModal(productId); } }); }); // Close modal closeModal.addEventListener('click', () => { modal.classList.remove('open'); document.body.style.overflow = 'auto'; }); // Close modal when clicking outside content modal.addEventListener('click', (e) => { if (e.target === modal) { modal.classList.remove('open'); document.body.style.overflow = 'auto'; } }); // Navigation interaction navItems.forEach(item => { item.addEventListener('click', (e) => { e.preventDefault(); navItems.forEach(nav => nav.classList.remove('active')); item.classList.add('active'); // For demonstration purposes - show a subtle highlight effect const section = item.getAttribute('data-section'); // Could filter products by section here in a real implementation // Visual feedback const collection = document.getElementById('collection'); collection.style.opacity = '0.5'; setTimeout(() => { collection.style.opacity = '1'; }, 300); }); }); // Logo interaction logo.addEventListener('click', () => { // Smooth scroll to top window.scrollTo({ top: 0, behavior: 'smooth' }); }); // Cart icon interaction const cartIcon = document.querySelector('.cart-icon'); cartIcon.addEventListener('click', () => { cartIcon.style.transform = 'scale(1.2)'; setTimeout(() => { cartIcon.style.transform = 'scale(1)'; }, 200); // In a real implementation, this would open the cart alert('Cart functionality would appear here'); }); // 3D tilt effect for product cards productItems.forEach(product => { product.addEventListener('mousemove', (e) => { const { left, top, width, height } = product.getBoundingClientRect(); const x = (e.clientX - left) / width - 0.5; const y = (e.clientY - top) / height - 0.5; product.style.transform = `perspective(1000px) rotateX(${y * 5}deg) rotateY(${x * -5}deg) translateY(-5px)`; }); product.addEventListener('mouseleave', () => { product.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateY(0)'; }); }); // Handle keyboard navigation document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && modal.classList.contains('open')) { modal.classList.remove('open'); document.body.style.overflow = 'auto'; } }); </script> </body> </html>
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } body { background-color: #090909; display: flex; justify-content: center; align-items: center; min-height: 700px; width: 100%; max-width: 700px; margin: 0 auto; overflow: hidden; position: relative; } .container { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .venue-name { font-size: 4.5rem; font-weight: 800; text-align: center; line-height: 1; margin-bottom: 0.5rem; position: relative; text-transform: uppercase; color: #f5f5f5; text-shadow: 0 0 10px rgba(255, 0, 128, 0.7); transform-style: preserve-3d; perspective: 800px; z-index: 10; cursor: pointer; } .venue-name span { display: inline-block; position: relative; transform-style: preserve-3d; transition: transform 0.5s, text-shadow 0.5s; will-change: transform, text-shadow; animation: textPulse 2s infinite alternate; } .venue-name span:nth-child(odd) { animation-delay: 0.3s; color: #00eeff; } .venue-name span:nth-child(even) { animation-delay: 0.7s; color: #ff00aa; } .tagline { font-size: 1.2rem; color: #f5f5f5; margin-bottom: 2rem; font-weight: 300; text-align: center; opacity: 0.8; animation: fadeIn 2s ease-in-out; letter-spacing: 3px; } .upcoming-shows { display: flex; flex-direction: column; gap: 1rem; width: 90%; max-width: 600px; margin-top: 1rem; } .show { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(5px); padding: 1.2rem; border-radius: 8px; border-left: 4px solid #ff00aa; display: flex; justify-content: space-between; align-items: center; transform: translateY(20px); opacity: 0; animation: slideUp 0.6s forwards; cursor: pointer; transition: all 0.3s ease; } .show:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-5px) scale(1.02); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .show:nth-child(2) { animation-delay: 0.3s; border-left-color: #00eeff; } .show:nth-child(3) { animation-delay: 0.6s; border-left-color: #f700ff; } .show-details h3 { color: #ffffff; font-size: 1.2rem; margin-bottom: 0.3rem; } .show-details p { color: #cccccc; font-size: 0.9rem; } .ticket-btn { background: linear-gradient(135deg, #ff00aa, #f700ff); color: white; border: none; padding: 0.6rem 1.2rem; border-radius: 25px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(255, 0, 170, 0.3); } .ticket-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 0, 170, 0.5); } .beat-visualizer { position: absolute; bottom: 0; left: 0; width: 100%; height: 80px; display: flex; justify-content: center; align-items: flex-end; gap: 5px; padding: 0 20px; } .beat-bar { width: 8px; background: linear-gradient(to top, #ff00aa, #00eeff); border-radius: 4px 4px 0 0; transition: height 0.2s ease; } .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; } .particle { position: absolute; background: radial-gradient(circle, rgba(255, 0, 170, 0.8) 0%, rgba(255, 0, 170, 0) 70%); border-radius: 50%; animation: float 10s infinite ease-in-out; } @keyframes textPulse { 0% { transform: translateZ(0) scale(1); text-shadow: 0 0 5px rgba(255, 0, 128, 0.7); } 100% { transform: translateZ(20px) scale(1.05); text-shadow: 0 0 20px rgba(255, 0, 128, 0.9), 0 0 30px rgba(0, 238, 255, 0.8); } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0.8; } } @keyframes slideUp { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes float { 0%, 100% { transform: translateY(0) translateX(0); } 25% { transform: translateY(-50px) translateX(50px); } 50% { transform: translateY(-100px) translateX(-20px); } 75% { transform: translateY(-50px) translateX(-70px); } } @media (max-width: 600px) { .venue-name { font-size: 3rem; } .tagline { font-size: 1rem; } .show { flex-direction: column; text-align: center; align-items: center; gap: 1rem; } } </style> </head> <body> <div class="container"> <h1 class="venue-name" id="venueText">SOUNDWAVE</h1> <p class="tagline">WHERE MUSIC COMES ALIVE</p> <div class="upcoming-shows"> <div class="show"> <div class="show-details"> <h3>Neon Pulse</h3> <p>Oct 28 • Electronic Dance Night • 9 PM</p> </div> <button class="ticket-btn">GET TICKETS</button> </div> <div class="show"> <div class="show-details"> <h3>Sonic Architects</h3> <p>Nov 5 • Indie Rock Experience • 8 PM</p> </div> <button class="ticket-btn">GET TICKETS</button> </div> <div class="show"> <div class="show-details"> <h3>Bass Dimension</h3> <p>Nov 12 • Underground Bass Night • 10 PM</p> </div> <button class="ticket-btn">GET TICKETS</button> </div> </div> <div class="beat-visualizer" id="beatVisualizer"></div> </div> <div class="particles" id="particles"></div> <script> // Create 3D pulsating text effect const venueText = document.getElementById('venueText'); const text = venueText.textContent; venueText.innerHTML = ''; for (let i = 0; i < text.length; i++) { const span = document.createElement('span'); span.textContent = text[i]; span.style.animationDelay = `${i * 0.1}s`; venueText.appendChild(span); } // Create beat visualizer bars const beatVisualizer = document.getElementById('beatVisualizer'); const numBars = 30; for (let i = 0; i < numBars; i++) { const bar = document.createElement('div'); bar.className = 'beat-bar'; bar.style.height = '5px'; beatVisualizer.appendChild(bar); } // Create particles const particles = document.getElementById('particles'); const numParticles = 10; for (let i = 0; i < numParticles; i++) { const particle = document.createElement('div'); particle.className = 'particle'; particle.style.width = `${Math.random() * 100 + 50}px`; particle.style.height = particle.style.width; particle.style.left = `${Math.random() * 100}%`; particle.style.top = `${Math.random() * 100}%`; particle.style.animationDelay = `${Math.random() * 5}s`; particles.appendChild(particle); } // Animate beat bars based on mouse movement or time let isActive = false; let activeTimeout; function animateBars() { const bars = document.querySelectorAll('.beat-bar'); bars.forEach((bar) => { const height = isActive ? Math.floor(Math.random() * 60) + 20 : Math.floor(Math.random() * 15) + 5; bar.style.height = `${height}px`; }); requestAnimationFrame(animateBars); } // Add interaction document.addEventListener('mousemove', () => { isActive = true; clearTimeout(activeTimeout); activeTimeout = setTimeout(() => { isActive = false; }, 2000); }); document.addEventListener('click', () => { isActive = true; // Make characters dance more intensely on click const spans = document.querySelectorAll('.venue-name span'); spans.forEach((span) => { span.style.animation = 'none'; void span.offsetWidth; // Trigger reflow span.style.animation = 'textPulse 0.5s infinite alternate'; }); // Return to normal after a while setTimeout(() => { spans.forEach((span, i) => { span.style.animation = 'textPulse 2s infinite alternate'; if (i % 2 === 0) { span.style.animationDelay = '0.3s'; } else { span.style.animationDelay = '0.7s'; } }); isActive = false; }, 3000); }); // Button hover effects const buttons = document.querySelectorAll('.ticket-btn'); buttons.forEach(btn => { btn.addEventListener('mouseenter', () => { isActive = true; }); btn.addEventListener('mouseleave', () => { isActive = false; }); }); // Start animations animateBars(); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wanderlust Chronicles - Travel Blog</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&display=swap'); body { background-color: #f8f4e9; color: #333; overflow-x: hidden; height: 100vh; perspective: 1px; transform-style: preserve-3d; width: 100%; max-width: 700px; margin: 0 auto; } .container { width: 100%; max-width: 700px; height: 700px; overflow-y: auto; overflow-x: hidden; perspective: 1px; perspective-origin: 0 0; position: relative; scrollbar-width: thin; scrollbar-color: #ff7e5f #f8f4e9; } .container::-webkit-scrollbar { width: 6px; } .container::-webkit-scrollbar-track { background: #f8f4e9; } .container::-webkit-scrollbar-thumb { background-color: #ff7e5f; border-radius: 10px; } header { position: relative; height: 380px; display: flex; flex-direction: column; justify-content: center; align-items: center; transform-style: preserve-3d; z-index: 1; overflow: hidden; background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.2)), url('https://images.unsplash.com/photo-1488646953014-85cb44e25828?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); background-size: cover; background-position: center; } .parallax-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translateZ(-1px) scale(2); z-index: -1; } .logo { position: absolute; top: 20px; left: 20px; font-size: 24px; font-weight: 700; color: #fff; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); z-index: 10; } .logo span { color: #ff7e5f; } .brand-3d { position: relative; font-size: 52px; font-weight: 800; text-align: center; color: #fff; letter-spacing: 2px; text-transform: uppercase; transform-style: preserve-3d; transition: transform 0.3s ease; margin-top: 30px; } .brand-3d::before, .brand-3d::after { content: "WANDERLUST"; position: absolute; top: 0; left: 0; right: 0; transition: all 0.3s ease; } .brand-3d::before { transform: translateZ(-0.2em); color: #ff7e5f; opacity: 0.8; } .brand-3d::after { transform: translateZ(-0.4em); color: #feb47b; opacity: 0.6; } .subtitle { color: #fff; font-size: 18px; text-align: center; margin-top: 20px; font-weight: 400; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); max-width: 90%; } .main-content { background-color: #f8f4e9; position: relative; z-index: 2; padding: 30px 20px; transform-style: preserve-3d; } .post { background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); margin-bottom: 30px; overflow: hidden; transform-style: preserve-3d; transition: transform 0.3s ease, box-shadow 0.3s ease; } .post:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.15); } .post-image { height: 200px; overflow: hidden; position: relative; } .post-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .post:hover .post-image img { transform: scale(1.05); } .post-content { padding: 20px; } .post-title { position: relative; font-size: 24px; font-weight: 700; margin-bottom: 10px; color: #333; transform-style: preserve-3d; display: inline-block; } .post-title::before, .post-title::after { content: attr(data-text); position: absolute; top: 0; left: 0; right: 0; transition: all 0.3s ease; opacity: 0; } .post-title::before { transform: translateZ(-3px) translateX(3px) translateY(3px); color: #feb47b; } .post-title::after { transform: translateZ(-6px) translateX(6px) translateY(6px); color: #ff7e5f; } .post:hover .post-title::before, .post:hover .post-title::after { opacity: 0.4; } .post-excerpt { font-size: 14px; line-height: 1.6; color: #666; margin-bottom: 15px; } .post-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #999; } .post-location { display: flex; align-items: center; } .post-location svg { margin-right: 5px; fill: #ff7e5f; } .read-more { background: linear-gradient(to right, #ff7e5f, #feb47b); color: #fff; border: none; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .read-more:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255, 126, 95, 0.4); } .read-more:before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%); transition: all 0.6s ease; } .read-more:hover:before { left: 100%; } .newsletter { background: linear-gradient(135deg, #ff7e5f, #feb47b); border-radius: 12px; padding: 25px 20px; position: relative; overflow: hidden; margin-top: 40px; transform-style: preserve-3d; } .newsletter::before { content: ""; position: absolute; width: 200px; height: 200px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; top: -100px; right: -100px; } .newsletter h3 { font-size: 20px; color: #fff; margin-bottom: 10px; position: relative; z-index: 2; } .newsletter p { color: rgba(255, 255, 255, 0.8); font-size: 14px; margin-bottom: 15px; position: relative; z-index: 2; } .newsletter-form { display: flex; position: relative; z-index: 2; } .newsletter-input { flex: 1; padding: 12px 15px; border: none; border-radius: 25px 0 0 25px; font-size: 14px; outline: none; } .subscribe-btn { background-color: #333; color: #fff; border: none; padding: 0 20px; border-radius: 0 25px 25px 0; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease; } .subscribe-btn:hover { background-color: #222; } .fab-button { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #ff7e5f, #feb47b); display: flex; justify-content: center; align-items: center; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.2); cursor: pointer; z-index: 100; transition: all 0.3s ease; } .fab-button:hover { transform: translateY(-5px) rotate(45deg); box-shadow: 0 8px 20px rgba(0,0,0,0.25); } .fab-button svg { width: 24px; height: 24px; fill: #fff; } .destinations-menu { position: fixed; bottom: 90px; right: 20px; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); width: 150px; padding: 15px; transform: scale(0); transform-origin: bottom right; transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); z-index: 99; } .destinations-menu.active { transform: scale(1); } .destinations-menu ul { list-style: none; } .destinations-menu li { margin-bottom: 10px; font-size: 14px; font-weight: 500; cursor: pointer; transition: color 0.3s ease; display: flex; align-items: center; } .destinations-menu li:last-child { margin-bottom: 0; } .destinations-menu li:hover { color: #ff7e5f; } .destinations-menu li svg { width: 16px; height: 16px; margin-right: 8px; fill: #ff7e5f; } @media (max-width: 480px) { .brand-3d { font-size: 32px; } .subtitle { font-size: 16px; } .post-title { font-size: 20px; } .post-excerpt { font-size: 13px; } .newsletter h3 { font-size: 18px; } } </style> </head> <body> <div class="container"> <header> <div class="logo">Wander<span>lust</span></div> <div class="brand-3d">WANDERLUST</div> <p class="subtitle">Embarking on extraordinary journeys through uncharted territories</p> </header> <main class="main-content"> <div class="post" data-parallax="0.1"> <div class="post-image"> <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Bali Beaches"> </div> <div class="post-content"> <h2 class="post-title" data-text="Hidden Coves of Bali">Hidden Coves of Bali</h2> <p class="post-excerpt">Beyond the tourist trails lie Bali's secret beaches—pristine stretches of white sand nestled between dramatic cliffs. I discovered Nyang Nyang's untouched shoreline after a 30-minute descent through lush jungle paths.</p> <div class="post-meta"> <div class="post-location"> <svg width="12" height="12" viewBox="0 0 24 24"> <path d="M12 0c-5.522 0-10 4.395-10 9.815 0 5.505 4.375 9.268 10 14.185 5.625-4.917 10-8.68 10-14.185 0-5.42-4.478-9.815-10-9.815zm0 18c-4.419 0-8-3.582-8-8s3.581-8 8-8 8 3.582 8 8-3.581 8-8 8z"/> <path d="M12 6c-2.209 0-4 1.791-4 4s1.791 4 4 4 4-1.791 4-4-1.791-4-4-4z"/> </svg> <span>Bali, Indonesia</span> </div> <button class="read-more">Continue Reading</button> </div> </div> </div> <div class="post" data-parallax="0.2"> <div class="post-image"> <img src="https://images.unsplash.com/photo-1544085311-11a028465b03?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Alpine Traverse"> </div> <div class="post-content"> <h2 class="post-title" data-text="Alpine Traverse">Alpine Traverse</h2> <p class="post-excerpt">The Tour du Mont Blanc delivers jaw-dropping panoramas at every switchback. Day three brought me face-to-face with the imposing Glacier de Bionnassay—a shimmering river of ice cascading between granite spires.</p> <div class="post-meta"> <div class="post-location"> <svg width="12" height="12" viewBox="0 0 24 24"> <path d="M12 0c-5.522 0-10 4.395-10 9.815 0 5.505 4.375 9.268 10 14.185 5.625-4.917 10-8.68 10-14.185 0-5.42-4.478-9.815-10-9.815zm0 18c-4.419 0-8-3.582-8-8s3.581-8 8-8 8 3.582 8 8-3.581 8-8 8z"/> <path d="M12 6c-2.209 0-4 1.791-4 4s1.791 4 4 4 4-1.791 4-4-1.791-4-4-4z"/> </svg> <span>Mont Blanc, France/Italy/Switzerland</span> </div> <button class="read-more">Continue Reading</button> </div> </div> </div> <div class="post" data-parallax="0.3"> <div class="post-image"> <img src="https://images.unsplash.com/photo-1526392060635-9d6019884377?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Kyoto Temples"> </div> <div class="post-content"> <h2 class="post-title" data-text="Dawn at Fushimi Inari">Dawn at Fushimi Inari</h2> <p class="post-excerpt">Arriving at 5AM rewarded me with an ethereal experience through thousands of vermilion torii gates completely devoid of crowds. Morning mist swirled between the gates as I climbed, creating a dreamlike passage to the sacred summit.</p> <div class="post-meta"> <div class="post-location"> <svg width="12" height="12" viewBox="0 0 24 24"> <path d="M12 0c-5.522 0-10 4.395-10 9.815 0 5.505 4.375 9.268 10 14.185 5.625-4.917 10-8.68 10-14.185 0-5.42-4.478-9.815-10-9.815zm0 18c-4.419 0-8-3.582-8-8s3.581-8 8-8 8 3.582 8 8-3.581 8-8 8z"/> <path d="M12 6c-2.209 0-4 1.791-4 4s1.791 4 4 4 4-1.791 4-4-1.791-4-4-4z"/> </svg> <span>Kyoto, Japan</span> </div> <button class="read-more">Continue Reading</button> </div> </div> </div> <div class="newsletter"> <h3>Join the Adventure</h3> <p>Get monthly dispatches with hidden gems, travel hacks, and off-the-beaten-path destinations straight to your inbox.</p> <form class="newsletter-form"> <input type="email" class="newsletter-input" placeholder="Your email address"> <button type="button" class="subscribe-btn">Subscribe</button> </form> </div> </main> <div class="fab-button"> <svg viewBox="0 0 24 24"> <path d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" /> </svg> </div> <div class="destinations-menu"> <ul> <li> <svg viewBox="0 0 24 24"> <path d="M12,3L2,12H5V20H19V12H22L12,3M12,7.7c1.1,0 2,0.9 2,2c0,1.1 -0.9,2 -2,2s-2,-0.9 -2,-2C10,8.6 10.9,7.7 12,7.7M12,12.3c2.3,0 4.3,1.9 4.3,4.3H7.7C7.7,14.2 9.7,12.3 12,12.3L12,12.3z"/> </svg> <span>Asia</span> </li> <li> <svg viewBox="0 0 24 24"> <path d="M12,3L2,12H5V20H19V12H22L12,3M12,7.7c1.1,0 2,0.9 2,2c0,1.1 -0.9,2 -2,2s-2,-0.9 -2,-2C10,8.6 10.9,7.7 12,7.7M12,12.3c2.3,0 4.3,1.9 4.3,4.3H7.7C7.7,14.2 9.7,12.3 12,12.3L12,12.3z"/> </svg> <span>Europe</span> </li> <li> <svg viewBox="0 0 24 24"> <path d="M12,3L2,12H5V20H19V12H22L12,3M12,7.7c1.1,0 2,0.9 2,2c0,1.1 -0.9,2 -2,2s-2,-0.9 -2,-2C10,8.6 10.9,7.7 12,7.7M12,12.3c2.3,0 4.3,1.9 4.3,4.3H7.7C7.7,14.2 9.7,12.3 12,12.3L12,12.3z"/> </svg> <span>Americas</span> </li> <li> <svg viewBox="0 0 24 24"> <path d="M12,3L2,12H5V20H19V12H22L12,3M12,7.7c1.1,0 2,0.9 2,2c0,1.1 -0.9,2 -2,2s-2,-0.9 -2,-2C10,8.6 10.9,7.7 12,7.7M12,12.3c2.3,0 4.3,1.9 4.3,4.3H7.7C7.7,14.2 9.7,12.3 12,12.3L12,12.3z"/> </svg> <span>Oceania</span> </li> </ul> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Parallax effect for posts const container = document.querySelector('.container'); const posts = document.querySelectorAll('.post'); const header = document.querySelector('header'); const brand3d = document.querySelector('.brand-3d'); container.addEventListener('scroll', function() { let scrollTop = container.scrollTop; // Parallax for header header.style.backgroundPositionY = scrollTop * 0.5 + 'px'; // 3D rotation effect for the brand const rotateX = Math.min(scrollTop * 0.05, 20); const rotateY = Math.min(scrollTop * 0.03, 15); brand3d.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; // Parallax for posts posts.forEach(post => { const speed = parseFloat(post.getAttribute('data-parallax')) || 0.1; const yPos = -(scrollTop * speed); post.style.transform = `translateY(${yPos}px)`; // Add 3D depth to post titles when in viewport const postTitle = post.querySelector('.post-title'); const postRect = post.getBoundingClientRect(); if (postRect.top < 600 && postRect.bottom > 100) { const progress = 1 - (postRect.top / 600); const opacity = Math.min(progress * 1.5, 0.4); if (postTitle) { postTitle.querySelectorAll('::before, ::after').forEach(el => { el.style.opacity = opacity; }); } } }); }); // FAB button functionality const fabButton = document.querySelector('.fab-button'); const destinationsMenu = document.querySelector('.destinations-menu'); fabButton.addEventListener('click', function() { destinationsMenu.classList.toggle('active'); // Add subtle vibration effect when menu opens if (destinationsMenu.classList.contains('active')) { fabButton.style.transform = 'translateY(-5px) rotate(45deg)'; // Create ripple animation const ripple = document.createElement('span'); ripple.style.position = 'absolute'; ripple.style.width = '100%'; ripple.style.height = '100%'; ripple.style.borderRadius = '50%'; ripple.style.background = 'rgba(255, 255, 255, 0.4)'; ripple.style.transform = 'scale(0)'; ripple.style.animation = 'ripple 0.6s linear'; ripple.style.opacity = '1'; fabButton.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 700); } else { fabButton.style.transform = ''; } }); // Add 3D hover effect to post titles document.querySelectorAll('.post-title').forEach(title => { const text = title.textContent; title.setAttribute('data-text', text); }); // Custom parallax effect on post images when scrolling into view const postImages = document.querySelectorAll('.post-image img'); const handlePostImageParallax = () => { postImages.forEach(img => { const rect = img.getBoundingClientRect(); const windowHeight = window.innerHeight || document.documentElement.clientHeight; if (rect.top <= windowHeight && rect.bottom >= 0) { const scrolled = (windowHeight - rect.top) / (windowHeight + rect.height); const translateY = scrolled * 20 - 10; // 20px of movement range img.style.transform = `scale(1.05) translateY(${translateY}px)`; } }); }; container.addEventListener('scroll', handlePostImageParallax); // Newsletter button effect const subscribeBtn = document.querySelector('.subscribe-btn'); subscribeBtn.addEventListener('click', function(e) { e.preventDefault(); const input = document.querySelector('.newsletter-input'); if (input.value.trim()) { subscribeBtn.textContent = 'Subscribed!'; subscribeBtn.style.backgroundColor = '#4CAF50'; input.value = ''; setTimeout(() => { subscribeBtn.textContent = 'Subscribe'; subscribeBtn.style.backgroundColor = '#333'; }, 2000); } else { input.style.animation = 'shake 0.5s cubic-bezier(.36,.07,.19,.97) both'; setTimeout(() => { input.style.animation = ''; }, 500); } }); // Add read more button functionality document.querySelectorAll('.read-more').forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); const post = this.closest('.post'); const excerpt = post.querySelector('.post-excerpt'); const currentText = excerpt.textContent; // Toggle between excerpt and full content if (currentText.length < 200) { // Expanded content with more details if (post.querySelector('[data-text="Hidden Coves of Bali"]')) { excerpt.textContent = "Beyond the tourist trails lie Bali's secret beaches—pristine stretches of white sand nestled between dramatic cliffs. I discovered Nyang Nyang's untouched shoreline after a 30-minute descent through lush jungle paths. The reward? Crystal waters, not another soul for miles, and volcanic black sand meeting turquoise waves. Local fishermen taught me to catch dinner using traditional techniques passed down for generations. As sunset painted the horizon in fiery hues, I realized these hidden coves offer the authentic Bali experience that luxury resorts simply cannot replicate."; } else if (post.querySelector('[data-text="Alpine Traverse"]')) { excerpt.textContent = "The Tour du Mont Blanc delivers jaw-dropping panoramas at every switchback. Day three brought me face-to-face with the imposing Glacier de Bionnassay—a shimmering river of ice cascading between granite spires. The 10-day, 170km circuit crosses through three countries with distinctly different Alpine cultures. In tiny Courmayeur, I savored fresh pasta and local Fontina cheese, while Swiss mountain huts offered rösti and fondue after grueling ascents. The trek's physical demands—over 10,000m of cumulative elevation gain—are matched only by the emotional impact of standing beneath Europe's highest peak in complete solitude."; } else { excerpt.textContent = "Arriving at 5AM rewarded me with an ethereal experience through thousands of vermilion torii gates completely devoid of crowds. Morning mist swirled between the gates as I climbed, creating a dreamlike passage to the sacred summit. The two-hour ascent passes dozens of smaller shrines, each dedicated to Inari, the Shinto god of rice. Locals stopped to leave offerings of sake and rice at stone fox statues—Inari's messengers. At the summit viewpoint, Kyoto emerged from morning fog as temple bells announced daybreak across the ancient capital. This pre-dawn pilgrimage revealed the spiritual heart of Japan that most travelers never experience."; } this.textContent = "Read Less"; } else { // Return to original excerpt if (post.querySelector('[data-text="Hidden Coves of Bali"]')) { excerpt.textContent = "Beyond the tourist trails lie Bali's secret beaches—pristine stretches of white sand nestled between dramatic cliffs. I discovered Nyang Nyang's untouched shoreline after a 30-minute descent through lush jungle paths."; } else if (post.querySelector('[data-text="Alpine Traverse"]')) { excerpt.textContent = "The Tour du Mont Blanc delivers jaw-dropping panoramas at every switchback. Day three brought me face-to-face with the imposing Glacier de Bionnassay—a shimmering river of ice cascading between granite spires."; } else { excerpt.textContent = "Arriving at 5AM rewarded me with an ethereal experience through thousands of vermilion torii gates completely devoid of crowds. Morning mist swirled between the gates as I climbed, creating a dreamlike passage to the sacred summit."; } this.textContent = "Continue Reading"; } }); }); // Create CSS animation for shake effect const style = document.createElement('style'); style.textContent = ` @keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } @keyframes ripple { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(4); opacity: 0; } } `; document.head.appendChild(style); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Gourmet 3D Menu Display</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Cormorant Garamond', serif; } @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap'); body { background: #1a1a1a; height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; perspective: 1000px; } .container { position: relative; width: 680px; height: 680px; display: flex; flex-direction: column; justify-content: center; align-items: center; transform-style: preserve-3d; } .menu-title { font-family: 'Playfair Display', serif; font-size: 3rem; font-weight: 700; margin-bottom: 0.5rem; color: #f0e6d2; text-shadow: 0 2px 10px rgba(255, 215, 122, 0.4); letter-spacing: 1px; text-align: center; transform: translateZ(50px); transition: transform 0.5s ease-out; } .menu-subtitle { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.1rem; color: #d4b87b; margin-bottom: 2rem; text-align: center; transform: translateZ(30px); transition: transform 0.5s ease-out; } .menu-carousel { position: relative; width: 100%; height: 450px; perspective: 1000px; transform-style: preserve-3d; } .menu-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.8s ease-out, opacity 0.5s ease; opacity: 0; pointer-events: none; display: flex; justify-content: center; align-items: center; } .menu-item.active { opacity: 1; pointer-events: auto; z-index: 5; } .dish-card { width: 90%; max-width: 480px; height: 400px; background: linear-gradient(145deg, #272727, #212121); border-radius: 20px; padding: 30px; position: relative; overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 215, 122, 0.1), inset 0 0 10px rgba(255, 255, 255, 0.05); transform-style: preserve-3d; transform: translateZ(0px); transition: transform 0.5s ease-out, box-shadow 0.4s ease; } .dish-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 80%); transform: translateZ(1px); pointer-events: none; opacity: 0; transition: opacity 0.6s ease; } .dish-card:hover::before { opacity: 1; } .dish-card:hover { transform: translateZ(10px) scale(1.02); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 215, 122, 0.15), inset 0 0 15px rgba(255, 255, 255, 0.08); } .dish-image { width: 100%; height: 220px; border-radius: 12px; object-fit: cover; transform: translateZ(30px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); transition: transform 0.4s ease-out; } .dish-card:hover .dish-image { transform: translateZ(40px); } .dish-details { margin-top: 20px; transform: translateZ(20px); } .dish-name { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 600; color: #f0e6d2; margin-bottom: 5px; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); } .dish-description { font-size: 0.9rem; line-height: 1.4; color: #b3a090; margin-bottom: 15px; } .dish-price { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600; color: #d4b87b; } .navigation { display: flex; justify-content: space-between; width: 150px; margin-top: 30px; transform: translateZ(40px); } .nav-btn { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(145deg, #272727, #212121); border: none; color: #d4b87b; font-size: 1.5rem; cursor: pointer; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), inset 0 0 5px rgba(255, 255, 255, 0.05); transition: all 0.3s ease; display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; } .nav-btn:hover { transform: translateZ(10px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 215, 122, 0.2), inset 0 0 8px rgba(255, 255, 255, 0.08); color: #ffd77a; } .nav-btn:active { transform: translateZ(5px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 0 5px rgba(255, 255, 255, 0.05); } .dish-tag { position: absolute; top: 15px; right: 15px; background: rgba(212, 184, 123, 0.9); color: #1a1a1a; font-size: 0.7rem; font-weight: 600; padding: 5px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 1px; transform: translateZ(50px); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } @media (max-width: 700px) { .menu-title { font-size: 2.5rem; } .dish-card { width: 85%; height: 380px; padding: 20px; } .dish-image { height: 180px; } .dish-name { font-size: 1.5rem; } .dish-description { font-size: 0.8rem; } .nav-btn { width: 50px; height: 50px; } } @media (max-width: 480px) { .menu-title { font-size: 2rem; } .menu-subtitle { font-size: 1rem; } .dish-card { width: 90%; height: 350px; padding: 15px; } .dish-image { height: 160px; } .dish-name { font-size: 1.3rem; } } .loading-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #1a1a1a; display: flex; justify-content: center; align-items: center; z-index: 100; transition: opacity 0.8s ease-out; } .loading-icon { width: 80px; height: 80px; position: relative; } .loading-icon::before, .loading-icon::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border: 4px solid transparent; } .loading-icon::before { border-top-color: #d4b87b; animation: spin 1.2s linear infinite; } .loading-icon::after { border-bottom-color: #d4b87b; animation: spin 0.8s linear reverse infinite; } @keyframes spin { 100% { transform: rotate(360deg); } } .loading-hidden { opacity: 0; pointer-events: none; } </style> </head> <body> <div class="loading-screen"> <div class="loading-icon"></div> </div> <div class="container"> <h1 class="menu-title">L'Artisan</h1> <p class="menu-subtitle">Seasonal Chef's Selection</p> <div class="menu-carousel"> <div class="menu-item active"> <div class="dish-card"> <img src="https://images.unsplash.com/photo-1544025162-d76694265947" alt="Truffle Scented Wild Mushroom Risotto" class="dish-image"> <div class="dish-details"> <h2 class="dish-name">Truffle Scented Wild Mushroom Risotto</h2> <p class="dish-description">Arborio rice slow-cooked with porcini, chanterelle, and shiitake mushrooms, finished with aged parmesan and fresh black truffle.</p> <div class="dish-price">$32</div> </div> <div class="dish-tag">Signature</div> </div> </div> <div class="menu-item"> <div class="dish-card"> <img src="https://images.unsplash.com/photo-1546833998-877b37c2e5c4" alt="Pan Seared Scallops" class="dish-image"> <div class="dish-details"> <h2 class="dish-name">Pan Seared Scallops</h2> <p class="dish-description">Day-boat scallops with cauliflower purée, brown butter, preserved lemon, and crispy pancetta crumble.</p> <div class="dish-price">$36</div> </div> <div class="dish-tag">Seasonal</div> </div> </div> <div class="menu-item"> <div class="dish-card"> <img src="https://images.unsplash.com/photo-1600891964092-4316c288032e" alt="Sous Vide Rack of Lamb" class="dish-image"> <div class="dish-details"> <h2 class="dish-name">Sous Vide Rack of Lamb</h2> <p class="dish-description">Herb-crusted lamb with jerusalem artichoke, sauce vierge, and mint-infused jus, perfectly cooked at 57°C.</p> <div class="dish-price">$42</div> </div> <div class="dish-tag">Chef's Choice</div> </div> </div> <div class="menu-item"> <div class="dish-card"> <img src="https://images.unsplash.com/photo-1551024709-8f23befc6f87" alt="Chocolate Sphere Dessert" class="dish-image"> <div class="dish-details"> <h2 class="dish-name">Chocolate Sphere Dessert</h2> <p class="dish-description">Dark chocolate sphere with hazelnut mousse center, hot caramel sauce, and gold leaf, served with house-made vanilla bean ice cream.</p> <div class="dish-price">$18</div> </div> <div class="dish-tag">Dessert</div> </div> </div> </div> <div class="navigation"> <button class="nav-btn prev-btn">❮</button> <button class="nav-btn next-btn">❯</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Loading screen setTimeout(() => { document.querySelector('.loading-screen').classList.add('loading-hidden'); }, 1200); const container = document.querySelector('.container'); const menuItems = document.querySelectorAll('.menu-item'); const prevBtn = document.querySelector('.prev-btn'); const nextBtn = document.querySelector('.next-btn'); const dishCards = document.querySelectorAll('.dish-card'); let currentIndex = 0; let isAnimating = false; // Initialize 3D effect function init3DEffect() { container.addEventListener('mousemove', (e) => { if (isAnimating) return; const xAxis = (window.innerWidth / 2 - e.pageX) / 25; const yAxis = (window.innerHeight / 2 - e.pageY) / 25; container.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`; // Parallax effect for active dish card const activeCard = document.querySelector('.menu-item.active .dish-card'); if (activeCard) { const rect = activeCard.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const centerX = rect.width / 2; const centerY = rect.height / 2; activeCard.style.setProperty('--x', `${(x - centerX) / 10}px`); activeCard.style.setProperty('--y', `${(y - centerY) / 10}px`); // Light reflection effect activeCard.querySelector('.dish-image').style.transform = `translateZ(30px) rotateX(${(y - centerY) / 50}deg) rotateY(${-(x - centerX) / 50}deg)`; // Update before pseudo element for light effect const xPercent = ((x / rect.width) * 100); const yPercent = ((y / rect.height) * 100); activeCard.style.background = `radial-gradient(circle at ${xPercent}% ${yPercent}%, #2a2a2a, #212121)`; } }); container.addEventListener('mouseleave', () => { container.style.transform = 'rotateY(0deg) rotateX(0deg)'; container.style.transition = 'transform 0.5s ease'; // Reset active card const activeCard = document.querySelector('.menu-item.active .dish-card'); if (activeCard) { activeCard.style.transform = 'translateZ(0px)'; activeCard.style.background = 'linear-gradient(145deg, #272727, #212121)'; activeCard.querySelector('.dish-image').style.transform = 'translateZ(30px)'; } }); container.addEventListener('mouseenter', () => { container.style.transition = 'none'; }); } // Dish card hover effect dishCards.forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateZ(10px) scale(1.02)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateZ(0px)'; }); }); // Navigation function goToSlide(index) { if (isAnimating) return; isAnimating = true; const currentItem = menuItems[currentIndex]; currentItem.classList.remove('active'); currentItem.style.transform = 'translateX(-100%) rotateY(-30deg)'; currentItem.style.opacity = '0'; currentIndex = index; if (currentIndex < 0) currentIndex = menuItems.length - 1; if (currentIndex >= menuItems.length) currentIndex = 0; const newItem = menuItems[currentIndex]; newItem.style.transform = 'translateX(100%) rotateY(30deg)'; // Delay to allow exit animation to complete setTimeout(() => { newItem.classList.add('active'); newItem.style.transform = 'translateX(0) rotateY(0)'; newItem.style.opacity = '1'; setTimeout(() => { isAnimating = false; }, 500); }, 300); } prevBtn.addEventListener('click', () => { goToSlide(currentIndex - 1); }); nextBtn.addEventListener('click', () => { goToSlide(currentIndex + 1); }); // Initialize init3DEffect(); // Auto rotate every 5 seconds let autoRotate = setInterval(() => { goToSlide(currentIndex + 1); }, 5000); // Stop auto rotation on user interaction container.addEventListener('mouseenter', () => { clearInterval(autoRotate); }); container.addEventListener('mouseleave', () => { autoRotate = setInterval(() => { goToSlide(currentIndex + 1); }, 5000); }); // Touch swipe support let touchStartX = 0; let touchEndX = 0; container.addEventListener('touchstart', e => { touchStartX = e.changedTouches[0].screenX; }); container.addEventListener('touchend', e => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }); function handleSwipe() { if (touchEndX < touchStartX - 50) { // Swipe left goToSlide(currentIndex + 1); } else if (touchEndX > touchStartX + 50) { // Swipe right goToSlide(currentIndex - 1); } } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>VR Typography Interface</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { width: 100%; height: 100vh; overflow: hidden; background-color: #0a0a16; cursor: none; perspective: 1000px; } .container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; transform-style: preserve-3d; } .vr-space { position: relative; width: 600px; height: 600px; transform-style: preserve-3d; transition: transform 0.5s ease-out; } .depth-layer { position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; transform-style: preserve-3d; opacity: 0.9; transition: all 0.3s ease; } .intro-layer { transform: translateZ(0px); z-index: 10; color: white; padding: 2rem; text-align: center; background: rgba(0, 0, 0, 0.7); border-radius: 20px; box-shadow: 0 0 30px rgba(95, 77, 255, 0.3); backdrop-filter: blur(10px); } .heading-layer { transform: translateZ(-200px); } .action-layer { transform: translateZ(-400px); } .background-layer { transform: translateZ(-600px); } h1 { font-size: 4rem; font-weight: 800; letter-spacing: -2px; margin-bottom: 1rem; transform-style: preserve-3d; background: linear-gradient(135deg, #5f4dff, #ff4dea); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 10px 30px rgba(255, 77, 234, 0.5); } .heading-3d { position: relative; font-size: 6rem; font-weight: 900; text-transform: uppercase; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.8); transform-style: preserve-3d; transition: all 0.5s ease; } .heading-3d::after { content: "IMMERSE"; position: absolute; top: 0; left: 0; color: #5f4dff; -webkit-text-stroke: 0; filter: blur(20px); z-index: -1; transform: translateZ(-20px); } p { font-size: 1.1rem; line-height: 1.6; margin-bottom: 1.5rem; max-width: 500px; color: rgba(255, 255, 255, 0.9); } .vr-button { padding: 0.75rem 2rem; background: linear-gradient(135deg, #5f4dff, #ff4dea); color: white; border: none; border-radius: 30px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(95, 77, 255, 0.4); position: relative; overflow: hidden; z-index: 50; } .vr-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: 0.5s; } .vr-button:hover::before { left: 100%; } .vr-button:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(95, 77, 255, 0.6); } .grid-effects { position: absolute; width: 100%; height: 100%; background: linear-gradient(rgba(95, 77, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(95, 77, 255, 0.1) 1px, transparent 1px); background-size: 40px 40px; transform: rotateX(80deg) translateZ(-500px); perspective: 500px; animation: gridMove 20s linear infinite; } .floating-elements { position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; } .floating-cube { position: absolute; width: 60px; height: 60px; transform-style: preserve-3d; animation: floatCube 15s ease-in-out infinite; } .cube-face { position: absolute; width: 100%; height: 100%; background: rgba(95, 77, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); } .face-front { transform: translateZ(30px); } .face-back { transform: translateZ(-30px) rotateY(180deg); } .face-right { transform: rotateY(90deg) translateZ(30px); } .face-left { transform: rotateY(-90deg) translateZ(30px); } .face-top { transform: rotateX(90deg) translateZ(30px); } .face-bottom { transform: rotateX(-90deg) translateZ(30px); } .interaction-instruction { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; z-index: 100; text-align: center; opacity: 0.7; letter-spacing: 1px; animation: pulse 2s infinite; } .custom-cursor { position: fixed; width: 20px; height: 20px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.3); box-shadow: 0 0 15px #5f4dff; transform: translate(-50%, -50%); pointer-events: none; z-index: 9999; mix-blend-mode: difference; } .cursor-ring { position: fixed; width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(95, 77, 255, 0.5); transform: translate(-50%, -50%); pointer-events: none; z-index: 9998; transition: width 0.3s, height 0.3s; } .indicators { position: absolute; bottom: 60px; right: 30px; display: flex; flex-direction: column; z-index: 100; } .indicator { margin: 5px 0; width: 100px; height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; overflow: hidden; } .indicator-progress { height: 100%; width: 0%; background: linear-gradient(90deg, #5f4dff, #ff4dea); transition: width 0.3s ease; } .experience-toggle { position: absolute; top: 20px; right: 20px; z-index: 200; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); color: white; padding: 8px 15px; border-radius: 20px; cursor: pointer; font-size: 0.9rem; backdrop-filter: blur(5px); transition: all 0.3s ease; } .experience-toggle:hover { background: rgba(95, 77, 255, 0.3); } @keyframes gridMove { 0% { background-position: 0 0; } 100% { background-position: 0 1000px; } } @keyframes floatCube { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-100px) rotate(180deg); } } @keyframes pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 0.3; } } @media (max-width: 700px) { .vr-space { width: 100%; height: 100%; max-width: 500px; max-height: 500px; } h1 { font-size: 2.5rem; } .heading-3d { font-size: 3.5rem; } p { font-size: 1rem; padding: 0 15px; } .indicators { bottom: 30px; right: 15px; } } @media (max-height: 700px) { .vr-space { transform: scale(0.8); } } </style> </head> <body> <div class="custom-cursor"></div> <div class="cursor-ring"></div> <div class="container"> <div class="vr-space"> <div class="grid-effects"></div> <div class="floating-elements"> <div class="floating-cube" style="top: 10%; left: 10%; animation-delay: 0s;"> <div class="cube-face face-front"></div> <div class="cube-face face-back"></div> <div class="cube-face face-right"></div> <div class="cube-face face-left"></div> <div class="cube-face face-top"></div> <div class="cube-face face-bottom"></div> </div> <div class="floating-cube" style="top: 70%; left: 80%; animation-delay: -5s;"> <div class="cube-face face-front"></div> <div class="cube-face face-back"></div> <div class="cube-face face-right"></div> <div class="cube-face face-left"></div> <div class="cube-face face-top"></div> <div class="cube-face face-bottom"></div> </div> <div class="floating-cube" style="top: 30%; left: 85%; animation-delay: -10s;"> <div class="cube-face face-front"></div> <div class="cube-face face-back"></div> <div class="cube-face face-right"></div> <div class="cube-face face-left"></div> <div class="cube-face face-top"></div> <div class="cube-face face-bottom"></div> </div> </div> <div class="depth-layer intro-layer"> <h1>3D Typography in VR</h1> <p>Explore an immersive typographic experience where depth, perspective, and motion converge. Move your cursor to navigate through layers of dimensional text that respond to your presence.</p> <button class="vr-button">Enter Experience</button> </div> <div class="depth-layer heading-layer"> <div class="heading-3d">IMMERSE</div> </div> <div class="depth-layer action-layer"> <p style="color: rgba(255, 255, 255, 0.6); font-size: 1.5rem; text-align: center; transform: rotateX(20deg);"> Navigate through dimensions<br>with fluid gestures </p> </div> <div class="depth-layer background-layer"> <div style="width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(95, 77, 255, 0.2), transparent); filter: blur(30px);"></div> </div> </div> <div class="indicators"> <div class="indicator"> <div class="indicator-progress" id="x-indicator"></div> </div> <div class="indicator"> <div class="indicator-progress" id="y-indicator"></div> </div> <div class="indicator"> <div class="indicator-progress" id="z-indicator"></div> </div> </div> <button class="experience-toggle">Toggle Mode</button> </div> <div class="interaction-instruction">Move your cursor to navigate the VR space</div> <script> document.addEventListener('DOMContentLoaded', function() { const container = document.querySelector('.container'); const vrSpace = document.querySelector('.vr-space'); const headingLayer = document.querySelector('.heading-layer'); const introLayer = document.querySelector('.intro-layer'); const customCursor = document.querySelector('.custom-cursor'); const cursorRing = document.querySelector('.cursor-ring'); const xIndicator = document.getElementById('x-indicator'); const yIndicator = document.getElementById('y-indicator'); const zIndicator = document.getElementById('z-indicator'); const vrButton = document.querySelector('.vr-button'); const toggleButton = document.querySelector('.experience-toggle'); let isExperienceActive = false; let maxRotation = 20; let maxDepth = 50; let mouseX = 0; let mouseY = 0; let targetX = 0; let targetY = 0; // Custom cursor document.addEventListener('mousemove', function(e) { mouseX = e.clientX; mouseY = e.clientY; // Update indicator values let xPercent = (e.clientX / window.innerWidth) * 100; let yPercent = (e.clientY / window.innerHeight) * 100; xIndicator.style.width = `${xPercent}%`; yIndicator.style.width = `${yPercent}%`; zIndicator.style.width = `${(xPercent + yPercent) / 2}%`; if (isExperienceActive) { // Map mouse position to rotation angles targetX = maxRotation * ((e.clientY / window.innerHeight) - 0.5); targetY = -maxRotation * ((e.clientX / window.innerWidth) - 0.5); } }); // Update cursor position with smooth animation function updateCursorPosition() { customCursor.style.left = `${mouseX}px`; customCursor.style.top = `${mouseY}px`; cursorRing.style.left = `${mouseX}px`; cursorRing.style.top = `${mouseY}px`; requestAnimationFrame(updateCursorPosition); } updateCursorPosition(); // Elements to animate when hovering const interactiveElements = document.querySelectorAll('.vr-button, .experience-toggle'); interactiveElements.forEach(element => { element.addEventListener('mouseenter', () => { cursorRing.style.width = '60px'; cursorRing.style.height = '60px'; cursorRing.style.borderColor = 'rgba(255, 77, 234, 0.8)'; }); element.addEventListener('mouseleave', () => { cursorRing.style.width = '40px'; cursorRing.style.height = '40px'; cursorRing.style.borderColor = 'rgba(95, 77, 255, 0.5)'; }); }); // Animation function for smooth rotation function animateVRSpace() { // Apply smooth easing to rotation const rotationX = targetX * 0.1; const rotationY = targetY * 0.1; vrSpace.style.transform = `rotateX(${rotationX}deg) rotateY(${rotationY}deg)`; // Parallax effect on layers headingLayer.style.transform = `translateZ(-200px) translateX(${rotationY * -2}px) translateY(${rotationX * -2}px)`; requestAnimationFrame(animateVRSpace); } // Start animation loop animateVRSpace(); // Button to enter the experience vrButton.addEventListener('click', function() { activateExperience(); }); // Toggle button for experience mode toggleButton.addEventListener('click', function() { if (isExperienceActive) { deactivateExperience(); toggleButton.textContent = "Enable VR Mode"; } else { activateExperience(); toggleButton.textContent = "Disable VR Mode"; } }); function activateExperience() { isExperienceActive = true; introLayer.style.opacity = '0'; introLayer.style.pointerEvents = 'none'; // Expand the 3D effect maxRotation = 30; // After animation completes, hide intro layer setTimeout(() => { introLayer.style.display = 'none'; }, 500); // Enhance the 3D typography effect const heading3d = document.querySelector('.heading-3d'); heading3d.style.transform = 'scale(1.2)'; heading3d.style.textShadow = '0 30px 60px rgba(95, 77, 255, 0.8)'; } function deactivateExperience() { isExperienceActive = false; introLayer.style.display = 'flex'; // Reset rotation parameters maxRotation = 10; targetX = 0; targetY = 0; // Fade in the intro layer setTimeout(() => { introLayer.style.opacity = '0.9'; introLayer.style.pointerEvents = 'all'; }, 50); // Reset the 3D typography effect const heading3d = document.querySelector('.heading-3d'); heading3d.style.transform = 'scale(1)'; heading3d.style.textShadow = 'none'; } // Create random floating particles function createParticles() { const floatingElements = document.querySelector('.floating-elements'); for (let i = 0; i < 20; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); particle.style.position = 'absolute'; particle.style.width = `${Math.random() * 10 + 5}px`; particle.style.height = particle.style.width; particle.style.borderRadius = '50%'; particle.style.background = `rgba(${Math.random() * 100 + 155}, ${Math.random() * 100 + 155}, 255, ${Math.random() * 0.5 + 0.3})`; particle.style.boxShadow = '0 0 10px rgba(95, 77, 255, 0.8)'; // Random position particle.style.top = `${Math.random() * 100}%`; particle.style.left = `${Math.random() * 100}%`; // Random depth const zDepth = Math.random() * 600 - 300; particle.style.transform = `translateZ(${zDepth}px)`; // Animation const duration = Math.random() * 20 + 10; particle.style.animation = `floatParticle ${duration}s infinite ease-in-out`; particle.style.animationDelay = `${Math.random() * -20}s`; // Add to container floatingElements.appendChild(particle); } // Add keyframes dynamically const styleSheet = document.createElement('style'); styleSheet.textContent = ` @keyframes floatParticle { 0%, 100% { transform: translateZ(var(--z, 0)) translateY(0) translateX(0); } 25% { transform: translateZ(var(--z, 0)) translateY(-50px) translateX(50px); } 50% { transform: translateZ(var(--z, 0)) translateY(-100px) translateX(0); } 75% { transform: translateZ(var(--z, 0)) translateY(-50px) translateX(-50px); } } `; document.head.appendChild(styleSheet); } createParticles(); // Add touchmove event for mobile devices document.addEventListener('touchmove', function(e) { if (isExperienceActive && e.touches.length > 0) { const touch = e.touches[0]; targetX = maxRotation * ((touch.clientY / window.innerHeight) - 0.5); targetY = -maxRotation * ((touch.clientX / window.innerWidth) - 0.5); // Update indicators let xPercent = (touch.clientX / window.innerWidth) * 100; let yPercent = (touch.clientY / window.innerHeight) * 100; xIndicator.style.width = `${xPercent}%`; yIndicator.style.width = `${yPercent}%`; zIndicator.style.width = `${(xPercent + yPercent) / 2}%`; } }); }); </script> </body> </html>
