How to Create Scrolling on Your Website Using CSS

Technical writer

CSS HTML

20.01.2025

Reading time: 8 min

Do you want to add parallax and scrolling effects to your page but don’t know where to start? You don’t need to jump straight into JavaScript—simpler options are available. In this article, we’ll explain how to achieve this using CSS alone and clarify which browsers might not support these effects.

Smooth Scrolling

To create simple scrolling from one part of the page to another, use the CSS property scroll-behavior.

Use the CSS property scroll-behavior to create simple scrolling from one part of the page to another. Here are its main values:

auto: The default behavior.
smooth: Enables smooth transitions.
instant: Enables quick transitions.

Here’s what CSS code looks like with the second value (smooth) applied to a conditional p selector:

p {
  scroll-behavior: smooth;
}

Next, we’ll demonstrate how to create a smooth transition from one part of a site to another using the smooth value. In this example, the user will see the transition when clicking a hyperlink that leads to another section of the page.

Step 1. Create two blocks with links to each other:

<html>
<body>
<head></head>

<h1>Smooth Scrolling</h1>

<div class="main" id="block1">
  <h2>Block 1</h2>
  <p>Click the hyperlink to see smooth scrolling.</p>
  <a href="#block2">Click here to go to Block 2.</a>
</div>

<div class="main" id="block2">
  <h2>Block 2</h2>
  <a href="#block1">Click here to go to Block 1.</a>
</div>

</body>
</html>

Step 2. Add smooth scrolling using CSS code inside the <head> tag. The code will include the scroll-behavior property with the value smooth. Additionally, set colors and heights for the different text sections: pink and yellow.

<head>

<style>
html {
  scroll-behavior: smooth;
}

#block1 {
  height: 1000px;
  background-color: #ffa3f6;
}

#block2 {
  height: 1000px;
  background-color: #fffc9c;
}
</style>

</head>

Thanks to the smooth value, smooth scrolling is implemented on the web page.

If You Need Parallax

Parallax is an effect where background elements move faster or slower than objects in the foreground. For example, as a user scrolls a page, the background image may move at one speed while the text moves at another.

In this case, we’ll ensure the background image doesn’t move at all during scrolling.

Step 1. Write the HTML code, which includes a large purple text block:

<html>
<head></head>

<body>

<h1>Scroll Further Down the Page</h1>

<div class="paral"></div>

<div style="height:550px;background-color:#bf89e0;font-size:50px">
This text is included simply to demonstrate the effect. Try scrolling up and down. The text block will move, but the image will remain stationary.
</div>

<div class="paral"></div>

</body>
</html>

Step 2. Add the CSS code. It will include a link to an image that becomes the background using the background-attachment: fixed property.

<style>

body, html {
  height: 90%;
}

.paral {
  background-position: center;
  background-attachment: fixed;
  background-size: cover;

  background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80');
  
  height: 90%;
}

</style>

As a result, the parallax effect is implemented on the page.

Note. To remove this effect, simply replace background-attachment: fixed with background-attachment: scroll in the code. The image will then move along with the text.

Additional Examples

To better understand CSS properties, let’s explore other scrolling effects for a website.

Example 1

Here’s a step-by-step guide to achieving a multi-layered scrolling effect. In this case, multiple objects on the site will move at different speeds during scrolling.

Step 1. Write two sections in the following way:

<html>
<head></head>

<body>
<section class="block1">
  <h1>Block 1</h1>
</section>
<section class="block2">
  <h1>Block 2</h1>
</section>
</body>
</html>

Step 2. Add CSS code inside the <head> tag. First, define the parameters and select a background from a free photo stock for Block 2:

<head>
<style>
section {
  position: absolute;
  min-height: 90vh;
  width: 100%;
  transform-style: inherit;
  position: relative;
}

.block1 {
  z-index: 2;
  background: #ff9012;
}

.block2::before {
  background: url(https://images.unsplash.com/photo-1536308037887-165852797016?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=826&q=80) top center;
  content: '';
  top: 0; left: 0; right: 0; bottom: 0;
  position: absolute;
  display: block;
  transform: translateZ(-0.5px) scale(2);
  z-index: -2;
  background-size: cover;
}
</style>
</head>

Step 3. Specify the parameters for the headings:

<head>
<style>
h1 {
  font-size: 3.7rem;
  position: absolute;
  padding: 0.8rem;
  background: #fffcfc;
  transform: translateZ(-1px) scale(1) translate(-25%, -25%);
  top: 49%;
  left: 49%;
  text-align: center;
}

.block1 h1 {
  z-index: 2;
  transform: translate(-49%, -49%);
}

.block2 h1 {
  z-index: 2;
  transform: translateZ(-0.4px) scale(1.2) translate(-39%, -39%);
}
</style>
</head>

Step 4. Define the parameters for other elements:

<head>
<style>
*,
*::before,
*::after,
:root {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 95%;
  overflow: hidden;
}

body {
  height: 95%;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 0.8px;
  transform-style: preserve-3d;
  font-size: 40%;
  font-family: 'PT Astra Sans';
}
</style>
</head>

As a result, the website will have three moving objects. Here they are, ranked from slowest to fastest:

The background image of Block 2.
The "Block 2" heading.
Block 1 with the orange background.

This is how multi-layered scrolling looks in action.

Example 2

Let’s look at how to fix an element on a webpage during scrolling. For instance, hostman.com has such pinned elements:

Step 1. Write HTML with two text blocks like this:

<html>
<head></head>

<body>
<h1>Fixed Element</h1>
<div class="extra"></div>

<div class="wrap">
  <div class="elem">
    Element
  </div>
</div>
</body>
</html>

Step 2. Add the following CSS inside the <head> tag:

<head>
<style> 
body {
  font-family: Times New Roman;
}

h1 {
  text-align: justify;
}

.wrap {
  background-color: #52ff83ab;
  width: 90%;
  height: 2000px;
  margin: 30px;
}

.elem {
  background: #6052ff;
  width: 150px;
  height: 150px;
  color: #fcfcfc;
  align-items: center;
  justify-content: center;
  display: flex;
  position: fixed;
}
</style> 
</head>

When using the position: fixed property, the element remains visible and moves along with scrolling.

Example 3

This time, let’s create horizontal scrolling.

Step 1. Create four text blocks like this:

<html>
<head></head>

<body>
<div id="container">
  <div id="container2">
    <div class="type one"><div>One</div></div>
    <div class="type two"><div>Two</div></div>
    <div class="type three"><div>Three</div></div>
    <div class="type back"><div>Four</div></div>
  </div>
</div>
</body>
</html>

Step 2. Add the following CSS inside the <head> tag. This code defines the size and color of the text blocks:

<head>
<style> 
body {
  font-family: PT Astra Sans;
  margin: 0;
}

#container .type {
  position: relative;
  display: inline-block;
  width: 150vw;
  height: 99vh; 
}

#container .type > div {
  position: relative;
  width: 99px;
  height: 99px;
  color: #080808;
  line-height: 0.8;
  top: 48%;
  left: 48%;
  font-weight: bold;
  font-size: 96px;
}

#container {
  position: absolute;
  overflow-x: scroll;
  overflow-y: scroll;
  transform: rotate(270deg) translateX(-100%);
  transform-origin: top left;
  background-color: #ccc;
  width: 99vh;
  height: 99vw;
}

#container2 {
  transform: rotate(90deg) translateY(-98vh);
  transform-origin: top left;
  white-space: nowrap;
}

.one {
  background-color: #00ff48;
}

.two {
  background-color: #ff00d5;
}

.three {
  background-color: #f00;
}

.back {
  background-color: #fff71c;
}
</style>
</head>

This creates a horizontally scrolling page divided into several sections with text.

Conclusion

Creating scrolling effects is a straightforward process. With just CSS properties, you can implement unique transitions between sections of a website during scrolling.

The code may be lengthy in some cases, such as multi-layered scrolling where each section moves at a different speed. However, this is still simpler and more efficient than using JavaScript for similar effects.

Check out our reliable and high-performance WordPress hosting solutions for your websites.

CSS HTML

20.01.2025

Reading time: 8 min

Similar

CSS

How to Create Scrolling on Your Website Using CSS

Smooth Scrolling

If You Need Parallax

Additional Examples

Example 1

Example 2

Example 3

Conclusion

Similar

How to Create a Sticky Footer Using CSS

Customizing Scrollbars in CSS

How to Create a Draggable Element

Do you have questions, comments, or concerns?

Do you have questions,
comments, or concerns?