Simple Parallax Scrolling Effect with CSS & Vanilla JavaScript

This code snippet provides a simple and effective way to implement a parallax scrolling effect on a web page using CSS and Vanilla JavaScript. It sets the stage for the parallax effect by defining styles for various elements. The header element utilizes a background image and fixed positioning to create an immersive visual backdrop. The footer element is positioned off-screen initially but smoothly animates into view as the user scrolls.

If you’re a web designer looking to make your websites more exciting with cool scrolling effects, this code is just what you need! It’s like a handy tool that helps you create captivating parallax scrolling effects without any complicated stuff.

You don’t have to worry about using fancy libraries or frameworks because this code works great with plain and simple Vanilla JavaScript. It’s super easy to understand and implement, making your web pages look awesome with minimal effort.

How to Create a Simple Parallax Scrolling Effect with CSS & Vanilla JavaScript

1. First, create the HTML structure for your web page. Include the necessary elements such as the header, content section, and footer. Here’s an example:

<div id="scroll-animate">
  <div id="scroll-animate-main">
    <div class="wrapper-parallax">
      <header>
        <h1>Header</h1>
      </header>

      <section class="content">
        <h1>Content</h1>
      </section>

      <footer>
        <h1>Footer</h1>
      </footer>
    </div>
  </div>
</div>

2. Next, apply the provided CSS styles to your HTML elements. The CSS styles define the appearance and behavior of the header, footer, and other relevant elements. Copy and paste the provided CSS code into a separate CSS file or include it within a <style> tag in the head section of your HTML.

#scroll-animate
{
  overflow: hidden;
}

#scroll-animate-main
{
  width: 100%;
  left: 0;
  position: fixed;
}

#heightPage,
#heightScroll
{
  width: 10px;
  top: 0;
  position: absolute;
  z-index: 99;
}

#heightPage
{
  left: 0;
}

#heightScroll
{
  right: 0;
}

header
{
  width: 100%;
  height: 100%;
  background: url(https://raw.githubusercontent.com/hudsonmarinho/header-and-footer-parallax-effect/master/assets/images/bg-header.jpg) no-repeat 50% 50%;
  top: 0;
  position: fixed;
  z-index: -1;
}

footer
{
  width: 100%;
  height: 300px;
  background: gray;
  bottom: -300px;
  position: fixed;
  z-index: -1;
}

.content
{
  height: 1000px;
  min-height: 1000px;
  background: #ededed;
  position: relative;
  z-index: 1;
}

.wrapper-parallax {
  margin-top: 100%;
  margin-bottom: 300px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}

h1{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  text-align: center;
  font-family: Helvetica;
  font-size: 150px;
  color: #fff;
}

header h1{}

.content h1{
  line-height: 1000px;
  color: #999;
}

footer h1
{
  line-height: 300px;
}

header,
footer,
#scroll-animate-main
{
  -webkit-transition-property: all;
     -moz-transition-property: all;
      transition-property: all;

  -webkit-transition-duration: 0.4s;
     -moz-transition-duration: 0.4s;
      transition-duration: 0.4s;

  -webkit-transition-timing-function: cubic-bezier(0, 0, 0, 1);
     -moz-transition-timing-function: cubic-bezier(0, 0, 0, 1);
      transition-timing-function: cubic-bezier(0, 0, 0, 1);
}

3. Now, let’s add the JavaScript code to enable the parallax scrolling effect. Place the provided JavaScript code inside a <script> tag at the end of the HTML body or link it from an external JavaScript file.

function scrollFooter(scrollY, heightFooter) {
  console.log(scrollY);
  console.log(heightFooter);

  if (scrollY >= heightFooter) {
    document.querySelector('footer').style.bottom = '0px';
  } else {
    document.querySelector('footer').style.bottom = '-' + heightFooter + 'px';
  }
}

window.addEventListener('load', function() {
  var windowHeight = window.innerHeight,
      footerHeight = document.querySelector('footer').offsetHeight,
      heightDocument = windowHeight + document.querySelector('.content').offsetHeight + footerHeight - 20;

  // Definindo o tamanho do elemento pra animar
  document.querySelector('#scroll-animate').style.height = heightDocument + 'px';
  document.querySelector('#scroll-animate-main').style.height = heightDocument + 'px';

  // Definindo o tamanho dos elementos header e conteúdo
  document.querySelector('header').style.height = windowHeight + 'px';
  document.querySelector('header').style.lineHeight = windowHeight + 'px';

  document.querySelector('.wrapper-parallax').style.marginTop = windowHeight + 'px';

  scrollFooter(window.scrollY, footerHeight);

  // ao dar rolagem
  window.onscroll = function() {
    var scroll = window.scrollY;

    document.querySelector('#scroll-animate-main').style.top = '-' + scroll + 'px';
    document.querySelector('header').style.backgroundPositionY = 50 - (scroll * 100 / heightDocument) + '%';

    scrollFooter(scroll, footerHeight);
  }
});

That’s all! hopefully, you have successfully created a simple parallax scrolling effect with CSS & Vanilla JavaScript. If you have any questions or suggestions, feel free to comment below.