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 |
Wire up a Backend | 2,435 Kb |
Evolve Game | 1,629 Kb |
Evolve JS | 3,408 Kb |
Recommendation slider | 17,000 Kb |
Bootstrap Grid Configurator | 3,860 Kb |
Evolve Media Gallery | 2,493 Kb |
Strava JS API | 8,043 Kb |
Huddle Grid-Detail View | 8,974 Kb |
Evolve Patterns | 27,954 Kb |
Evolve Logo SVG animation | 4,280 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 |
Learning canvas drawing | Aurer | 2,204 Kb |
Tooltip in table | Roine | 3,713 Kb |
Canvas Fireworks | Jackrugile | 6,200 Kb |
CSS3 Butterfly | Timohausmann | 3,430 Kb |
Nice responsive team page | Infomiho | 3,139 Kb |
Day 11 - Calendar Card | Arnellebalane | 6,984 Kb |
Display properties | Hamzaerbay | 1,886 Kb |
Local Weather App - FreeCodeCamp | TrevorWelch | 4,134 Kb |
Image grid with captions | Mchernin34 | 2,222 Kb |
Headroom.js demo | WickyNilliams | 3,982 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!