Antrium A35D

Bir sonraki için en iyisini yap...

AOS.js Tam Örnek Sayfa

Whatsapp ile paylaş

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AOS.js Tam Örnek Sayfa</title>
  <!-- AOS CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" />
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      line-height: 1.6;
      background: #fafafa;
    }
    header {
      background: #333;
      color: #fff;
      padding: 2rem 0;
      text-align: center;
    }
    header h1 {
      margin: 0;
    }
    section {
      padding: 60px 20px;
      text-align: center;
      border-bottom: 1px solid #ddd;
    }
    .container {
      max-width: 1000px;
      margin: auto;
    }
    .box {
      background: #fff;
      padding: 20px;
      margin: 20px auto;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      max-width: 80%;
    }
    button {
      padding: 10px 20px;
      border: none;
      background: #333;
      color: #fff;
      cursor: pointer;
      border-radius: 5px;
      font-size: 1rem;
    }
    button:hover {
      background: #555;
    }
  </style>
</head>
<body>
  <header>
    <h1>AOS.js Demo Sayfası</h1>
    <p>Animasyonları ve fonksiyonları örnekleyelim!</p>
  </header>

  <section class="container">
    <h2 data-aos="fade-up">Fade Up Animasyon</h2>
    <p data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
      Bu metin, sayfa kaydırıldığında yavaşça yukarı doğru kayarak görünür.
    </p>
  </section>

  <section class="container">
    <h2 data-aos="fade-down">Fade Down Animasyon</h2>
    <div class="box" data-aos="fade-down" data-aos-delay="300" data-aos-duration="1200">
      Bu kutu, aşağıdan yukarıya doğru animasyonla görünür.
    </div>
  </section>

  <section class="container">
    <h2 data-aos="fade-right">Fade Right Animasyon</h2>
    <div class="box" data-aos="fade-right" data-aos-delay="100" data-aos-duration="800">
      Bu kutu sağa doğru kayarak ortaya çıkar.
    </div>
  </section>

  <section class="container">
    <h2 data-aos="fade-left">Fade Left Animasyon</h2>
    <div class="box" data-aos="fade-left" data-aos-delay="100" data-aos-duration="800">
      Bu kutu sola doğru kayarak görünür.
    </div>
  </section>

  <section class="container">
    <h2 data-aos="flip-left">Flip Left Animasyon</h2>
    <div class="box" data-aos="flip-left" data-aos-delay="150" data-aos-duration="900">
      Bu kutu sola doğru dönerek görünür.
    </div>
  </section>

  <section class="container">
    <h2 data-aos="flip-right">Flip Right Animasyon</h2>
    <div class="box" data-aos="flip-right" data-aos-delay="150" data-aos-duration="900">
      Bu kutu sağa doğru dönerek ortaya çıkar.
    </div>
  </section>

  <section class="container">
    <h2 data-aos="zoom-in">Zoom In Animasyon</h2>
    <div class="box" data-aos="zoom-in" data-aos-delay="200" data-aos-duration="1000">
      Bu kutu, yakınlaşarak görünür.
    </div>
  </section>

  <section class="container">
    <h2 data-aos="zoom-out">Zoom Out Animasyon</h2>
    <div class="box" data-aos="zoom-out" data-aos-delay="200" data-aos-duration="1000">
      Bu kutu, uzaklaşarak ortaya çıkar.
    </div>
  </section>

  <section class="container">
    <h2 data-aos="slide-up">Slide Up Animasyon</h2>
    <div class="box" data-aos="slide-up" data-aos-delay="100" data-aos-duration="700">
      Bu kutu aşağıdan yukarı kayarak görünür.
    </div>
  </section>

  <section class="container">
    <h2 data-aos="slide-down">Slide Down Animasyon</h2>
    <div class="box" data-aos="slide-down" data-aos-delay="100" data-aos-duration="700">
      Bu kutu yukarıdan aşağı kayarak görünür.
    </div>
  </section>

  <section class="container">
    <h2 data-aos="slide-right">Slide Right Animasyon</h2>
    <div class="box" data-aos="slide-right" data-aos-delay="100" data-aos-duration="700">
      Bu kutu soldan sağa doğru kayarak ortaya çıkar.
    </div>
  </section>

  <section class="container">
    <h2 data-aos="slide-left">Slide Left Animasyon</h2>
    <div class="box" data-aos="slide-left" data-aos-delay="100" data-aos-duration="700">
      Bu kutu sağdan sola doğru kayarak görünür.
    </div>
  </section>

  <section class="container">
    <h2 data-aos="fade-up" data-aos-anchor-placement="top-bottom">
      Anchor Placement Özelliği
    </h2>
    <p data-aos="fade-up" data-aos-delay="150" data-aos-duration="800">
      Bu metinde "data-aos-anchor-placement" kullanılarak animasyonun tetiklenme noktasını değiştirdik.
    </p>
  </section>

  <section class="container">
    <h2>AOS Yenileme (Refresh) İşlemi</h2>
    <p data-aos="fade-up" data-aos-delay="100" data-aos-duration="700">
      Aşağıdaki butona tıkladığınızda, AOS.refresh() fonksiyonu çalışarak animasyonları yeniden hesaplar.
    </p>
    <button id="refreshBtn">AOS Refresh</button>
  </section>

  <!-- AOS JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
  <script>
    // AOS'u global ayarlarla başlatıyoruz
    AOS.init({
      offset: 120,           // Animasyon tetikleme noktasından 120px uzaklıkta
      delay: 0,              // Varsayılan gecikme (ms)
      duration: 800,         // Animasyon süresi (ms)
      easing: 'ease',        // Easing ayarı
      once: false,           // false: her kaydırmada animasyonu tekrar çalıştır
      mirror: true,          // true: öğe viewport'tan çıktığında animasyon geri oynatılır
      anchorPlacement: 'top-bottom' // Tetkik noktasını tanımlar
    });

    // Refresh butonuna tıklanınca AOS.refresh() fonksiyonu çalıştırılır
    document.getElementById('refreshBtn').addEventListener('click', function() {
      AOS.refresh();
      alert("AOS yenilendi!");
    });
  </script>
</body>
</html>
 

29 Okunma | 10.02.2025 00:29
AOS jquery

YORUMLAR

Yorum Yaz
Hüseyin ÖZKAN Yazılım Uzmanı

C#,MVC,MSSQL,Windows Forms

Kategoriler
Son Eklenenler
En Çok Okunanlar