Simple parallax scroll
How do I make an simple parallax scroll?
Without the need of a fancy js library, I wanted to cobble together some code to create a simple parallax scroll. So far this has seemed to do the trick while remaining fairly smooth.. What is a simple parallax scroll? How do you make a simple parallax scroll? This script and codes were developed by Bradley Engelhardt on 13 August 2022, Saturday.
Simple parallax scroll - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple parallax scroll</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Header -->
<body> <!-- first section with parallax scroll --> <section id="parallax"> <div class="container" id="section-container"> <h1>SECTION 1</h1> </div> </section> <!-- second section --> <section id="two"> <div class="container" id="section-container"> <h1>SECTION 2</h1> </div> </section> <!-- third section --> <section id="three"> <div class="container" id="section-container"> <h1>SECTION 3</h1> </div> </section>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Simple parallax scroll - Script Codes CSS Codes
#parallax { background-image: url('http://images.unsplash.com/photo-1471255618142-bc3ea8675f3a?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop='); background-color: black; background-attachment: fixed; background-position-y: -0.2; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover;
}
section { text-align: center; color: white; transition: 0s linear; transition-property: background-position; height: 500px;
}
#two { background-color: #3498db;
}
#three { background-color: #e74c3c;
}
#section-container { padding-top: 16%
}
Simple parallax scroll - Script Codes JS Codes
$(document).ready(function () { //init scrolling parallax $(window).scroll(function(e){ var scrolled = $(window).scrollTop(); if(scrolled < 750){ parallax() } }); //define parallax function function parallax(){ var scrolled = $(window).scrollTop(); $('#parallax').css('background-positionY',(scrolled * -0.5)+'px'); };
});
Developer | Bradley Engelhardt |
Username | SquishyAndroid |
Uploaded | August 13, 2022 |
Rating | 3 |
Size | 2,325 Kb |
Views | 20,240 |
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 |
20 Die | 2,944 Kb |
Codecademy Flipboard | 3,793 Kb |
Tip Calculator | 2,915 Kb |
Playing with slide out drawers | 2,812 Kb |
Bootstrap Carousel | 2,215 Kb |
Comment Jquery | 2,421 Kb |
One-page Scrolling with animations | 2,372 Kb |
Coin Flip | 2,142 Kb |
Giphy API Random Gif Selector | 2,636 Kb |
Embedded video header | 2,670 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 |
Portfolio Landing Page | FDfranklin | 3,585 Kb |
Ball Physics | Getsetbro | 3,149 Kb |
Email Marketing Mock | Kristenzirkler | 8,224 Kb |
Flexbox playground | Enxaneta | 5,418 Kb |
Yuliya v krylova | Rafszul | 37,351 Kb |
Barber Shop | Bhlaird | 6,270 Kb |
Toggle Time | Petebot | 5,345 Kb |
SnappySnippet Test | Elmsoftware | 8,385 Kb |
Wikipedia Viewer | Thomasvaeth | 2,549 Kb |
Sort the Knowlege | Eprouver | 3,915 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!