ScrollMagic Reveal
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 - 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);
Developer | Alyssa |
Username | alyda |
Uploaded | September 08, 2022 |
Rating | 3 |
Size | 2,610 Kb |
Views | 58,696 |
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!
Name | Size |
Recommendation slider | 17,000 Kb |
Evolve Error Pages | 1,416 Kb |
Wire up a Backend | 2,435 Kb |
Huddle Subway Map | 1,895 Kb |
ScrollMagic Reveal | 2,610 Kb |
Evolve Logo SVG animation | 4,280 Kb |
Strava JS API | 8,043 Kb |
Evolve Media Gallery | 2,493 Kb |
Photo Gallery | 5,908 Kb |
Lexus Email Templates | 9,861 Kb |
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!
Name | Username | Size |
SVG Icons Template | Legofsalmon | 2,618 Kb |
CSS Parent Selector | Tomhodgins | 2,143 Kb |
Playing with transition timing | Mattgrosswork | 1,993 Kb |
Transition | Shayhowe | 1,632 Kb |
Basic HTML5 Structure | YuvarajTana | 1,289 Kb |
SlideupBoxes | Gavra | 23,772 Kb |
Eunice A | Ejbronze | 2,203 Kb |
Simple content swap | Snografx | 1,859 Kb |
A Pen by lizz | Lizz | 10,068 Kb |
Ipad Mini Showcase | Hornebom | 10,479 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!