diff options
author | GeonilJang <52693107+takeaways@users.noreply.github.com> | 2021-07-19 12:57:12 +0900 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-07-19 12:57:12 +0900 |
commit | 6a05e0a63c48c99515e7ff7be901f1104bae317c (patch) | |
tree | 9bb64c3ea562aca2897c341116072a1efb2e1379 /files | |
parent | 9d6a33d83c1fa03544e62d152217f7d53ebb5ea8 (diff) | |
download | translated-content-6a05e0a63c48c99515e7ff7be901f1104bae317c.tar.gz translated-content-6a05e0a63c48c99515e7ff7be901f1104bae317c.tar.bz2 translated-content-6a05e0a63c48c99515e7ff7be901f1104bae317c.zip |
[ko]Update Intersectionobserver example code. (#1532)
Diffstat (limited to 'files')
-rw-r--r-- | files/ko/web/api/intersectionobserver/observe/index.html | 24 |
1 files changed, 23 insertions, 1 deletions
diff --git a/files/ko/web/api/intersectionobserver/observe/index.html b/files/ko/web/api/intersectionobserver/observe/index.html index fdccd48325..5c10623363 100644 --- a/files/ko/web/api/intersectionobserver/observe/index.html +++ b/files/ko/web/api/intersectionobserver/observe/index.html @@ -31,7 +31,29 @@ translation_of: Web/API/IntersectionObserver/observe <h2 id="Examples">Examples</h2> -<p><<<...>>></p> +<p>IntersectionObserver 를 등록한다</p> + +<pre> +// IntersectionObserver 를 등록한다. +const io = new IntersectionObserver(entries => { + entries.forEach(entry => { + // 관찰 대상이 viewport 안에 들어온 경우 'tada' 클래스를 추가 + if (entry.intersectionRatio > 0) { + entry.target.classList.add('tada'); + } + // 그 외의 경우 'tada' 클래스 제거 + else { + entry.target.classList.remove('tada'); + } + }) +}) + +// 관찰할 대상을 선언하고, 해당 속성을 관찰시킨다. +const boxElList = document.querySelectorAll('.box'); +boxElList.forEach((el) => { + io.observe(el); +}) +</pre> <h2 id="Specifications">Specifications</h2> |