"scroll animation effect"
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 http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> </head> <body> <div class="container"> <div class="block"> <div class="img"></div> <div class="translaterContainer"><div class="translater"></div></div> <p class="text1">James Smith</p> <p class="text2">Founder/Director</p> </div> <div class="block"> <div class="img"></div> <div class="translaterContainer"><div class="translater"></div></div> <p class="text1">Maria Garcia</p> <p class="text2">Assistant Executive</p> </div> <div class="block"> <div class="img"></div> <div class="translaterContainer"><div class="translater"></div></div> <p class="text1">John Jones</p> <p class="text2">Creative Director</p> </div> <div class="block"> <div class="img"></div> <div class="translaterContainer"><div class="translater"></div></div> <p class="text1">Luna Lopez</p> <p class="text2">Art Director</p> </div> <div class="block"> <div class="img"></div> <div class="translaterContainer"><div class="translater"></div></div> <p class="text1">Jessica Lee</p> <p class="text2">Motion Designer</p> </div> <div class="block"> <div class="img"></div> <div class="translaterContainer"><div class="translater"></div></div> <p class="text1">Mark Brown</p> <p class="text2">Sound Designer</p> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/debug.addIndicators.js"></script> <script> var controller = new ScrollMagic.Controller(); document.querySelectorAll('.block').forEach(function(element){ console.log(element.getElementsByClassName('translater')) var ourScene = new ScrollMagic.Scene({ triggerElement: element.getElementsByTagName('div')[0], duration: '100%', // 90% to make it disappear at 90% of vh triggerHook: 0.35, // 1 will make the animation trigger when it hits the #element, 0.9 to make it trigger 10% before hitting #element reverse: true, // animate once }) .setClassToggle(element.getElementsByClassName('translater')[0], 'translate') .addTo(controller) }); document.querySelectorAll('.block').forEach(function(element){ var ourScene = new ScrollMagic.Scene({ triggerElement: element.getElementsByTagName('div')[0], duration: '100%', // 90% to make it disappear at 90% of vh triggerHook: 0.35, // 1 will make the animation trigger when it hits the #element, 0.9 to make it trigger 10% before hitting #element reverse: true, // animate once }) .setClassToggle(element.getElementsByTagName('div')[0], 'appear') .addTo(controller) }); document.querySelectorAll('.block').forEach(function(element){ var ourScene = new ScrollMagic.Scene({ triggerElement: element.getElementsByTagName('div')[0], duration: '100%', // 90% to make it disappear at 90% of vh triggerHook: 0.35, // 1 will make the animation trigger when it hits the #element, 0.9 to make it trigger 10% before hitting #element reverse: true, // animate once }) .setClassToggle(element.getElementsByClassName('text1')[0], 'textAppear1') .addTo(controller) }); document.querySelectorAll('.block').forEach(function(element){ var ourScene = new ScrollMagic.Scene({ triggerElement: element.getElementsByTagName('div')[0], duration: '100%', // 90% to make it disappear at 90% of vh triggerHook: 0.35, // 1 will make the animation trigger when it hits the #element, 0.9 to make it trigger 10% before hitting #element reverse: true, // animate once }) .setClassToggle(element.getElementsByClassName('text2')[0], 'textAppear2') .addTo(controller) }); </script> </body> </html>
body{ width: 100vw; height: 300vh; } .container{ width: 70%; height: 80%; margin: 0 auto; } .block{ position: relative; width: 200px; height: 300px; } .container .block:nth-child(1), .container .block:nth-child(3), .container .block:nth-child(5){ margin-left: auto; } .container .block:nth-child(2), .container .block:nth-child(4), .container .block:nth-child(6){ margin-right: auto; } .container .block:nth-child(1) .img{ background-image: url(https://i.postimg.cc/prrTDfjM/4.jpg); } .container .block:nth-child(2) .img{ background-image: url(https://i.postimg.cc/D0Nz5SQJ/033321112df5d5a0392082517cbe5143-model-portrait-beauty-portrait.jpg ); } .container .block:nth-child(3) .img{ background-image: url(https://i.postimg.cc/7Yp62TYj/39e9b39628e745a39f900dc14ee4d9a7.jpg ); } .container .block:nth-child(4) .img{ background-image: url(https://i.postimg.cc/qBDgpFfJ/951629-800w.jpg ); } .container .block:nth-child(5) .img{ background-image: url(https://i.postimg.cc/xTk88PYK/CCC-10-26-0231-MOYENNE-DEF-1.jpg ); } .container .block:nth-child(6) .img{ background-image: url(https://i.postimg.cc/6pnQL58q/Popular-Mens-Beard-Styles-5.jpg ); } .img{ opacity: 0; width: 100%; height: 100%; background-size: cover; position: relative; } .translaterContainer{ width: 100%; height: 100%; overflow: hidden; position: relative; top: -100%; } .translater{ width: 100%; height: 100%; background-color: black; position: absolute; top: 0; left: -100%; z-index: 1; } .translate{ animation: translate 0.5s ease-in; } .appear{ animation: opacity 0.5s linear forwards 0.5s; } @keyframes opacity{ to{ opacity: 1; } } @keyframes translate{ to{ left: 100%; } } .text1{ position: absolute; top:70%; font-size: calc(1.2em + 1vmin); left: -40%; opacity: 0; } .text2{ font-size: calc(0.5em + 1vmin); position: absolute; top: 82%; left: -40%; opacity: 0; } .textAppear1{ animation: miniTranslate 0.5s linear forwards 1.2s; } .textAppear2{ animation: miniTranslate 0.5s linear forwards 0.7s; } @keyframes miniTranslate{ to{ opacity: 1; left: -15%; } }

Related: See More


Questions / Comments: