"scroll to show"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

<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 ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="introduction"> <h1>I can do the following for you:</h1> <ul> <li>Create a custommade, new website.</li> <li>Code a PSD template into a working website.</li> <li>Rework an outdated website.</li> <li>Clean up messy code of a website.</li> </ul> </div> </body> </html>
@keyframes showOnLoad { 0% { opacity: 0; } 100% { opacity: 1; } } .introduction li { list-style-type: none; margin-bottom: 5px; text-align: center; height: 200px; border: 1px solid red; } @keyframes slideIn { 0% { opacity: 0; transform: translateX(100%); } 100% { opacity: 1; transform: translateX(0%); } } .show { animation: slideIn 5s ease-in-out; }
window.addEventListener("scroll", onScroll); function onScroll() { for (var item of document.querySelectorAll(".introduction li")) { elementVisible(item); } } function elementVisible(el) { let top = el.offsetTop; let height = el.offsetHeight; let bottom = top + height; let IsOverBottom = top > (window.pageYOffset + window.innerHeight); let IsBeforeTop = bottom < window.pageYOffset; if (!IsOverBottom && !IsBeforeTop) { el.classList.add("show"); } }

Related: See More


Questions / Comments: