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>

Cinematic Portfolio Website with Tailwind CSS & GSAP

Recommended

CSS Nostalgia Glitch Photo Animation

CSS Loading Animation with Background Image

CSS Animation Layers City Background

HTML

CSS

JS

Recommended

CSS Nostalgia Glitch Photo Animation

CSS Loading Animation with Background Image

CSS Animation Layers City Background

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS