News
Acerca
Proyectos
Blurry loading effect
slide show – javascript
Redes sociales
Play
HTML JS Y CSS
<h1>Scroll</h1> <style> h1{margin:10px;} .box{ background: steelblue; color:#fff; display: flex; align-items: center; justify-content: center; width: 400px; height: 200px; margin: 10px; border-radius:10px; box-shadow:2px 4px 5px; transform:translateX(400%); transition:transform 0.6s ease; } .box:nth-of-type(even){ transform:translateX(-400%); } .box.show{ transform: translateX(0); } .center{ margin 0 auto; text-align: center; justify-content:center; } </style> <div id="center"> <div class="box">Content</div> <div class="box">Content</div> <div class="box">Content</div> <div class="box">Content</div> <div class="box">Content</div> <div class="box">Content</div> <div class="box">Content</div> <div class="box">Content</div> <div class="box">Content</div> <div class="box">Content</div> <div class="box">Content</div> </div> <script type="rocketlazyloadscript"> const boxes = document.querySelectorAll('.box'); window.addEventListener('scroll',checkBoxes); //checkBoxes(); function checkBoxes() { const triggerBottom = window.innerHeight / 5*4; boxes.forEach( box => { const boxTop = box.getBoundingClientRect().top; if(boxTop<triggerBottom){ box.classList.add('show'); } else{ box.classList.remove('show'); } }); } </script>
RESULTADO
