Created
November 22, 2022 18:38
-
-
Save farid-mkh/a8436886da7bc2f532b8ac6cacfcedbd to your computer and use it in GitHub Desktop.
An Example shows how to use Intersection Observer API
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Intersection Observer API</title> | |
| <style> | |
| body { | |
| background-color: #2b2a2a; | |
| color: white; | |
| } | |
| .box { | |
| display: grid; | |
| justify-content: center; | |
| } | |
| @keyframes wipe-enter { | |
| 0% { | |
| opacity: 1; | |
| transform: scale(0, .025); | |
| } | |
| 50% { | |
| opacity: 1; | |
| transform: scale(1, .025); | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| @media (prefers-reduced-motion: no-preference) { | |
| .square-animation { | |
| animation: wipe-enter 1s forwards; | |
| } | |
| } | |
| .square { | |
| opacity: 0; | |
| margin-top: 200vh; | |
| margin-bottom: 50vh; | |
| width: 200px; | |
| height: 200px; | |
| background: orange; | |
| border-radius: 10px; | |
| } | |
| .scroll { | |
| position: fixed; | |
| bottom: 3em; | |
| left: 0; | |
| right: 0; | |
| text-align: center; | |
| font-size: 40px; | |
| } | |
| .data { | |
| position: fixed; | |
| top: 3em; | |
| left: 0; | |
| font-size: 40px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="box"> | |
| <div class="data"> | |
| </div> | |
| <div class="scroll"> | |
| scroll | |
| </div> | |
| <div> | |
| <div class="square square-1"></div> | |
| </div> | |
| <div> | |
| <div class="square square-2"></div> | |
| </div> | |
| </div> | |
| <script> | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach((entry) => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('square-animation'); | |
| return; | |
| } | |
| entry.target.classList.remove('square-animation'); | |
| }) | |
| }) | |
| const domToObs = document.querySelector('.square-1') | |
| observer.observe(domToObs) | |
| const domToObs2 = document.querySelector('.square-2') | |
| observer.observe(domToObs2) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment