https://www.tokyodome-hotels.co.jp/assets/hotel/scripts/modules/topAnimaiton.js

1document.addEventListener('DOMContentLoaded', () => {
2    /**
3     * .js-fade-itemをもつ要素が画面に入ったらクラスを付与する
4     */
5    const items = document.querySelectorAll('.js-fade-item');
6    if (!items.length)
7        return;
8    const observer = new IntersectionObserver((entries) => {
9        entries.forEach((entry) => {
10            if (entry.isIntersecting) {
11                entry.target.classList.add('is-fade-in');
12                observer.unobserve(entry.target); // 一回で終了
13            }
14        });
15    }, {
16        root: null, // viewport
17        threshold: 0.4, // ちょい見えたら
18    });
19    items.forEach((item) => {
20        observer.observe(item);
21    });
22});
23document.addEventListener('DOMContentLoaded', () => {
24    /**
25     * .js-fade-textをもつ要素が画面に入ったらクラスを付与する
26     */
27    const items = document.querySelectorAll('.js-fade-text');
28    if (!items.length)
29        return;
30    const observer = new IntersectionObserver((entries) => {
31        entries.forEach((entry) => {
32            if (entry.isIntersecting) {
33                setTimeout(() => {
34                    entry.target.classList.add('is-fade-in');
35                }, 200);
36                observer.unobserve(entry.target); // 一回で終了
37            }
38        });
39    }, {
40        root: null,
41        threshold: 0,
42    });
43    items.forEach((item) => {
44        observer.observe(item);
45    });
46});
47document.addEventListener('DOMContentLoaded', () => {
48    /**
49     * .js-fade-textをもつ要素が画面に入ったらクラスを付与する
50     */
51    const items = document.querySelectorAll('.js-fade-panelList');
52    if (!items.length)
53        return;
54    const observer = new IntersectionObserver((entries) => {
55        entries.forEach((entry) => {
56            if (entry.isIntersecting) {
57                entry.target.classList.add('is-fade-in');
58                observer.unobserve(entry.target); // 一回で終了
59            }
60        });
61    }, {
62        root: null, // viewport
63        threshold: 0.5, // ちょい見えたら
64    });
65    items.forEach((item) => {
66        const listItem = item.querySelectorAll('.fn-fade-item');
67        listItem.forEach((item) => {
68            observer.observe(item);
69        });
70    });
71});
72document.addEventListener('DOMContentLoaded', () => {
73    /**
74     * .js-fade-leadをもつ要素が画面に入ったらクラスを付与する
75     */
76    const items = document.querySelectorAll('.js-fade-lead');
77    if (!items.length)
78        return;
79    const observer = new IntersectionObserver((entries) => {
80        entries.forEach((entry) => {
81            if (entry.isIntersecting) {
82                entry.target.classList.add('is-fade-in');
83                observer.unobserve(entry.target); // 一回で終了
84            }
85        });
86    }, {
87        root: null, // viewport
88        threshold: 0.5, // ちょい見えたら
89    });
90    items.forEach((item) => {
91        const listItem = item.querySelectorAll('.fn-fade-item');
92        listItem.forEach((item) => {
93            observer.observe(item);
94        });
95    });
96});
97document.addEventListener('DOMContentLoaded', () => {
98    /**
99     * .js-intersection-contentをもつ要素が画面に入ったらクラスを付与する
100     */
101    const items = document.querySelectorAll('.js-intersection-content');
102    if (!items.length)
103        return;
104    const observer = new IntersectionObserver((entries) => {
105        entries.forEach((entry) => {
106            if (entry.isIntersecting) {
107                entry.target.classList.add('is-visible');
108            }
109            else {
110                entry.target.classList.remove('is-visible');
111            }
112        });
113    }, {
114        root: null,
115        threshold: 0,
116    });
117    items.forEach((item) => {
118        observer.observe(item);
119    });
120});
121export {};