Parallax Scroll 2.0

Developer
Jerusha Johnson
Size
2,393 Kb
Views
14,168
  1. Parallax Scroll 2.0 Previews
  2. Parallax Scroll 2.0 HTML Codes
  3. Parallax Scroll 2.0 CSS Codes
  4. Parallax Scroll 2.0 JS Codes

How do I make an parallax scroll 2.0?

Multiple Background Images background image scrolled slowly. What is a parallax scroll 2.0? How do you make a parallax scroll 2.0? This script and codes were developed by Jerusha Johnson on 22 October 2022, Saturday.

Parallax Scroll 2.0 Previews
IQ Test

Parallax Scroll 2.0 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallax Scroll 2.0</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="parallax">
<div class="panel1 orange-bg"></div>
<div class="panel2 mountain-bg">	<img src="http://blog.creativelive.com/wp-content/themes/creativelive/img/wds/backgroundMountains.png" alt="bg" class="img-responsive"/>
</div>
<div class="panel3 summit">	<img src="http://blog.creativelive.com/wp-content/themes/creativelive/img/wds/summit.png" alt="bg" class="img-responsive"/>
</div>
<div class="panel4 painter">	<img src="http://blog.creativelive.com/wp-content/themes/creativelive/img/wds/painter.png" alt="bg" class="img-responsive"/>
</div>
<div class="panel5 others">	<img src="http://blog.creativelive.com/wp-content/themes/creativelive/img/wds/musicMacPhoto.png" alt="others" class="img-responsive"/>
</div>
<div class="panel6 text">	<h1 class="col-sm-12">WELCOME TO THE MOUNTAINS THAT HAVE A LOT OF PEOPLE!</h1>
</div>
</section>
<div class="page"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Parallax Scroll 2.0 - Script Codes CSS Codes

/* PARALLAX STYLES */
.parallax{	height: 450px;	overflow: hidden;	width: 100%;	position: relative;	display:table;
}
.panel1{	z-index: 1;	position: absolute;	top: 0;	bottom: 0;	left: 0;	right: 0;	display:table-cell;	vertical-align:bottom;
}
.panel2{	z-index: 2; position: absolute; bottom: 0; right: -30px; width: 50%;
}
.panel3{	z-index: 3; position: absolute; bottom: 0; right: 7%; width: 28%;
}
.panel4{	z-index: 4; position: absolute; bottom: 0; left: 10%;	width: 32%; left: 15%;
}
.panel5{	z-index: 4; position: absolute; bottom: 0; left: 0; padding-left: 0; width: 40%;
}
.panel6{	z-index: 4;	position: absolute;	top: 30px;	left: 50px;	width:50%;	color: #fff;
}
/* ELEMENT STYLES */
.orange-bg{	background-color:#f45f37;
}
.panel6 h3,
.panel6 h1{	font-weight:300;
}
.page{	background:#fff;	height: 1200px;
}

Parallax Scroll 2.0 - Script Codes JS Codes

function parallaxScroll(){ var scrolled = $(window).scrollTop(); $('.panel1').css('top',(0-(scrolled*.25))+'px'); $('.panel2').css('bottom',(0-(scrolled*.5))+'px'); $('.panel3').css('bottom',(0-(scrolled*.75))+'px');	$('.panel4').css('bottom',(0-(scrolled*.5))+'px');	$('.panel5').css('bottom',(0-(scrolled*.25))+'px');	$('.panel6').css('top',(30-(scrolled*.25))+'px');
}
$(window).bind('scroll',function(e){ parallaxScroll();
});
Parallax Scroll 2.0 - Script Codes
Parallax Scroll 2.0 - Script Codes
Home Page Home
Developer Jerusha Johnson
Username bonzaipenguin
Uploaded October 22, 2022
Rating 3
Size 2,393 Kb
Views 14,168
Do you need developer help for Parallax Scroll 2.0?

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!

Jerusha Johnson (bonzaipenguin) Script Codes
Name
Phone-esque Accordian
Moveable 8-bit
Wedding Announcement Idea
Scaled Agile Card Heights
Project Showcase Idea
Photo Week Bug
Mobile Calendar Test
New BookStrap
Objects 2.0
Logo Trial v2
Create amazing love letters 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!