Blog
Select Page

Parallax Sections

Misc

parallax sections
parallax sections

Will be updating it …

DEMO

Open demo in a full window – https://demos.webdevpuneet.com/parallax/index.html

SOURCE

<!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" />
	<meta name="keywords" content="Parallax Sections" />
	<meta name="author"	content="webdevpuneet" />
	<title>Parallax Sections - Webdevpuneet</title>

	<link rel="stylesheet" href="./assets/css/normalize.css" type="text/css">
	<link rel="shortcut icon" href="./assets/img/favicon.ico" type="image/x-icon">

	<script type="text/javascript" src="./assets/js/lib/highlight.pack.js"></script>
	<script type="text/javascript" src="./assets/js/lib/modernizr.custom.min.js"></script>

	<script type="text/javascript" src="./assets/js/lib/gsap3/gsap.min.js"></script>
	<script type="text/javascript" src="./assets/lib/scrollmagic/minified/ScrollMagic.min.js"></script>
  <script type="text/javascript" src="./assets/lib/scrollmagic/minified/plugins/animation.gsap.min.js"></script>
	<script type="text/javascript" src="./assets/lib/scrollmagic/minified/plugins/debug.addIndicators.min.js"></script>

	<style>
		body{
			text-align: center;
		}
	</style>
</head>
<body>
	<div id="content-wrapper">
		<div id="example-wrapper">
			<div class="scrollContent">
				<section id="titlechart">
					<div id="description">

					</div>
				</section>
				<section class="demo">
					<style type="text/css">
						.parallaxParent {
							height: 100vh;
							overflow: hidden;
							position: relative;
						}
						.parallaxContent {
							position: relative;
							z-index: 1;
						}
						.parallaxParent > .parallaxBg {
							height: 200%;
							position: relative;
							top: -100%;
						}
					</style>

					<div id="parallax1" class="parallaxParent">
						<div class="parallaxContent">
							<h1 class="badge gsap">Parallax Sections - Section1</h1>
							<p>
								To create a classic parallax page effect simply add elements that contain the parallax background.<br>
								Then use scenes to animate the child element's position.
							</p>

						</div>
						<div class="parallaxBg" style="background-image: url(./assets/img/bg1.jpg);"></div>
					</div>

					<div id="parallax2" class="parallaxParent">
						<div class="parallaxContent">
							<h2 class="badge gsap">Parallax Sections - Section1</h2>
						</div>
						<div class="parallaxBg" style="background-image: url(./assets/img/bg2.jpg);"></div>
					</div>

					<div id="parallax3" class="parallaxParent">
						<div class="parallaxContent">
							<h2 class="badge gsap">Parallax Sections - Section 3</h2>
							<div style="mx-width:1200px;margin:0 auto;">

							</div>
						</div>
						<div class="parallaxBg" style="background-image: url(./assets/img/bg3.jpg);"></div>
					</div>
				</section>
			</div>
		</div>
	</div>

	<script>
		// init controller
		var controller = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});

		// build scenes
		new ScrollMagic.Scene({triggerElement: "#parallax1"})
						.setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})
						.addTo(controller);

		new ScrollMagic.Scene({triggerElement: "#parallax2"})
						.setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})
						.addTo(controller);

		new ScrollMagic.Scene({triggerElement: "#parallax3"})
						.setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})
						.addTo(controller);
	</script>
</body>
</html>

Download Files