[Terjemahan] Menganalisis Animasi Laman Web Apple (Penyegerakan berguling)

Pautan Artikel Asal

---

Tapak web rasmi Apple menggunakan animasi berasaskan skrol yang lancar untuk menyerlahkan kandungannya. Dalam siaran ini, kami akan menganalisis dan meniru animasi yang serupa untuk memahami pelaksanaannya.

---

? Laman Web Apple Asal (Video)

---

? Pelaksanaan Dihasilkan Semula

1. Tatal Penyegerakan

• Keadaan animasi dikira dalam masa nyata berdasarkan kedudukan tatal (scrollY).

2. Animasi Dwi Arah

• Apabila menatal ke bawah: Teks bergerak ke atas dan pudar, sementara video mengecil.
• Apabila menatal ke atas: Teks bergerak ke bawah dan muncul semula, semasa video meningkat.

3. Penggunaan Harta CSS

• Gunakan transformasi: terjemahY dan nilai skala berkadar dengan kedudukan tatal.
• Animasi lancar dipastikan menggunakan requestAnimationFrame.

---

? Struktur HTML

Struktur HTML terdiri daripada reka letak ringkas dengan teks dan video latar belakang.

---

? Pelaksanaan Dihasilkan Semula

Sediakan CSS untuk mendayakan animasi lancar berdasarkan kedudukan tatal.

/* Text Section */
.text-section {
  position: absolute;
  top: 20%;
  width: 100%;
  text-align: center;
  color: white;
  z-index: 2;
}

.video-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.background-video {
  width: 100vw;
  height: auto;
}

---

? JavaScript (Animasi Berasaskan Tatal)

Kira keadaan teks dan video berdasarkan kedudukan tatal dan kemas kini gayanya dalam masa nyata.

const textSection = document.querySelector(".text-section");
const videoSection = document.querySelector(".video-section");

function handleScroll() {
  const scrollY = window.scrollY;
  const windowHeight = window.innerHeight;

  const textOpacity = Math.max(0, 1 - scrollY / (windowHeight / 2));
  const textTranslateY = Math.min(scrollY / 2, 100);

  textSection.style.transform = `translateY(-${textTranslateY}px)`;
  textSection.style.opacity = textOpacity;

  const videoScale = Math.max(0.5, 1 - scrollY / (windowHeight * 2));
  videoSection.style.transform = `scale(${videoScale})`;
}

window.addEventListener("scroll", () => {
  requestAnimationFrame(handleScroll);
});

---

?️ Pecahan Operasi Utama

?️ Penjelasan Fungsi Utama

1. Pengiraan berasaskan tatal

• textOpacity: Laraskan kelegapan teks untuk beransur-ansur pudar berdasarkan kedudukan tatal.

• textTranslateY: Mengira sejauh mana teks bergerak ke atas mengikut kadar kemajuan tatal.

• Skala video: Laraskan penskalaan video untuk mengecut secara berkadar dengan kedudukan tatal.

1. permintaanAnimationFrame

• Fungsi tak segerak yang meningkatkan prestasi animasi dengan memanfaatkan gelung pemaparan yang dioptimumkan penyemak imbas untuk operasi yang lancar.

1. Animasi Dua Arah

• Menatal ke Bawah: Teks bergerak ke atas dan pudar, manakala video mengecil.

• Menatal Ke Atas: Teks bergerak ke bawah dan muncul semula, manakala video meningkat.

Atas ialah kandungan terperinci [Terjemahan] Menganalisis Animasi Laman Web Apple (Penyegerakan berguling). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!