//HTML <div class="container"> <div class="box box-1"></div> <div class="box box-2"></div> <div class="box box-3"></div> <div class="box box-4"></div> <div class="box box-5"></div> </div> //CSS .container { width: 100%; display: flex; flex-wrap: wrap; } .box { width: calc(50% - 2rem); height: 100px; border-radius: 20px; margin: 1rem; transform: translateY(50px); opacity: 0; transition: all 0.5s; } .box-1 { background-color: coral; } .box-2 { background-color: cornflowerblue; } .box-3 { background-color: palegoldenrod; } .box-4 { background-color: violet; } .box-5 { background-color: palegreen; } .inView { opacity: 1; transform: translateY(0px); } //Javascript const boxes = document.querySelectorAll('.box'); window.addEventListener('scroll', fadeIn); function fadeIn() { boxes.forEach((box) => { //get viewport-point where the transition should happen let distanceInView = box.getBoundingClientRect().top - window.innerHeight + 20; if (distanceInView < 0) { box.classList.add('inView'); } else { box.classList.remove('inView'); } }); } //call function if elements are already on screen when pafge loads fadeIn();
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter