The Easy Way To Create Parallax Scrolling
Parallax Scrolling — also known as “Asymmetrical scrolling”, is a technique many web developers use to add a 2D scroll effect to web applications. It’s visually appealing without adding additional clutter to your web design layout. In addition, it’s a great way to catch the viewer’s eye, who could ask for anything more!?
I spent no more than 30 minutes creating this simple one page parallax scroll landing site. Incorporating images I found online for visual aid and using the Data AOS tool, I was able to easily add simplistic additional movement to this static page and create the base to a beautiful web application.
Want to see how? — Keep reading to see for more code, resources, and more!
To Begin —Creating a folder structure similar to the one below.
In a folder titled Parallax-Scrolling I have created an index.html and an assets folder. In my assets folder in my css, images, and script. As seen, I have included a standard reset.css document (the code for the reset.css is not included in this tutorial but can be found easily online).
THE CODE — HTML:
To Begin, open your index.html file — In my <head> </head> tags I have included the links to my title, Data AOS, meta settings, css stylesheets, google fonts, JavaScript, and jQuery (as seen below).
<!DOCTYPE html>
<html lang="en-us"><!-- Head Of Website -->
<head><!-- AOS Stylesheet -->
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<!-- My CSS Stylesheet Links -->
<meta charset="utf-8">
<meta name=“viewport” content=“width=device-width, initial-scale="1.0">
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<title> Parallax Scrolling </title><!-- Google Font Links -->
<link href="https://fonts.googleapis.com/css?family=Lato:300|Open+Sans:700|Julius+Sans+One|Playfair+Display:700|Satisfy" rel="stylesheet"><!-- Link to AOS.js -->
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script><!-- JavaScript & jQuery Links -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="assets/script/script.js"></script>
</head>
In the<body> </body> tag I have included 3 sections, each with an id of 00, 01, and 02 to define them. Inside each of those sections I have created a div with a class of “parallax-div” and additional div nested inside of that with a class of “leading-statement” and a <p> tag with text (as seen below).
<!-- Body of Website -->
<body id="index-body">
<!-- Parallex Scroll 00 -->
<section id="00"><div class="parallax-div parallax-div-00">
<!-- <img src="assets/images/portfolio/surf-blog-media.jpg"> -->
<div class="leading-statement statement-00">
<p data-aos="fade-up"> Parallax Scrolling </p>
</div>
</div></section><!-- Parallex Scroll 01 -->
<section id="01"><div class="parallax-div parallax-div-01">
<div class="leading-statement statement-01"><p data-aos="fade-up"> A simple way to add something spectacular to your website </p>
</div></div></section><!-- Parallex Scroll 02 -->
<section id="02"><div class="parallax-div parallax-div-02">
<div class="leading-statement statement-02"><p data-aos="fade-up"> This is some next level shit </p>
</div></div></section></body>
</html>
THE CODE — CSS:
The css code is where the magic happens! Watch as three lines of text printed on the page come to life through parallax scrolling. Below is the initial styling for each “leading statement” class. I used the google font family of “Lato” and gave the text a max width of 70% so it will automatically wrap onto the next line when the text length exceeds that amount. Under that, I target the section 01 and 02 more specifically to add additional small adjustments to the text size and padding to perfect the UI.
/* ============================================================== */
/* ===================== PARALLAX SCROLL ======================== *//* the general setting for the TEXT in the parallax scroll */.leading-statement{
font-family:"Lato", sans-serif;
color:white;
letter-spacing:1px;
text-transform:uppercase;
font-size: 60px;
width:70%;
margin:auto;
padding-top:16%;
text-align: center;
}/* adding slight TEXT adjustments to other text boxes */
.statement-01{
font-size: 45px;
padding-top:12%;
}.statement-02{
font-size: 55px;
padding-top:15%;
}
The last part of the css is targeting the divs with the class of “parallax-div” in sections 00, 01, and 02. Here we begin by creating the background settings for each section. In my “images” folder I have 3 images each labeled “background-00.jpg”, “background-01.jpg”, and “background-02.jpg” I am targeting these specific images for each section of the parallax as show below. In addition I have given them each a background-attachment of “fixed” so that the stick to the background on scroll. Margin, height, and width has been incorporated as well to specify the dimensions of each section.
/* Section 00 -------------------------------------------- */
/* settings for parallax div 00 */
.parallax-div-00 {
background: url("../images/background-00.jpg");
width:90%;
margin:5% 5% 0 5%;
height:400px;
background-repeat:no-repeat;
background-size:cover;
background-attachment: fixed;
transition:.4s ease-in-out;
}/* Section 01 -------------------------------------------- */
/* settings for parallax div 01 */
.parallax-div-01 {
background: url("../images/background-01.jpg");
width:90%;
margin-left:5%;
margin-top:5%;
height:400px;
background-repeat:no-repeat;
background-size:cover;
background-attachment: fixed;
transition:.4s ease-in-out;
}/* Section 02 -------------------------------------------- */
/* settings for parallax div 02 */
.parallax-div-02 {
background: url("../images/background-02.jpg");
width:90%;
margin:5% 5%;
height:400px;
background-repeat:no-repeat;
background-size:cover;
background-attachment: fixed;
transition:.4s ease-in-out;
}
THE CODE — JS:
In my folder titled “script” I created a document called script.js. In that doc I have incorporated the the Data AOS transition script to define the time it will take my elements to load in. Below I have also attached the link AOS for additional documentation reference.
// Document Ready
$( document ).ready(function() {// AOS Transition Time
AOS.init({
duration: 1200,
})}); //end document ready
It’s that simple! Here is a quick giphy of the final product! Please let me know if you have any questions or comments regarding the code. Good luck!
