Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>WILD & RARE | Doğa Mirası</title>

<style>

:root {

--bg-color: #050505;

--text-main: #f0f0f0;

--text-muted: #a0a0a0;

--accent-gold: #c5a059;

--accent-danger: #e74c3c;

--accent-warning: #f39c12;

--ease-expo: cubic-bezier(0.19, 1, 0.22, 1);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

-webkit-tap-highlight-color: transparent;

}

body {

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

color: var(--text-main);

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

overflow: hidden;

height: 100vh;

width: 100vw;

}

/* --- Loading Screen --- */

#loader {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: #080808;

z-index: 9999;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

transition: transform 1.2s var(--ease-expo);

}

.loader-content {

text-align: center;

}

.loader-logo {

font-family: 'Cinzel', serif;

font-size: 2rem;

letter-spacing: 0.3em;

margin-bottom: 2rem;

opacity: 0;

animation: fadeUp 1s forwards 0.2s;

}

.loader-line-mask {

width: 200px;

height: 2px;

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

position: relative;

overflow: hidden;

margin: 0 auto;

}

.loader-line {

position: absolute;

left: 0;

top: 0;

height: 100%;

width: 0%;

background: var(--accent-gold);

transition: width 0.3s ease;

}

@keyframes fadeUp {

from { opacity: 0; transform: translateY(20px); }

to { opacity: 1; transform: translateY(0); }

}

/* --- WebGL & Background --- */

#canvas-container {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 0;

}

/* Karartma efekti (Vignette) - Yazıların okunması için */

.overlay-gradient {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: radial-gradient(circle at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%),

linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.6) 100%);

z-index: 1;

pointer-events: none;

}

/* Film Grain (Kumlanma) */

.film-grain {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none;

z-index: 2;

opacity: 0.07;

background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");

}

/* --- UI Elements --- */

#ui-layer {

position: relative;

z-index: 10;

height: 100%;

display: flex;

flex-direction: column;

justify-content: space-between;

padding: 2.5rem 4rem;

}

/* Header */

header {

display: flex;

justify-content: space-between;

align-items: center;

}

.logo {

font-family: 'Cinzel', serif;

font-size: 1.6rem;

font-weight: 700;

letter-spacing: 0.05em;

color: #fff;

text-decoration: none;

mix-blend-mode: exclusion; /* Arka planla kontrast oluşturur */

}

.logo span {

color: var(--accent-gold);

font-weight: 400;

}

nav {

display: flex;

align-items: center;

}

.nav-links {

display: flex;

gap: 3rem;

list-style: none;

}

.nav-links a {

color: #fff;

text-decoration: none;

font-size: 0.8rem;

text-transform: uppercase;

letter-spacing: 0.15em;

opacity: 0.8;

transition: opacity 0.3s ease, color 0.3s ease;

font-weight: 600;

}

.nav-links a:hover {

opacity: 1;

color: var(--accent-gold);

}

.btn-donate {

padding: 0.8rem 2rem;

border: 1px solid rgba(255,255,255,0.3);

border-radius: 2px;

color: #fff !important;

transition: all 0.3s ease;

}

.btn-donate:hover {

background: #fff;

color: #000 !important;

border-color: #fff;

}

/* Content Slider */

.content-wrapper {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 100%;

max-width: 1400px;

padding: 0 2rem;

text-align: center;

pointer-events: none;

}

.status-badge {

display: inline-flex;

align-items: center;

gap: 8px;

padding: 6px 16px;

border: 1px solid rgba(255,255,255,0.2);

backdrop-filter: blur(10px);

border-radius: 50px;

margin-bottom: 2rem;

text-transform: uppercase;

font-size: 0.75rem;

letter-spacing: 0.2em;

color: #fff;

}

.status-dot {

width: 8px;

height: 8px;

border-radius: 50%;

background-color: var(--accent-gold);

box-shadow: 0 0 10px var(--accent-gold);

}

.animal-title {

font-family: 'Cinzel', serif;

font-size: clamp(2.5rem, 8vw, 8rem);

line-height: 0.95;

font-weight: 400;

color: #fff;

margin-bottom: 2rem;

text-shadow: 0 20px 40px rgba(0,0,0,0.5);

overflow: hidden; /* For animation */

}

.animal-title span {

display: block; /* Animasyon için satır satır */

}

.animal-desc {

max-width: 600px;

margin: 0 auto;

font-size: 1.1rem;

line-height: 1.8;

color: rgba(255,255,255,0.9);

font-weight: 300;

text-shadow: 0 2px 10px rgba(0,0,0,0.8);

}

/* Controls */

.controls-area {

position: absolute;

bottom: 3rem;

right: 4rem;

display: flex;

align-items: center;

gap: 2rem;

z-index: 20;

}

.nav-arrow {

width: 60px;

height: 60px;

border: 1px solid rgba(255,255,255,0.2);

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

cursor: pointer;

transition: all 0.3s ease;

backdrop-filter: blur(4px);

}

.nav-arrow:hover {

background: #fff;

color: #000;

transform: scale(1.05);

}

.pagination {

position: absolute;

left: 4rem;

top: 50%;

transform: translateY(-50%);

display: flex;

flex-direction: column;

gap: 2rem;

z-index: 20;

}

.page-num {

font-family: 'Cinzel', serif;

font-size: 0.9rem;

color: rgba(255,255,255,0.4);

cursor: pointer;

position: relative;

transition: color 0.3s;

}

.page-num::before {

content: '';

position: absolute;

left: -30px;

top: 50%;

width: 20px;

height: 1px;

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

transition: width 0.3s;

}

.page-num.active {

color: #fff;

font-size: 1.2rem;

}

.page-num.active::before {

background: #fff;

width: 35px;

left: -45px;

}

/* Bottom Info */

.bottom-bar {

position: absolute;

bottom: 3rem;

left: 4rem;

font-size: 0.75rem;

letter-spacing: 0.1em;

color: rgba(255,255,255,0.5);

text-transform: uppercase;

}

/* Hamburger Menu (Mobile) */

.hamburger {

display: none;

flex-direction: column;

gap: 6px;

cursor: pointer;

z-index: 50;

}

.hamburger span {

width: 30px;

height: 2px;

background: #fff;

transition: 0.3s;

}

/* Mobile Responsive */

@media (max-width: 900px) {

#ui-layer {

padding: 1.5rem;

}

header {

padding-top: 1rem;

}

.hamburger {

display: flex;

}

.nav-links {

position: fixed;

top: 0;

right: 0;

width: 100%;

height: 100vh;

background: #000;

flex-direction: column;

justify-content: center;

align-items: center;

gap: 2rem;

transform: translateX(100%);

transition: transform 0.5s var(--ease-expo);

z-index: 40;

}

.nav-links.active {

transform: translateX(0);

}

.nav-links a {

font-size: 1.5rem;

}

.controls-area {

bottom: 2rem;

right: 1.5rem;

gap: 1rem;

}

.nav-arrow {

width: 50px;

height: 50px;

}

.pagination {

display: none; /* Mobilde dikey numaraları gizle */

}

.bottom-bar {

display: none;

}

.content-wrapper {

top: 45%; /* Biraz yukarı taşı */

padding: 0 1rem;

}

.animal-desc {

font-size: 1rem;

display: -webkit-box;

-webkit-line-clamp: 4; /* Mobilde çok uzun metinleri kısalt */

-webkit-box-orient: vertical;

overflow: hidden;

}

</style>

</head>

<body>

</div>

</div>

<nav>

<li><a href="#">Hayvanlar</a></li>

<li><a href="#">Koruma</a></li>

<li><a href="#">Yaşam Alanı</a></li>

<li><a href="#" class="btn-donate">Bağış Yap</a></li>

</ul>

</nav>

</header>

<span class="status-text">Yükleniyor...</span>

</div>

<h1 class="animal-title">Doğa Mirası</h1>

<p class="animal-desc">Dünyanın en nadir ve tehlike altındaki türlerini keşfedin.</p>

</div>

</div>

2025 Doğa Koruma Girişimi • Kâr Amacı Gütmez

</div>

</div>

</div>

// --- İÇERİK VERİSİ ---

// Yüksek kaliteli, konuyla tam alakalı görseller

const slides = [

{

title: "Sibirya<br>Kaplanı",

status: "Tehlike Altında",

statusColor: "#e74c3c", // Kırmızı

desc: "Dünyanın en büyük kedi türü. Rusya'nın uzak doğusundaki huş ormanlarında yaşayan bu görkemli avcılar, aşırı soğuklara ve derin karlara karşı mükemmel bir adaptasyon geliştirmiştir.",

// Karda yürüyen, görkemli bir kaplan

image: "https://images.unsplash.com/photo-1591824438708-ce405f36ba3d?q=80&w=2670&auto=format&fit=crop"

},

{

title: "Kutup<br>Ayısı",

status: "Hassas Tür",

statusColor: "#f39c12", // Turuncu

desc: "Arktik buzulların kralları. İklim değişikliği nedeniyle deniz buzullarının erimesi, bu güçlü yüzücülerin avlanma sahalarını ve geleceklerini tehdit ediyor.",

// Buz üzerinde yalnız bir kutup ayısı

image: "https://images.unsplash.com/photo-1589656966895-2f33e7653819?q=80&w=2574&auto=format&fit=crop"

},

{

title: "Amur<br>Leoparı",

status: "Kritik Tehlikede",

statusColor: "#c0392b", // Koyu Kırmızı

desc: "Dünyanın en nadir büyük kedisi. Vahşi doğada sadece 100 civarında birey kaldığı tahmin ediliyor. Eşsiz benekli kürkleri ve inanılmaz gizlenme yetenekleriyle bilinirler.",

// Ağaç dalında veya karlı ormanda leopar (Amur leoparına benzer görsel)

image: "https://images.unsplash.com/photo-1629814484394-1e0e5699411d?q=80&w=2670&auto=format&fit=crop"

},

{

title: "Asya<br>Aslanı",

status: "Tehlike Altında",

statusColor: "#e74c3c",

desc: "Bir zamanlar Ortadoğu'dan Hindistan'a kadar uzanan bir coğrafyada yaşarlardı. Bugün sadece Hindistan'daki Gir Ormanı'nda küçük bir popülasyon olarak hayatta kalma mücadelesi veriyorlar.",

// Kuru otların arasında asil duran bir aslan

image: "https://images.unsplash.com/photo-1614027164847-1b28cfe1df60?q=80&w=2574&auto=format&fit=crop"

}

];

// --- WEBGL SHADERS ---

// Görüntü bozunumu (Distortion) için vertex ve fragment shader

const vertexShader = `

varying vec2 vUv;

void main() {

vUv = uv;

gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

}

`;

const fragmentShader = `

uniform float time;

uniform float progress;

uniform sampler2D texture1;

uniform sampler2D texture2;

uniform sampler2D displacement;

varying vec2 vUv;

void main() {

vec2 uv = vUv;

// Displacement Texture'dan veri al

vec4 disp = texture2D(displacement, uv);

// Etki gücü

float force = progress * 0.5; // Biraz daha yumuşak geçiş

// Texture 1 (Eski Resim) çıkış hareketi

vec2 uv1 = vec2(uv.x - disp.r * force, uv.y);

// Texture 2 (Yeni Resim) giriş hareketi

vec2 uv2 = vec2(uv.x + (1.0 - disp.r) * force, uv.y);

vec4 t1 = texture2D(texture1, uv1);

vec4 t2 = texture2D(texture2, uv2);

// Mix

gl_FragColor = mix(t1, t2, progress);

}

`;

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

let scene, camera, renderer, plane, material;

let textures = [];

let currentSlide = 0;

let isAnimating = false;

// Su dalgası efekti için displacement map

const dispImage = "https://images.unsplash.com/photo-1518640467707-6811f4a6ab73?q=80&w=2670&auto=format&fit=crop";

// DOM Elemanları

const dom = {

title: document.querySelector('.animal-title'),

desc: document.querySelector('.animal-desc'),

statusText: document.querySelector('.status-text'),

statusDot: document.querySelector('.status-dot'),

pagination: document.getElementById('pagination-container'),

nextBtn: document.querySelector('.next'),

prevBtn: document.querySelector('.prev'),

loaderLine: document.querySelector('.loader-line'),

loader: document.getElementById('loader'),

hamburger: document.querySelector('.hamburger'),

navLinks: document.querySelector('.nav-links')

};

// --- BAŞLATMA ---

function init() {

// Three.js Kurulumu

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

scene = new THREE.Scene();

// Kamera ayarları

camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.001, 1000);

camera.position.z = 1;

renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

renderer.setSize(window.innerWidth, window.innerHeight);

renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

container.appendChild(renderer.domElement);

// Asset Yükleme Yöneticisi

const manager = new THREE.LoadingManager();

const loader = new THREE.TextureLoader(manager);

manager.onProgress = (url, loaded, total) => {

const percent = (loaded / total) * 100;

dom.loaderLine.style.width = percent + '%';

};

manager.onLoad = () => {

// Yükleme tamamlandığında

setupScene();

updateContent(0, false); // İlk içerik

createPagination();

// Loader'ı kaldır

gsap.to(dom.loader, {

y: '-100%',

duration: 1.5,

ease: "power4.inOut",

delay: 0.5

});

};

// Resimleri Yükle

const allImages = [...slides.map(s => s.image), dispImage];

allImages.forEach((url, i) => {

loader.load(url, (tex) => {

// Texture ayarları - "Cover" benzeri davranış için

tex.magFilter = THREE.LinearFilter;

tex.minFilter = THREE.LinearFilter;

if (i < slides.length) {

textures[i] = tex;

} else {

// Son resim displacement map

material.uniforms.displacement.value = tex;

}

});

// Plane Oluşturma (Ekranı kaplayan yüzey)

material = new THREE.ShaderMaterial({

uniforms: {

time: { value: 0 },

progress: { value: 0 },

texture1: { value: null },

texture2: { value: null },

displacement: { value: null }

},

vertexShader: vertexShader,

fragmentShader: fragmentShader,

side: THREE.DoubleSide

});

const geometry = new THREE.PlaneGeometry(1, 1, 1, 1);

plane = new THREE.Mesh(geometry, material);

scene.add(plane);

resize(); // İlk boyutlandırma

window.addEventListener('resize', resize);

addEventListeners();

}

function setupScene() {

material.uniforms.texture1.value = textures[0];

material.uniforms.texture2.value = textures[1];

}

// Ekran boyutuna göre Plane'i ölçekle (Background-size: cover mantığı)

function resize() {

renderer.setSize(window.innerWidth, window.innerHeight);

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

// Kameranın gördüğü alanın hesaplanması

const fov = camera.fov * (Math.PI / 180);

const height = 2 * Math.tan(fov / 2) * camera.position.z;

const width = height * camera.aspect;

// Plane'i bu alana genişlet

plane.scale.set(width, height, 1);

}

// --- GEÇİŞ FONKSİYONLARI ---

function goToSlide(index) {

if (isAnimating || index === currentSlide) return;

isAnimating = true;

const nextIndex = (index + slides.length) % slides.length;

// 1. Texture Hazırlığı

material.uniforms.texture2.value = textures[nextIndex];

material.uniforms.texture1.value = textures[currentSlide];

// 2. Metin Animasyonu (Çıkış)

gsap.to([dom.title, dom.desc, dom.statusText], {

y: -50,

opacity: 0,

duration: 0.6,

stagger: 0.1,

ease: "power2.in",

onComplete: () => {

// Metin Güncelleme

updateContent(nextIndex);

// Metin Animasyonu (Giriş)

gsap.fromTo([dom.title, dom.desc, dom.statusText],

{ y: 50, opacity: 0 },

{ y: 0, opacity: 1, duration: 1, stagger: 0.1, ease: "power2.out" }

);

}

});

// 3. WebGL Animasyonu (Shader Progress)

gsap.fromTo(material.uniforms.progress,

{ value: 0 },

{

value: 1,

duration: 1.8,

ease: "power2.inOut",

onComplete: () => {

material.uniforms.texture1.value = textures[nextIndex];

material.uniforms.progress.value = 0;

currentSlide = nextIndex;

isAnimating = false;

updatePaginationUI();

}

);

}

function updateContent(index) {

const s = slides[index];

dom.title.innerHTML = s.title; // HTML olarak ekliyoruz ki <br> çalışsın

dom.desc.textContent = s.desc;

dom.statusText.textContent = s.status;

dom.statusDot.style.backgroundColor = s.statusColor;

dom.statusDot.style.boxShadow = `0 0 10px ${s.statusColor}`;

}

function createPagination() {

dom.pagination.innerHTML = '';

slides.forEach((_, i) => {

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

el.classList.add('page-num');

el.textContent = `0${i + 1}`;

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

if (i === 0) el.classList.add('active');

dom.pagination.appendChild(el);

});

}

function updatePaginationUI() {

document.querySelectorAll('.page-num').forEach((el, i) => {

if (i === currentSlide) el.classList.add('active');

else el.classList.remove('active');

});

}

function addEventListeners() {

dom.nextBtn.addEventListener('click', () => goToSlide(currentSlide + 1));

dom.prevBtn.addEventListener('click', () => goToSlide(currentSlide - 1));

// Klavye

window.addEventListener('keydown', (e) => {

if (e.key === 'ArrowRight') goToSlide(currentSlide + 1);

if (e.key === 'ArrowLeft') goToSlide(currentSlide - 1);

});

// Mobil Menü

dom.hamburger.addEventListener('click', () => {

dom.navLinks.classList.toggle('active');

// Hamburger animasyonu (basit dönüşüm)

const spans = dom.hamburger.querySelectorAll('span');

if (dom.navLinks.classList.contains('active')) {

gsap.to(spans[0], { rotate: 45, y: 8 });

gsap.to(spans[1], { opacity: 0 });

gsap.to(spans[2], { rotate: -45, y: -8 });

} else {

gsap.to(spans, { rotate: 0, y: 0, opacity: 1 });

}

});

// Swipe Desteği (Basit)

let touchStartX = 0;

window.addEventListener('touchstart', e => touchStartX = e.changedTouches[0].screenX);

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

const touchEndX = e.changedTouches[0].screenX;

if (touchStartX - touchEndX > 50) goToSlide(currentSlide + 1);

if (touchEndX - touchStartX > 50) goToSlide(currentSlide - 1);

});

}

// Loop

function animate() {

requestAnimationFrame(animate);

// Zaman değişkenini güncelle (Eğer shader'da dalgalanma istersek)

// material.uniforms.time.value += 0.05;

renderer.render(scene, camera);

}

// Başlat

init();

animate();

</script>

</body>

</html>

Metehan

A Code by Metehan

HTML

CSS

JS

A Code by Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS