ScrollMagic Reveal

Developer
Size
2,610 Kb
Views
58,696

How do I make an scrollmagic reveal?

What is a scrollmagic reveal? How do you make a scrollmagic reveal? This script and codes were developed by Alyssa on 08 September 2022, Thursday.

ScrollMagic Reveal Previews

ScrollMagic Reveal - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ScrollMagic Reveal</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="content"> <section> <div class="scene scene-0"> SCENE 0 </div> <div class="scene scene-1"> SCENE 1 </div> <div class="scene scene-2"> SCENE 2 </div> </section> <section style="color:#000"> content needs to be 'pushed down' </section> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

ScrollMagic Reveal - Script Codes CSS Codes

html, body { height: 100%; margin: 0; padding: 0;
}
.content { margin: 90px auto; padding-bottom: 1000px;
}
section { position: relative; color: #fff; font-family: sans-serif; font-size: 32px; text-align: center;
}
.scene { position: relative; min-height: 600px;
}
.scene-0 { background-color: #333; z-index: 20;
}
.scene-1 { margin-bottom: 2400px; background-color: #2e86a5; z-index: 15;
}
.scene-2 { background-color: #0c64a3;
}

ScrollMagic Reveal - Script Codes JS Codes

var controller = new ScrollMagic.Controller({ addIndicators: true });
var scene1 = new ScrollMagic.Scene({ triggerElement: '.scene-0', triggerHook: 'onLeave', duration: '100%' // responsive duration
})
.setPin('.scene-0', {pushFollowers: false})
.addTo(controller);
// duration must be greater than scene1's duration
var scene2 = new ScrollMagic.Scene({ triggerElement: '.scene-1', triggerHook: 'onLeave', duration: 3000 // must be at least the height of .scene-1 (min-height 600px)
})
.setPin('.scene-1', {pushFollowers: false}) // allows .scene-2 to reach the top of the page
.addTo(controller);
// duration must be greater than scene 1 and scene 2 combined
var scene3 = new ScrollMagic.Scene({ triggerElement: '.scene-2', triggerHook: 'onLeave', duration: 3000 // might need to be longer than previous scene + window height
})
.setPin('.scene-2')
.addTo(controller);
ScrollMagic Reveal - Script Codes
ScrollMagic Reveal - Script Codes
Home Page Home
Developer Alyssa
Username alyda
Uploaded September 08, 2022
Rating 3
Size 2,610 Kb
Views 58,696
Do you need developer help for ScrollMagic Reveal?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alyssa (alyda) Script Codes
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!