Webleb - UI Elements - Cinematic Portfolio Website with Tailwind CSS & GSAP

HTML

<!DOCTYPE html>

<head>

<title>LUMINA | Sinematik Portfolyo</title>

<style>

/* Temel Ayarlar */

body {

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

overflow: hidden; /* Sayfa kaydırmasını engelle, slider kullanıyoruz */

}

h1, h2, h3, .brand-font {

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

}

/* Scrollbar Gizleme */

.scrollbar-hide::-webkit-scrollbar {

display: none;

}

.scrollbar-hide {

-ms-overflow-style: none;

scrollbar-width: none;

}

/* Resim Blend Modları */

.blend-screen {

mix-blend-mode: screen;

}

.blend-diff {

mix-blend-mode: difference;

}

/* Özel İmleç (İsteğe bağlı) */

.cursor-grab { cursor: grab; }

.cursor-grabbing { cursor: grabbing; }

</style>

// Tailwind Konfigürasyonu (Tema renkleri vb.)

tailwind.config = {

darkMode: 'class',

theme: {

extend: {

colors: {

dark: '#0a0a0a',

light: '#f4f4f5'

}

</script>

</head>

LUMINA<span class="text-gray-500">.STUDIO</span>

</h1>

</div>

</button>

</div>

<li class="overflow-hidden"><a href="#" class="text-5xl md:text-7xl font-bold tracking-tighter hover:ml-4 transition-all duration-300 block">Portfolyo</a></li>

<li class="overflow-hidden"><a href="#" class="text-5xl md:text-7xl font-bold tracking-tighter hover:ml-4 transition-all duration-300 block">Günlük</a></li>

<li class="overflow-hidden"><a href="#" class="text-5xl md:text-7xl font-bold tracking-tighter hover:ml-4 transition-all duration-300 block">Hizmetler</a></li>

<li class="overflow-hidden"><a href="#" class="text-5xl md:text-7xl font-bold tracking-tighter hover:ml-4 transition-all duration-300 block">Ajans</a></li>

<li class="overflow-hidden"><a href="#" class="text-5xl md:text-7xl font-bold tracking-tighter hover:ml-4 transition-all duration-300 block">İletişim</a></li>

</ul>

<div>

<p>İstanbul</p>

</div>

<div>

<p>merhaba@lumina.studio</p>

</div>

<h2 class="text-xl tracking-widest uppercase font-bold text-white">ARŞİV</h2>

</button>

</div>

</div>

KEŞFETMEK İÇİN SÜRÜKLE

</div>

</div>

<span class="font-bold tracking-widest text-sm uppercase">Lumina</span>

</div>

</button>

<span class="hidden md:inline">Galeri</span>

</button>

</button>

</div>

</header>

</div>

</div>

</div>

</button>

</button>

</div>

</button>

KOLEKSİYONU GÖR

</span>

</div>

</main>

// --- VERİ ---

const slidesData = [

{

id: 1,

title: "KENTSEL\nYANKILAR",

category: "Mimari",

year: "2024",

img: "https://images.unsplash.com/photo-1480796927426-f609979314bd?q=80&w=2600&auto=format&fit=crop",

desc: "Beton devlerin sessizliği."

},

{

id: 2,

title: "KUZEY\nSESSİZLİĞİ",

category: "Manzara",

year: "2023",

img: "https://images.unsplash.com/photo-1476610182048-b716b8518aae?q=80&w=2600&auto=format&fit=crop",

desc: "Dağın sisle buluştuğu yer."

},

{

id: 3,

title: "KADİFE\nGÖLGELER",

category: "Portre",

year: "2025",

img: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=2600&auto=format&fit=crop",

desc: "Boşlukta yakalanan duygu."

},

{

id: 4,

title: "NEON\nSÜRÜKLENİŞ",

category: "Sokak",

year: "2024",

img: "https://images.unsplash.com/photo-1555685812-4b943f3e9943?q=80&w=2600&auto=format&fit=crop",

desc: "Tokyo'da cyberpunk gerçeklikleri."

}

];

const galleryImages = [

"https://images.unsplash.com/photo-1493246507139-91e8fad9978e?w=800&q=80",

"https://images.unsplash.com/photo-1518005052351-e4b395d3a31a?w=800&q=80",

"https://images.unsplash.com/photo-1502082553048-f009c37129b9?w=800&q=80",

"https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800&q=80",

"https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?w=800&q=80",

"https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800&q=80",

];

// --- DEĞİŞKENLER ---

let currentIndex = 0;

let isAnimating = false;

let isDarkMode = true;

const totalSlides = slidesData.length;

let autoPlayInterval;

// DOM Elemanları

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

const progressBar = document.getElementById('progress-bar');

const currentNumEl = document.getElementById('slide-current');

const totalNumEl = document.getElementById('slide-total');

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

const themeIcon = document.getElementById('theme-icon');

const navOverlay = document.getElementById('nav-overlay');

const navList = document.getElementById('nav-list');

const galleryOverlay = document.getElementById('gallery-overlay');

const galleryTrack = document.getElementById('gallery-track');

// --- BAŞLATMA ---

document.addEventListener('DOMContentLoaded', () => {

initSlider();

initGallery();

runPreloader();

updateControls();

startAutoPlay();

});

// --- PRELOADER ---

function runPreloader() {

const tl = gsap.timeline({

onComplete: () => {

document.getElementById('preloader').style.display = 'none';

document.getElementById('main-content').style.opacity = '1';

animateSlideContent(0); // İlk slaytı canlandır

}

});

tl.to("#preloader-text", { opacity: 1, duration: 1, y: 0, ease: "power3.out" })

.to("#preloader-text", { opacity: 0, y: -50, duration: 0.8, delay: 0.5, ease: "power3.in" })

.to("#preloader", { height: 0, duration: 1.2, ease: "expo.inOut" });

}

// --- SLIDER MANTIĞI ---

function initSlider() {

totalNumEl.innerText = `/ 0${totalSlides}`;

// Slide'ları HTML'e ekle

slidesData.forEach((slide, index) => {

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

slideEl.className = `absolute inset-0 w-full h-full slide-item ${index === 0 ? 'z-10' : 'z-0 opacity-0'}`;

slideEl.id = `slide-${index}`;

slideEl.innerHTML = `

<span class="px-3 py-1 text-xs font-bold tracking-widest uppercase bg-white text-black rounded-full">${slide.category}</span>

<span class="text-white/60 text-xs tracking-widest font-mono">${slide.year}</span>

</div>

<h1 class="text-6xl md:text-9xl font-bold text-white tracking-tighter leading-[0.9] mb-8 whitespace-pre-line blend-screen">${slide.title}</h1>

<p class="text-white/80 max-w-md text-lg md:text-xl font-light leading-relaxed border-l-2 border-white/30 pl-6 backdrop-blur-sm">${slide.desc}</p>

</div>

`;

container.appendChild(slideEl);

});

}

function changeSlide(direction) {

if (isAnimating) return;

isAnimating = true;

const prevIndex = currentIndex;

if (direction === 'next') {

currentIndex = (currentIndex + 1) % totalSlides;

} else {

currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;

}

// Çıkış Animasyonu

gsap.to(`#slide-${prevIndex}`, {

opacity: 0,

zIndex: 0,

duration: 1,

ease: "power2.inOut"

});

gsap.to(`#slide-${prevIndex} .slide-text`, {

opacity: 0,

y: -50,

duration: 0.5

});

// Giriş Animasyonu

const nextSlide = document.getElementById(`slide-${currentIndex}`);

nextSlide.style.zIndex = 10;

gsap.fromTo(nextSlide,

{ opacity: 0 },

{ opacity: 1, duration: 1, ease: "power2.inOut" }

);

// Resim Efekti

gsap.fromTo(`#slide-${currentIndex} .slide-img`,

{ scale: 1.2, filter: 'blur(10px)' },

{ scale: 1, filter: 'blur(0px)', duration: 1.5, ease: "power2.out" }

);

// Metin Efekti

animateSlideContent(currentIndex);

// Kontrolleri Güncelle

updateControls();

// Animasyon Kilidi

setTimeout(() => { isAnimating = false; }, 1200);

// Otomatik oynatmayı sıfırla

resetAutoPlay();

}

function animateSlideContent(index) {

gsap.fromTo(`#slide-${index} .slide-text`,

{ opacity: 0, y: 50 },

{ opacity: 1, y: 0, duration: 1, delay: 0.3, ease: "power3.out" }

);

}

function updateControls() {

currentNumEl.innerText = `0${currentIndex + 1}`;

const progress = ((currentIndex + 1) / totalSlides) * 100;

progressBar.style.width = `${progress}%`;

}

function startAutoPlay() {

autoPlayInterval = setInterval(() => changeSlide('next'), 8000);

}

function resetAutoPlay() {

clearInterval(autoPlayInterval);

startAutoPlay();

}

// --- EVENT LISTENERS (Buttons) ---

document.getElementById('next-btn').addEventListener('click', () => changeSlide('next'));

document.getElementById('prev-btn').addEventListener('click', () => changeSlide('prev'));

// --- TEMA YÖNETİMİ ---

themeBtn.addEventListener('click', () => {

isDarkMode = !isDarkMode;

if (isDarkMode) {

document.body.classList.add('bg-black', 'text-white');

document.body.classList.remove('bg-gray-100', 'text-black');

navOverlay.classList.add('bg-black/90', 'text-white');

navOverlay.classList.remove('bg-white/90', 'text-black');

galleryOverlay.classList.add('bg-black/95');

galleryOverlay.classList.remove('bg-white/95');

themeIcon.classList.replace('ph-moon', 'ph-sun');

document.querySelector('#gallery-overlay h2').classList.replace('text-black', 'text-white');

} else {

document.body.classList.add('bg-gray-100', 'text-black');

document.body.classList.remove('bg-black', 'text-white');

navOverlay.classList.add('bg-white/90', 'text-black');

navOverlay.classList.remove('bg-black/90', 'text-white');

galleryOverlay.classList.add('bg-white/95');

galleryOverlay.classList.remove('bg-black/95');

themeIcon.classList.replace('ph-sun', 'ph-moon');

document.querySelector('#gallery-overlay h2').classList.replace('text-white', 'text-black');

}

});

// --- NAVIGASYON MENÜSÜ ---

document.getElementById('open-nav').addEventListener('click', () => {

gsap.to(navOverlay, { x: '0%', duration: 0.8, ease: 'power3.out' });

gsap.fromTo("#nav-list li",

{ x: 50, opacity: 0 },

{ x: 0, opacity: 1, duration: 0.5, stagger: 0.1, delay: 0.3 }

);

});

document.getElementById('close-nav').addEventListener('click', () => {

gsap.to(navOverlay, { x: '100%', duration: 0.8, ease: 'power3.inOut' });

});

// --- GALERİ VE DRAG MANTIĞI ---

function initGallery() {

// Görselleri Ekle

galleryImages.forEach((src, i) => {

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

div.className = "relative group shrink-0 w-[400px] h-[500px] overflow-hidden rounded-lg";

div.innerHTML = `

<p class="text-xl font-bold">Yakalanan An</p>

</div>

`;

galleryTrack.appendChild(div);

});

// Drag Mantığı

let isDown = false;

let startX;

let scrollLeft;

galleryTrack.addEventListener('mousedown', (e) => {

isDown = true;

galleryTrack.classList.add('active');

galleryTrack.classList.replace('cursor-grab', 'cursor-grabbing');

startX = e.pageX - galleryTrack.offsetLeft;

scrollLeft = galleryTrack.scrollLeft;

});

galleryTrack.addEventListener('mouseleave', () => {

isDown = false;

galleryTrack.classList.replace('cursor-grabbing', 'cursor-grab');

});

galleryTrack.addEventListener('mouseup', () => {

isDown = false;

galleryTrack.classList.replace('cursor-grabbing', 'cursor-grab');

});

galleryTrack.addEventListener('mousemove', (e) => {

if (!isDown) return;

e.preventDefault();

const x = e.pageX - galleryTrack.offsetLeft;

const walk = (x - startX) * 2; // Kaydırma hızı

galleryTrack.scrollLeft = scrollLeft - walk;

});

}

const openGalleryBtn = document.getElementById('open-gallery');

const closeGalleryBtn = document.getElementById('close-gallery');

openGalleryBtn.addEventListener('click', () => {

galleryOverlay.style.pointerEvents = "auto";

gsap.fromTo(galleryOverlay,

{ opacity: 0, scale: 0.95 },

{ opacity: 1, scale: 1, duration: 0.5, ease: 'power2.out' }

);

});

closeGalleryBtn.addEventListener('click', () => {

galleryOverlay.style.pointerEvents = "none";

gsap.to(galleryOverlay, { opacity: 0, scale: 0.95, duration: 0.5, ease: 'power2.in' });

});

</script>

</body>

</html>

CSS

JS

Cinematic Portfolio Website with Tailwind CSS & GSAP

Recommended