Full page scroll-over with ScrollMagic

Developer
Ross B
Size
2,752 Kb
Views
32,384
  1. Full page scroll-over with ScrollMagic Previews
  2. Full page scroll-over with ScrollMagic HTML Codes
  3. Full page scroll-over with ScrollMagic CSS Codes
  4. Full page scroll-over with ScrollMagic JS Codes

How do I make an full page scroll-over with scrollmagic?

WIP. What is a full page scroll-over with scrollmagic? How do you make a full page scroll-over with scrollmagic? This script and codes were developed by Ross B on 24 November 2022, Thursday.

Full page scroll-over with ScrollMagic Previews
IQ Test

Full page scroll-over with ScrollMagic - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Full page scroll-over with ScrollMagic</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="first">	<h2>Terminally Trees</h2>	<img src="http://grist.files.wordpress.com/2012/11/sideways_tree.jpeg" alt="" height="100%"/>
</section>
<section class="second">	<h2>Doubtful Dog</h2>	<img src="https://i.imgur.com/s0DEL3U.jpg" height="100%"/>
</section>
<section class="third">	<h2>Crappy Kitten</h2> <img src="https://i.imgur.com/DCZfs28.jpg" height="100%"/>
</section>
<section class="fourth">	<h2>Stupid Cereal</h2> <img src="https://i.imgur.com/AO3s6K9.jpg" height="100%"/>
</section>
<section class="fifth">	<h2>Where are dogs?</h2> <h3>how to turn on internet.</h3>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.12.1/TweenMax.min.js'></script>
<script src='https://rawgit.com/janpaepke/ScrollMagic/master/js/jquery.scrollmagic.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Full page scroll-over with ScrollMagic - Script Codes CSS Codes

html,
body { height: 100%; margin: 0;
}
h2 { margin: 0; padding: 20px;
}
section { text-align: center; width: 100%; height: 100%; top: 0; position: relative;
}
section .content { position: absolute; width: 100%; height: 100%;
}
section.first { background-color: #ff7f50;
}
section.second { background-color: #90ee90;
}
section.third { background-color: #add8e6;
}
section.fourth { background-color: #ffff6e;
}
section.fifth { background-color: #3c3c3c; color: #fff;
}

Full page scroll-over with ScrollMagic - Script Codes JS Codes

(function() { var controller; controller = new ScrollMagic(); $('section').each(function() { return new ScrollScene({ triggerElement: this, triggerHook: 0 }).setPin(this).addTo(controller); });
}).call(this);
Full page scroll-over with ScrollMagic - Script Codes
Full page scroll-over with ScrollMagic - Script Codes
Home Page Home
Developer Ross B
Username rocbear
Uploaded November 24, 2022
Rating 3
Size 2,752 Kb
Views 32,384
Do you need developer help for Full page scroll-over with ScrollMagic?

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!

Ross B (rocbear) Script Codes
Name
Spear checkboxes
Canvas blend modes
Responsive grid based FLIP.js demo
A Pen by Ross B
Plane vertex manipulation experiment
Wobbly list
Torus light track
Full page scroll-over with Skrollr
Hovergram
Loading animation - freedom purchase
Create amazing sales emails 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!