Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>SmartCity | Geleceğin Yaşamı</title>

<style>

:root {

--primary: #00f2ff;

--bg-dark: #0a0b10;

--glass: rgba(255, 255, 255, 0.1);

--text: #ffffff;

}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {

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

background-color: var(--bg-dark);

color: var(--text);

overflow: hidden;

height: 100vh;

}

/* Video Arkaplan */

.video-container {

position: fixed;

top: 0; left: 0;

width: 100%; height: 100%;

z-index: -1;

overflow: hidden;

}

.video-container video {

width: 100%; height: 100%;

object-fit: cover;

filter: brightness(0.4) contrast(1.1);

}

/* Overlay Arayüz */

header {

position: fixed;

top: 0; width: 100%;

padding: 25px;

display: flex;

justify-content: space-between;

align-items: center;

z-index: 100;

backdrop-filter: blur(10px);

background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);

}

.logo { font-weight: 700; letter-spacing: 2px; font-size: 1.2rem; color: var(--primary); }

/* Ana Slider Alanı */

.slider-wrapper {

height: 100vh;

display: flex;

transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);

}

.slide {

min-width: 100%;

height: 100%;

display: flex;

flex-direction: column;

justify-content: center;

padding: 40px;

scroll-snap-align: start;

}

.slide-content {

max-width: 600px;

opacity: 0;

transform: translateY(30px);

transition: all 0.8s ease 0.2s;

}

.slide.active .slide-content {

opacity: 1;

transform: translateY(0);

}

h1 { font-size: 3.5rem; line-height: 1; margin-bottom: 20px; font-weight: 700; }

p { font-size: 1.1rem; line-height: 1.6; color: rgba(255,255,255,0.8); margin-bottom: 30px; }

.btn {

display: inline-block;

padding: 15px 35px;

border: 1px solid var(--primary);

color: var(--primary);

text-decoration: none;

border-radius: 50px;

font-weight: 600;

transition: 0.3s;

background: rgba(0, 242, 255, 0.05);

}

/* Dokunmatik Gösterge */

.nav-dots {

position: fixed;

right: 20px;

top: 50%;

transform: translateY(-50%);

display: flex;

flex-direction: column;

gap: 15px;

}

.dot {

width: 8px; height: 8px;

border-radius: 50%;

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

cursor: pointer;

transition: 0.3s;

}

.dot.active {

background: var(--primary);

box-shadow: 0 0 10px var(--primary);

transform: scale(1.5);

}

/* Mobile Adjustments */

@media (max-width: 768px) {

h1 { font-size: 2.5rem; }

.slide { padding: 30px; }

}

</style>

</head>

<body>

</video>

</div>

<div class="logo">SMARTCITY.IO</div>

</header>

<h1>Sürdürülebilir Enerji</h1>

<p>Yapay zeka kontrollü şebekelerle enerji tüketimini %40 optimize ediyoruz. Gelecek nesillere temiz bir nefes bırakın.</p>

<a href="#" class="btn">Keşfet</a>

</div>

</section>

<h1>Otonom Trafik</h1>

<p>Sıfır kaza, sıfır gecikme. Akıllı ulaşım ağımızla şehrin bir ucundan diğerine kesintisiz erişim sağlayın.</p>

<a href="#" class="btn">Sistemi İncele</a>

</div>

</section>

<h1>Veri Odaklı Yaşam</h1>

<p>Şehir her an sizi dinliyor. İhtiyaçlarınıza anında cevap veren proaktif kamu hizmetleriyle tanışın.</p>

<a href="#" class="btn">Bize Katılın</a>

</div>

</section>

</div>

</div>

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

const slides = document.querySelectorAll('.slide');

const dots = document.querySelectorAll('.dot');

let currentIndex = 0;

let startY = 0;

// Touch handling for iOS/Android

window.addEventListener('touchstart', e => {

startY = e.touches[0].clientY;

}, { passive: true });

window.addEventListener('touchend', e => {

let endY = e.changedTouches[0].clientY;

let diff = startY - endY;

if (Math.abs(diff) > 50) {

if (diff > 0 && currentIndex < slides.length - 1) {

goToSlide(currentIndex + 1);

} else if (diff < 0 && currentIndex > 0) {

goToSlide(currentIndex - 1);

}

}, { passive: true });

// Desktop Wheel Handling

window.addEventListener('wheel', e => {

if (e.deltaY > 0 && currentIndex < slides.length - 1) {

goToSlide(currentIndex + 1);

} else if (e.deltaY < 0 && currentIndex > 0) {

goToSlide(currentIndex - 1);

}

});

function goToSlide(index) {

currentIndex = index;

slider.style.transform = `translateX(-${index * 100}%)`;

// UI Update

slides.forEach(s => s.classList.remove('active'));

slides[index].classList.add('active');

dots.forEach(d => d.classList.remove('active'));

dots[index].classList.add('active');

}

// Dot click

dots.forEach((dot, i) => {

dot.addEventListener('click', () => goToSlide(i));

});

</script>

</body>

</html>

CSS

JS

Metehan

Recommended