Parallax Background Scroll

Developer
Trenton
Size
2,067 Kb
Views
20,240
  1. Parallax Background Scroll Previews
  2. Parallax Background Scroll HTML Codes
  3. Parallax Background Scroll CSS Codes
  4. Parallax Background Scroll JS Codes

How do I make an parallax background scroll?

What is a parallax background scroll? How do you make a parallax background scroll? This script and codes were developed by Trenton on 22 November 2022, Tuesday.

Parallax Background Scroll Previews
IQ Test

Parallax Background Scroll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallax Background Scroll</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="imgHolder"> <img src='http://tamingthewild.sitewrench.com/SiteFiles/2411/css/images/mist.png'/> <div class='header'>FROM THE BOOK</div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Parallax Background Scroll - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,700,900);
html{ height:1500px;
}
.imgHolder{ height:30em; overflow:visible; position:relative;
}
.imgHolder img{ width:100%; min-height:500px; max-width:1500px; left:50%; -webkit-transform: translate(-50%, -10%); -ms-transform: translate(-50%, -10%); transform: translate(-50%, -10%); position:absolute;
}
.header{ position:absolute; font-size:2em; font-weight:100; background:rbga(22,41,35,0.5); color:#000; letter-spacing:0.2em; top:50%; left:50%; width:80%; font-family:Roboto !important; text-align:center; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}

Parallax Background Scroll - Script Codes JS Codes

$(window).scroll(function(){ var position = $(this).scrollTop(); $('.imgHolder img').css({top:position/2});
});
Parallax Background Scroll - Script Codes
Parallax Background Scroll - Script Codes
Home Page Home
Developer Trenton
Username tlelkins2020
Uploaded November 22, 2022
Rating 3
Size 2,067 Kb
Views 20,240
Do you need developer help for Parallax Background Scroll?

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!

Trenton (tlelkins2020) Script Codes
Name
Sticky CTA Button
Full Screen Material Menu
Auto Centered Sections
Animated Top Menu
Changing Background Color on Scroll
A Pen by Trenton
Create amazing SEO content 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!