"Kutay Utku'in Projeleri Ve Notları"

Web sitelerinde kullanıcı deneyimini artırmak için görsel geçişler ve animasyonlar oldukça önemlidir. Sayfa aşağı kaydırıldıkça içeriklerin yavaşça yukarıdan belirerek görünmesi, hem profesyonel bir hava katar hem de kullanıcıyı içerikte tutar. Bu tür animasyonlar özellikle:

• Blog içeriklerinde
• Ürün tanıtım sayfalarında
• Hizmet açıklamalarında
• Referans ya da portfolyo sunumlarında

güçlü bir etki bırakır.

Bu yazıda, sadece HTML, CSS ve saf JavaScript kullanarak scroll (kaydırma) ile yukarıdan belirerek görünen kutular nasıl yapılır, adım adım öğreneceğiz.

🧩 Gerekli Kodlar ve Yapı

1. CSS Kodları (style.css)

İlk olarak, kutuların animasyonla görünmesini sağlayacak CSS kodlarını style.css dosyanıza ekleyin:

.box {
  width: 300px;
  margin: 100px auto;
  padding: 40px;
  background: #2196f3;
  color: white;
  border-radius: 10px;
  text-align: center;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease-out;
}

.appeared {
  opacity: 1;
  transform: translateY(0);
}

Bu CSS sınıfları sayesinde her .box elemanı başlangıçta görünmez olacak ve sayfa kaydırıldıkça yukarıdan süzülerek çıkacak.

2. HTML Kodları (index.php içinde uygun yere)

İçeriğin görünmesini istediğiniz yere aşağıdaki gibi kutular ekleyin:

<div class="box">1. Konu: Web Tasarım</div>
<div class="box">2. Konu: SEO İpuçları</div>
<div class="box">3. Konu: JavaScript Öğren</div>

Her kutuya class="box" eklediğinizden emin olun. JavaScript bu sınıfı dinleyecek.

3. JavaScript Kodu (Sayfanın sonunda veya footer.php içinde)

Sayfanın en altına, tercihen </body> etiketinden hemen önce şu kodu ekleyin:

<script>
  const kutular = document.querySelectorAll('.box');

  const gozetleyici = new IntersectionObserver((girisler) => {
    girisler.forEach(giris => {
      if (giris.isIntersecting) {
        giris.target.classList.add('appeared');
      }
    });
  }, { threshold: 0.5 });

  kutular.forEach(kutu => gozetleyici.observe(kutu));
</script>

🎯 Açıklama:

• .box sınıfına sahip tüm elemanlar gözlemlenir.
• Sayfa kaydırıldıkça, bir kutu ekranın %50’sine geldiğinde .appeared sınıfı eklenir.
• Bu sınıf, kutunun yavaşça yukarıdan belirerek görünmesini sağlar.

📱 Responsive Uyum ve Geliştirme Fikirleri

Bu yapıyı mobil uyumlu hale getirmek için media query’ler ekleyebilirsiniz. Ayrıca animasyon yönünü değiştirmek, farklı animasyon türleri (fade-in, scale, rotate) uygulamak da mümkündür.

Örnek:

@media (max-width: 600px) {
  .box {
    width: 90%;
  }
}

🎁 Bonus: WordPress Kullanıcıları İçin İpucu

WordPress kullanıyorsanız:

• CSS kodlarını style.css dosyanıza ekleyin (/wp-content/themes/temanız/style.css)
• JavaScript kodunu footer.php içinde ekleyin veya ayrı bir main.js dosyasına yazıp wp_enqueue_script ile çağırın.

✍️ Sonuç – Neler Kazandık?

Bu yazıda sadece HTML, CSS ve JavaScript kullanarak:

• Scroll sırasında görünen içerikler oluşturduk.
• Kullanıcı deneyimini artıran basit ama etkili bir animasyon hazırladık.
• Projelerimizde profesyonel bir dokunuş sağladık.

Bu yöntemi ister kişisel bloglarında, ister kurumsal web sitelerinde rahatlıkla kullanabilir, kullanıcıların dikkatini içeriklerine daha iyi çekebilirsin.

📌 Yazıyı beğendiysen paylaşmayı unutma!

👉 Takipte kal, daha fazlası geliyor.