Create parallax effect in website.
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=500" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.js" integrity="sha512-UgS0SVyy/0fZ0i48Rr7gKpnP+Jio3oC7M4XaKP3BJUB/guN6Zr4BjU0Hsle0ey2HJvPLHE5YQCXTDrx27Lhe7A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.section-wipes {
height: 100%;
width: 100%;
background-image: none;
}
b {
color: green;
font-size: 44px;
display: flex;
margin: auto;
align-items: center;
justify-content: center;
align-items: center;
}
body, html {
height: 100%;
padding: 0px;
margin: 0px;
}
.panel {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<body class="section-wipes">
<section class="panel" style="background-color:blue">
<b>ONE</b>
</section>
<section class="panel " style="background-color:pink">
<b>TWO</b>
</section>
<section class="panel " style="background-color:green">
<b>THREE</b>
</section>
<section class="panel " style="background-color:red">
<b>FOUR</b>
</section>
<script>
$(function () { // wait for document ready
// init
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: 'onLeave',
duration: "200%" // this works just fine with duration 0 as well
// However with large numbers (>20) of pinned sections display errors can occur so every section should be unpinned once it's covered by the next section.
// Normally 100% would work for this, but here 200% is used, as Panel 3 is shown for more than 100% of scrollheight due to the pause.
}
});
// get all slides
var slides = document.querySelectorAll("section.panel");
// create scene for every slide
for (var i=0; i<slides.length; i++) {
new ScrollMagic.Scene({
triggerElement: slides[i]
})
.setPin(slides[i], {pushFollowers: false})
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
}
});
</script>
</body>
</body>
</html>
Comments
Post a Comment