Parallax Effect Background in JavaScript

Here’s a comprehensive guide on how to implement a parallax effect background in JavaScript. This effect adds depth and visual interest to your website by making the background image and content scroll at different speeds, creating an engaging user experience. Follow these steps to create your own stunning parallax effect using vanilla JavaScript.

Step 1: Include Header Assets

First, you’ll need to include necessary CSS reset in the head of your HTML document. This will help ensure consistent styling across different browsers.

<link rel="stylesheet" href="https://public.codepenassets.com/css/reset-2.0.min.css">

Step 2: Create the HTML Structure

Next, structure the HTML for your parallax effect. This includes a header section with an image and content, followed by some sample text to demonstrate the scrolling effect.

<div class="header">
  <div class="header__image" id="ParallaxImage" style="background-image: url('https://unsplash.it/1600/850?image=776');"></div>
  <div class="header__content" id="ParallaxContent">
    <h1>Parallax header</h1>
    <h4>Simple vanilla javascript</h4>
  </div>
</div>
<div class="copy">
  <h2>Example Title</h2>
  <h3>Quisque ullamcorper venenatis velit congue.</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta sagittis urna eu vulputate. Vestibulum ut turpis sem. Duis vitae nisl lobortis, suscipit dolor non, congue massa. Sed sit amet lectus at neque suscipit luctus. Nulla lorem metus, placerat id aliquet ac, facilisis sed dolor. Nulla quam felis, interdum eget pulvinar et, varius vitae dolor. Maecenas eget mi nec purus tempor fringilla a eget elit. Nunc in laoreet ligula, non cursus arcu. Maecenas vel semper est, ac vehicula ipsum.</p>
  <p>Nullam malesuada mi vehicula, semper lacus at, pharetra mi. Donec fringilla urna nunc, quis convallis ex imperdiet at. Sed lobortis rutrum nisi. Fusce feugiat varius facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dignissim, massa a pharetra pharetra, elit lectus aliquam urna, eu condimentum dui felis in quam. Quisque vestibulum semper pretium. Sed lacus massa, rutrum vel mauris a, dignissim imperdiet lacus. Quisque semper porttitor ex eu suscipit. Duis malesuada lacus in eleifend ullamcorper.</p>
  <p>Nullam sed tortor vel nulla placerat imperdiet. Suspendisse quis nisi ut neque sodales semper non nec metus. Integer sit amet lacus nibh. Fusce malesuada molestie dui, vitae cursus lacus pulvinar suscipit. Morbi iaculis orci ac quam vestibulum, sit amet dapibus sapien egestas. Praesent sed nisl felis. Aliquam erat volutpat. Fusce quis elit nibh. Phasellus maximus imperdiet turpis vel ultrices. Etiam laoreet metus leo. Nam at facilisis orci. Donec efficitur sem ac posuere elementum. Pellentesque consectetur aliquam lobortis. Pellentesque consectetur aliquam lobortis.</p>
</div>
    <script  src="./script.js"></script>

Step 3: Add CSS Styling

Now, add CSS to style the header, image, and content. This includes setting up the background image, positioning, and text styles.

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  background-color: #f2f2f2;
}

h1 {
  font-family: "Playfair Display", sans-serif;
  font-size: 110px;
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 20px 0;
}

h2 {
  font-family: "Playfair Display", sans-serif;
  font-size: 70px;
  font-weight: 900;
  color: #262626;
  margin: 0 0 10px 0;
}

h3 {
  font-family: "Lato", sans-serif;
  font-size: 24px;
  font-weight: 300;
  color: #262626;
  margin: 0 0 60px 0;
}

h4 {
  font-family: "Lato", sans-serif;
  font-size: 28px;
  font-weight: 300;
  color: #fff;
  margin: 0 0 0 0;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.header__image {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 25;
}

.header__content {
  text-align: center;
  position: relative;
  z-index: 50;
}

.copy {
  text-align: center;
  padding: 60px 25px 55px 25px;
  width: 675px;
  margin: 0 auto;
}

p {
  font-family: sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.95;
  color: #262626;
  margin: 0 0 30px 0;
}

Step 4: Implement the Parallax Effect with JavaScript

This is where the magic happens! Add the following JavaScript to create the parallax scrolling effect. This code calculates the scroll position and adjusts the position of the image and content accordingly.

function windowScroll() {
  var parallaxImage = document.getElementById('ParallaxImage'),
  parallaxContent = document.getElementById('ParallaxContent'),
  windowScrolled = window.pageYOffset || document.documentElement.scrollTop,
  speedImage = 4,
  speedContent = 6;

  parallaxImage.style.transform = 'translate3d(0, ' + windowScrolled / speedImage + 'px, 0)';
  parallaxContent.style.transform = 'translate3d(0, ' + windowScrolled / speedContent + 'px, 0)';
}

window.addEventListener('scroll', windowScroll);

Step 5: Link the JavaScript file

Add below mentioned script inside the HTML.

Congratulations! You have successfully created a parallax effect background in JavaScript. This simple yet effective technique can greatly enhance the visual appeal of your website. If you have any questions or suggestions, feel free to explore further and customize the code to fit your specific needs.