https://saii.kr/assets/controllers/landing_reveal_controller-ac2bc61d.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static targets = [ "item" ]
5
6  connect() {
7    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches
8
9    if (reduceMotion || !("IntersectionObserver" in window)) {
10      this.revealAll()
11      return
12    }
13
14    this.observer = new IntersectionObserver(
15      this.handleIntersections.bind(this),
16      { rootMargin: "0px 0px -8% 0px", threshold: 0.12 }
17    )
18
19    this.frame = window.requestAnimationFrame(() => this.prepareItems())
20  }
21
22  disconnect() {
23    if (this.frame) window.cancelAnimationFrame(this.frame)
24    this.observer?.disconnect()
25  }
26
27  prepareItems() {
28    const initialRevealBoundary = window.innerHeight * 0.92
29
30    this.itemTargets.forEach((item) => {
31      if (item.getBoundingClientRect().top <= initialRevealBoundary) {
32        item.classList.add("is-visible")
33        return
34      }
35
36      item.classList.add("is-reveal-pending")
37      this.observer.observe(item)
38    })
39  }
40
41  handleIntersections(entries) {
42    entries.forEach((entry) => {
43      if (!entry.isIntersecting) return
44
45      entry.target.classList.add("is-visible")
46      this.observer.unobserve(entry.target)
47    })
48  }
49
50  revealAll() {
51    this.itemTargets.forEach((item) => {
52      item.classList.remove("is-reveal-pending")
53      item.classList.add("is-visible")
54    })
55  }
56}