Latihan 1: Intersection Observer — Web Animation

Latihan 1 dari materi Intersection Observer di Web Animation — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Lengkapi tiga function kecil di balik animasi kartu yang muncul saat di-scroll.

  1. createObserverConfig(threshold, rootMargin) mengembalikan object option IntersectionObserver dengan urutan kunci root, threshold, rootMargin: root selalu null (layar), dua lainnya dari argumen.
  2. getAnimationClass(direction) mengembalikan nama kelas menurut arah gerak: "up" jadi "animate-from-bottom", "down" jadi "animate-from-top", "left" jadi "animate-from-right", "right" jadi "animate-from-left", dan arah lain apa pun jadi "animate-fade".
  3. createStaggerDelays(count, baseDelay) mengembalikan array berisi count angka: elemen ke-i (mulai dari 0) mendapat i * baseDelay.

Enam console.log di kode awal biarkan saja. Yang dinilai, baris console-nya harus persis:

  1. {"root":null,"threshold":0.1,"rootMargin":"0px 0px -50px 0px"}
  2. animate-from-bottom
  3. animate-from-right
  4. animate-fade
  5. 0,100,200,300
  6. 0,150,300

Nilai kembaliannya juga dinilai langsung: getAnimationClass("down") + "|" + getAnimationClass("right") harus "animate-from-top|animate-from-left", createStaggerDelays(0, 100).length harus 0, dan createObserverConfig(0.75, "5px").threshold harus 0.75.

Hint