<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <header class="container"> <h1>How to Animate on Scroll With Vanilla JavaScript</h1> <h2>Scroll to see the effects <p class="animate-arrow">↓ </p> </h2> </header> <section class="scroll-container"> <div class="scroll-element js-scroll fade-in"> </div> <div class="scroll-caption"> This animation fades in. </div> </section> <section class="scroll-container"> <div class="scroll-element js-scroll fade-in-bottom"> </div> <div class="scroll-caption"> This animation slides in to the top. </div> </section> <section class="scroll-container"> <div class="scroll-element js-scroll slide-left"> </div> <div class="scroll-caption"> This animation slides in from the left. </div> </section> <section class="scroll-container"> <div class="scroll-element js-scroll slide-right"> </div> <div class="scroll-caption"> This animation slides in from the right. </div> </section> <footer> <p>Animation styles from <a href="https://animista.net" target="_blank">animista.net</a></p> <p> Pen by <a href="https://www.jemimaabu.com" target="_blank">Jemima Abu</a><span style="color: #D11E15"> ♥</span> </p> </footer>

@import url("https://fonts.googleapis.com/css2?family=Merriweather&family=Merriweather+Sans:wght@300&display=swap"); /*General styling for structure*/ body { margin: 0; font-family: "Merriweather Sans", sans-serif; } .container { max-width: 1280px; width: 95%; margin: 0 auto; } header { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-family: "Merriweather", serif; height: 100vh; } header h2 { font-weight: 400; } .scroll-container { height: 100vh; min-height: 450px; padding: 2rem 1rem; display: flex; align-items: center; box-sizing: border-box; } .scroll-container:nth-of-type(1) { background-color: #bdd0c4; } .scroll-container:nth-of-type(2) { background-color: #f5d2d3; } .scroll-container:nth-of-type(3) { background-color: #9ab7d3; } .scroll-container:nth-of-type(4) { background-color: #dfccf1; } .scroll-container:nth-of-type(even) { flex-direction: row-reverse; } .scroll-element, .scroll-caption { width: 50%; } .scroll-element { min-height: 300px; height: 100%; background-color: #eaeaea; } .scroll-caption { margin: 1rem; } footer { text-align: center; padding: 0.5rem 0; background-color: #faddad; } footer p { font-size: 0.75rem; margin: 0.25rem 0; color: #221133; } footer a { text-decoration: none; color: inherit; } @media screen and (max-width: 650px) { .scroll-container, .scroll-container:nth-of-type(even) { flex-direction: column; align-content: inherit; } .scroll-element { height: 100%; } .scroll-element, .scroll-caption { width: 100%; } } /**Styling scrollable elements*/ .js-scroll { opacity: 0; transition: opacity 500ms; } .js-scroll.scrolled { opacity: 1; } .scrolled.fade-in { animation: fade-in 1s ease-in-out both; } .scrolled.fade-in-bottom { animation: fade-in-bottom 1s ease-in-out both; } .scrolled.slide-left { animation: slide-in-left 1s ease-in-out both; } .scrolled.slide-right { animation: slide-in-right 1s ease-in-out both; } /* ---------------------------------------------- * Generated by Animista on 2021-2-11 23:32:31 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ @keyframes slide-in-left { 0% { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes slide-in-right { 0% { -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes fade-in-bottom { 0% { -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } https://codepen.io/tutsplus/pen/QWGYKMN

const scrollElements = document.querySelectorAll(".js-scroll"); const elementInView = (el, dividend = 1) => { const elementTop = el.getBoundingClientRect().top; return ( elementTop <= (window.innerHeight || document.documentElement.clientHeight) / dividend ); }; const elementOutofView = (el) => { const elementTop = el.getBoundingClientRect().top; return ( elementTop > (window.innerHeight || document.documentElement.clientHeight) ); }; const displayScrollElement = (element) => { element.classList.add("scrolled"); }; const hideScrollElement = (element) => { element.classList.remove("scrolled"); }; const handleScrollAnimation = () => { scrollElements.forEach((el) => { if (elementInView(el, 1.25)) { displayScrollElement(el); } else if (elementOutofView(el)) { hideScrollElement(el) } }) } window.addEventListener("scroll", () => { handleScrollAnimation(); });