HTML5 CS3 Scroll Moves Down Then Right

If you have ever wanted to create a visually engaging scroll animation without using JavaScript, this beginner tutorial is for you. Using only HTML5 and CSS3, we will build a full-width, full-height animation where the page content scrolls right, then down, then right again – perfect for highlighting backgrounds, image slides, or portfolios.

This layout is great for personal projects, design showcases, or portfolios. And the best part? No JavaScript is required.

What We Will Build

We will create a simple layout using CSS3 animations and the @keyframes rule to achieve a scroll-like effect. Here is the motion path:

• First, scroll right across a full-screen section.
• Then, scroll down to the next screen.
• Finally, scroll right again to a third section.

This effect is often called a “scroll path” and can be built entirely with CSS animations.

HTML Structure

Copy

  <div class="container">
    <section class="screen screen1">Section 1</section>
    <section class="screen screen2">Section 2</section>
    <section class="screen screen3">Section 3</section>
  </div>

CSS3 Animations (styles.css)

Copy

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  font-family: sans-serif;
}

.container {
  display: flex;
  height: 100vh;
  width: 300vw;
  animation: moveScroll 15s linear infinite;
  position: relative;
}

.screen {
  flex: 0 0 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3em;
  color: white;
}

.screen1 { background: #1abc9c; }
.screen2 { background: #e74c3c; }
.screen3 { background: #3498db; }

@keyframes moveScroll {
  0% { transform: translateX(0); }
  33% { transform: translateX(-100vw); }
  66% { transform: translate(-100vw, -100vh); }
  100% { transform: translate(-200vw, -100vh); }
}

🃏 What You'll Build

Here’s a preview of what you’ll create — a CSS3 scrolling animation:

Screenshots and Screencast

Want to Learn More JavaScript?

While this example does not use JavaScript, if you want to take your coding skills further, I have written a beginner-friendly book:

Learning JavaScript – Available on Amazon

It is the perfect guide if you are just starting out with JavaScript and want to learn by doing.

Enroll in My Full JavaScript Course

You can also enroll in my online course:

Learning JavaScript – Full Course at Ojambo Shop

This course includes videos, code examples, and projects that walk you through JavaScript step-by-step.

Book a One-on-One Programming Tutorial

Want personalized help with HTML, CSS, or JavaScript?

I offer one-on-one programming tutorials.
Visit Contact Me Here to book your session today.

Final Thoughts

CSS3 animations can produce impressive effects without the need for JavaScript. This scroll animation is beginner-friendly and fully responsive using just HTML5 and CSS3.

Try it out and customize the animation speed, direction, or colors to suit your project.

Let me know in the comments if you would like a version that loops back or works vertically instead.