[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!