Parallax Effect
How do I make an parallax effect?
Parallax effect using simple jQuery.. What is a parallax effect? How do you make a parallax effect? This script and codes were developed by Anoop on 06 September 2022, Tuesday.
Parallax Effect - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallax Effect</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <h1>Code pen</h1>
</header>
<div class="content"></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 Effect - Script Codes CSS Codes
header { height: 100vh; background: url(https://unsplash.imgix.net/uploads/14129863345840df499fc/0165574c?q=75&fm=jpg&s=6e5127e797feb9b5a72f7ae4a0f3a89b) bottom; background-size: cover; text-align: center; float: left; width: 100%; z-index: 0; position: relative;
}
header h1 { text-align: center; color: #fff; text-transform: uppercase; margin: 0; font-size: 50px; position: relative; top: 50%;
}
.content { background: #fff; width: 100%; float: left; height: 900px; position: relative;
}
Parallax Effect - Script Codes JS Codes
jQuery(function ($) {
$(window).scroll( function(){ var scroll = $(window).scrollTop(), slowScroll = scroll/2; $('header').css({ transform: "translateY(" + slowScroll + "px)" }); });
});
Developer | Anoop |
Username | anoopjohn |
Uploaded | September 06, 2022 |
Rating | 3 |
Size | 2,393 Kb |
Views | 28,336 |
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 |
Simple jQuery accordion menu | 2,089 Kb |
Example | 1,707 Kb |
Price Slider | 2,985 Kb |
Vue App | 2,070 Kb |
Vue Web App | 3,284 Kb |
Hide select arrow in Firefox | 1,747 Kb |
A Pen by Anoop | 330,760 Kb |
Pie Chart | 4,762 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 |
Vue.js Starter | Andymerskin | 1,268 Kb |
Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
Sample Profile Screen | OurDailyBread | 5,375 Kb |
Tile Animation Thing | Frxnz | 4,332 Kb |
Gears | Synvox | 3,278 Kb |
Amazing CSS Menu with Notification Badges | Faizanasad | 2,549 Kb |
Toggle menu | Seyedi | 2,279 Kb |
Horizontal scroll fixed element | HerrSerker | 0 Kb |
Pure CSS Dial | Lukewatts | 3,018 Kb |
Polygon Logo in CSS | Kai | 3,412 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!