JSFiddle - React, Tailwind, and code Playground

by jwpg018241

HTML

<script src="cdn.amcharts.com/lib/3/amcharts.js"></script>
<script src="cdn.amcharts.com/lib/3/serial.js"></script>
  <div class="section_over">
  <div class="ani_up" data-observer>
  <h1>QUEEN</h1>
  <p>
Queen, British rock band whose fusion of heavy metal, glam rock, and camp theatrics made it one of the most popular groups of the 1970s. Although generally dismissed by critics, Queen crafted an elaborate blend of layered guitar work by virtuoso Brian May and overdubbed vocal harmonies enlivened by the flamboyant performance of front man and principal songwriter Freddie Mercury.
</p></div>
                  </div>
                  
                  
                    <div class="section_over_img"><div class="ani_up" data-img>
                  <img src="https://cdns-images.dzcdn.net/images/artist/0b17b99897d17ceb7027ed57cdbb7044/500x500.jpg"></div>
              </div>
 <div class="section_over_img"><div class="ani_up" data-img>
                  <img src="https://blog.kakaocdn.net/dn/yYsoe/btqCJk9P4fq/lnu0VqialIsSk2RMb0A4kK/img.jpg"></div>
              </div>
               <div class="section_over_img"><div class="ani_up" data-img>
                  <img src="https://w.namu.la/s/5d3b55cf41388ecf3c7edac944f0df51dde094270ee7c33dac6d4e4da07df8abd670b595e4f817f677059b50fec91f2cf76cbca6b6ba67fd129fac96049b9af24a809234f0dfd099601039008620f71e933364d414ffedda2f710f70699f6b00"></div>
              </div>

CSS

.ani_up {
	width: 100%;
		transition: transform 1200ms, opacity 600ms;
		transform: translate(0%, 8%);
		opacity: 0;
}
.ani_up.is-visible {
		transform: translate(0%, 0%);
		opacity: 1;
}

.section_over {position: relative; text-align: left;}
.section_over h1 {font-size: 24px; line-height: 45px; margin-bottom: 45px; letter-spacing: 0.5px;}
.section_over p {font-size: 16px; line-height: 30px;}
.section_over_img {position: relative; padding: 0px 0px 48px; text-align: left;}

JavaScript

window.onload = function () {
                const targets = document.querySelectorAll('[data-observer]')
                const images = document.querySelectorAll('[data-img]')
                const options = {
                    rootMargin: '100px',
                    threshold: 1.0
                }
                const addClass = (el) => {
                    if (!el.classList.contains('is-visible')) {
                        el.classList.add('is-visible')
                    }
                }
                const removeClass = (el) => {
                    if (el.classList.contains('is-visible')) {
                        el.classList.remove('is-visible')
                    }
            
                }




                const doThings = (entries, observer) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            addClass(entry.target)
                        } else {
                            removeClass(entry.target)
                        }
                    })
                }
                const observer = new IntersectionObserver(doThings, options)
                const observer2 = new IntersectionObserver(doThings, {
                    ... options,
                    threshold: 0.4
                })
                targets.forEach(target => {
                    observer.observe(target)
                })
                images.forEach(target => {
                    observer2.observe(target)
                })
            }