JSFiddle - React, Tailwind, and code Playground

by Ali Uygur

HTML

<div class="hero-card" id="card">
  <h1 class="title">Hoş Geldiniz</h1>
  <p class="subtitle">Saf JavaScript ve CSS ile Sinematik Etki.</p>
  <button class="btn">Keşfet</button>
</div>

CSS

body { background: #1a1a2e; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; overflow: hidden; }
.hero-card { background: #16213e; color: white; padding: 40px; border-radius: 20px; text-align: center; box-shadow: 0 20px 40px rgba(0,0,0,0.3); }

/* Başlangıç durumları (Görünmez) */
.title, .subtitle, .btn { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }

/* Aktif durumlar (Görünür) */
.active .title, .active .subtitle, .active .btn { opacity: 1; transform: translateY(0); }

JavaScript

// Sayfa yüklendiğinde animasyonu tetikle
window.addEventListener('load', () => {
  const card = document.getElementById('card');
  
  // Küçük bir gecikme ile tetikleyerek tarayıcıya render süresi veriyoruz
  setTimeout(() => {
    card.classList.add('active');
  }, 1000);
});