Dimterion's personal site

One of the possible ways to customize scrolling on a web site is to implement parallax scroll on it.

This effect may be a nice addition when you have a background image and want your scroll to look more stylish by making it move at a different speed than the content on top of that background.

To create this effect, you have mostly to play around with the background-related CSS properties.

Here is a basic example with three sections: two of them (first and third ones) wrap the one in the middle (second one) which has our page’s content.

HTML

<body>
  <section class="section1"></section>
  <section class="section2">CONTENT HERE</section>
  <section class="section3"></section>
</body>

We set the height of html, body and these two wrapping sections to 100%. Then we add our background image to these wrapping sections and adjust the rest of the background properties.

CSS

html,
body {
  height: 100%;
}

.section1,
.section3 {
  height: 100%;
  background-image: url("background_image_url");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.section2 {
  padding: 25px;
  background-color: #fefae0;
  color: #283618;
  font-size: 2rem;
  text-align: center;
}

This will create the parallax scroll effect on our page, making the sections scroll at a different speed.

You can check how it looks in this CodePen example.

Also, here is my Medium article about a few other methods of scrolling.

Thank you for reading.

HTML

CSS

Read my stories on Medium