Webleb - Extraits de Code

HTML

<!DOCTYPE html>

<head>

<title>Lumina Automotive | Exclusive Experience</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap');

:root {

--accent: #3b82f6;

--bg: #0a0a0a;

--text: #ffffff;

}

body.light-theme {

--bg: #f5f5f5;

--text: #0a0a0a;

}

body {

background-color: var(--bg);

color: var(--text);

font-family: 'Inter', sans-serif;

overflow: hidden;

transition: background-color 0.7s ease;

}

.clip-text {

clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

}

.menu-overlay {

clip-path: circle(0% at 90% 10%);

transition: clip-path 1s cubic-bezier(0.85, 0, 0.15, 1);

}

.menu-overlay.active {

clip-path: circle(150% at 90% 10%);

}

.slide-image {

transition: transform 2s ease-out, opacity 1.5s ease;

transform: scale(1.1);

opacity: 0;

}

.slide-image.active {

transform: scale(1);

opacity: 1;

}

.progress-bar {

height: 4px;

background: rgba(255,255,255,0.1);

position: relative;

overflow: hidden;

}

.progress-fill {

position: absolute;

left: 0;

top: 0;

height: 100%;

width: 0%;

background: var(--accent);

}

.vertical-indicator {

width: 2px;

height: 20px;

background: rgba(128,128,128,0.3);

transition: all 0.5s ease;

}

.vertical-indicator.active {

height: 60px;

background: var(--accent);

}

/* Hide Scrollbar */

::-webkit-scrollbar { display: none; }

</style>

</head>

<p class="uppercase tracking-[0.5em] text-xs font-light">Lumina Automotive</p>

</div>

</div>

<span class="font-bold tracking-widest hidden md:block uppercase">Automotive</span>

</div>

</button>

<span id="menu-text" class="text-xs font-bold tracking-widest uppercase hidden md:block">Keşfet</span>

</div>

</button>

</div>

</nav>

<li><a href="#" class="text-6xl md:text-8xl font-black uppercase tracking-tighter hover:text-blue-500 transition-all inline-block hover:translate-x-6">Modeller</a></li>

<li><a href="#" class="text-6xl md:text-8xl font-black uppercase tracking-tighter hover:text-blue-500 transition-all inline-block hover:translate-x-6">Teknoloji</a></li>

<li><a href="#" class="text-6xl md:text-8xl font-black uppercase tracking-tighter hover:text-blue-500 transition-all inline-block hover:translate-x-6">Atölye</a></li>

<li><a href="#" class="text-6xl md:text-8xl font-black uppercase tracking-tighter hover:text-blue-500 transition-all inline-block hover:translate-x-6">İletişim</a></li>

</ul>

<p class="text-neutral-500 text-xl max-w-sm mb-8">Sınırları zorlayan tasarım ve rakipsiz performansla sürüş deneyiminizi yeniden tanımlayın.</p>

<span>Instagram</span><span>Youtube</span><span>Twitter</span>

</div>

</div>

<h2 id="hero-subtitle" class="text-sm md:text-lg font-bold tracking-[0.6em] uppercase text-blue-500">PRECISION — 01</h2>

</div>

<h1 id="hero-title" class="text-7xl md:text-[14rem] font-black italic tracking-tighter leading-[0.85] uppercase clip-text">Urban</h1>

</div>

Şehrin kalbinde sessiz bir güç; modern mühendisliğin zirvesi.

</p>

<span class="text-sm font-bold uppercase tracking-widest">Detayları Gör</span>

</button>

</div>

</button>

</button>

</div>

</div>

</main>

// Data

const SLIDES = [

{

title: "Urban",

subtitle: "Precision",

image: "https://images.unsplash.com/photo-1555215695-3004980ad54e?q=80&w=2600&auto=format&fit=crop",

desc: "Şehrin kalbinde sessiz bir güç; modern mühendisliğin zirvesi."

},

{

title: "Azure",

subtitle: "Liberty",

image: "https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=2600&auto=format&fit=crop",

desc: "Sonsuz maviliğe doğru, rüzgarla uyum içinde bir yolculuk."

},

{

title: "Neon",

subtitle: "Velocity",

image: "https://images.unsplash.com/photo-1544636331-e26879cd4d9b?q=80&w=2600&auto=format&fit=crop",

desc: "Gecenin karanlığını yırtan fütüristik hatlar ve saf enerji."

},

{

title: "Alpine",

subtitle: "Dominance",

image: "https://images.unsplash.com/photo-1533473359331-0135ef1b58bf?q=80&w=2600&auto=format&fit=crop",

desc: "Zirvelere hükmeden dayanıklılık ve benzersiz konforun birleşimi."

}

];

let currentIdx = 0;

let isMenuOpen = false;

// Elements

const preloader = document.getElementById('preloader');

const imgContainer = document.getElementById('image-container');

const verticalNav = document.getElementById('vertical-nav');

const heroTitle = document.getElementById('hero-title');

const heroSubtitle = document.getElementById('hero-subtitle');

const heroDesc = document.getElementById('hero-desc');

const themeToggle = document.getElementById('theme-toggle');

const menuBtn = document.getElementById('menu-btn');

const menuOverlay = document.getElementById('menu-overlay');

// Initialization

function init() {

lucide.createIcons();

// Inject images

SLIDES.forEach((slide, i) => {

const img = document.createElement('img');

img.src = slide.image;

img.className = `slide-image absolute inset-0 w-full h-full object-cover ${i === 0 ? 'active' : ''}`;

imgContainer.appendChild(img);

const indicator = document.createElement('div');

indicator.className = `vertical-indicator ${i === 0 ? 'active' : ''} cursor-pointer`;

indicator.onclick = () => goToSlide(i);

verticalNav.appendChild(indicator);

});

// Remove preloader

setTimeout(() => {

gsap.to(preloader, {

yPercent: -100,

duration: 1.2,

ease: "power4.inOut",

onComplete: () => {

preloader.style.display = 'none';

animateSlide();

}

});

}, 2000);

}

// Animation Logic

function animateSlide() {

const tl = gsap.timeline();

// Reset text

gsap.set([heroTitle, heroSubtitle, heroDesc], { y: 100, opacity: 0 });

// Content entrance

tl.to(heroSubtitle, { y: 0, opacity: 1, duration: 1, ease: "power3.out" }, 0.2)

.to(heroTitle, { y: 0, opacity: 1, duration: 1.2, ease: "power4.out" }, 0.4)

.to(heroDesc, { y: 0, opacity: 1, duration: 1, ease: "power3.out" }, 0.6);

}

function goToSlide(idx) {

if (idx === currentIdx) return;

// Exit animation

gsap.to([heroTitle, heroSubtitle, heroDesc], {

y: -50,

opacity: 0,

duration: 0.4,

ease: "power2.in",

onComplete: () => {

currentIdx = idx;

updateUI();

animateSlide();

}

});

}

function updateUI() {

const data = SLIDES[currentIdx];

heroTitle.innerText = data.title;

heroSubtitle.innerText = `${data.subtitle} — 0${currentIdx + 1}`;

heroDesc.innerText = data.desc;

// Update Images

document.querySelectorAll('.slide-image').forEach((img, i) => {

img.classList.toggle('active', i === currentIdx);

});

// Update Indicators

document.querySelectorAll('.vertical-indicator').forEach((ind, i) => {

ind.classList.toggle('active', i === currentIdx);

});

}

// Event Listeners

document.getElementById('next-btn').onclick = () => {

let next = (currentIdx + 1) % SLIDES.length;

goToSlide(next);

};

document.getElementById('prev-btn').onclick = () => {

let prev = (currentIdx - 1 + SLIDES.length) % SLIDES.length;

goToSlide(prev);

};

themeToggle.onclick = () => {

document.body.classList.toggle('light-theme');

const isLight = document.body.classList.contains('light-theme');

const sunIcon = document.getElementById('sun-icon');

const gradient = document.getElementById('overlay-gradient');

if (isLight) {

sunIcon.setAttribute('data-lucide', 'moon');

gradient.classList.replace('from-black/80', 'from-white/70');

} else {

sunIcon.setAttribute('data-lucide', 'sun');

gradient.classList.replace('from-white/70', 'from-black/80');

}

lucide.createIcons();

};

menuBtn.onclick = () => {

isMenuOpen = !isMenuOpen;

menuOverlay.classList.toggle('active');

// UI Tweaks for Menu

document.getElementById('menu-text').innerText = isMenuOpen ? 'Kapat' : 'Keşfet';

document.getElementById('bar1').style.transform = isMenuOpen ? 'rotate(45deg) translateY(6px)' : '';

document.getElementById('bar2').style.transform = isMenuOpen ? 'rotate(-45deg) translateY(-6px)' : '';

menuBtn.classList.toggle('bg-white', isMenuOpen);

menuBtn.classList.toggle('text-black', isMenuOpen);

};

window.onload = init;

</script>

</body>

</html>

CSS

JS

Metehan

Recommandé