Full Page Scroll Snap To Start

Summary

Simple demonstration of a single web page where you scroll and the sections snap to point.

I have included 4 sections… all with different gradient colours to easily separate each area.

Each section has an image placeholder on the left and some heading text on the right.

HTML

Here is the html.

<div class="container">
  <div class="slides slide1">
    <img src="https://placehold.co/400x300" alt="image placeholder" />
    <h2>I'm a web and ux designer.</h2>
  </div>
  <div class="slides slide2">
    <img src="https://placehold.co/400x300" alt="image placeholder" />
    <h2>I develop web and mobile apps.</h2>
  </div>
  <div class="slides slide3">
    <img src="https://placehold.co/400x300" alt="image placeholder" />
    <h2>I live in Brisbane Australia.</h2>
  </div>
  <div class="slides slide4">
    <img src="https://placehold.co/400x300" alt="image placeholder" />
    <h2>Please check out my social accounts.</h2>
  </div>
</div>

CSS

Here is the css.

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}
.container {
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}
.slides {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    color: white;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
.slides img {
    width: : 400px
}
.slides h2 {
    font-size: 3rem;
    font-weight: bold;
    max-width: 400px
}
.slide1 {
    background: linear-gradient(60deg, #4f4080, #9553ff)
}
.slide2 {
    background: linear-gradient(45deg, #404c80, #53ff88)
}
.slide3 {
    background: linear-gradient(90deg, #9574ff, #ff5353)
}
.slide4 {
    background: linear-gradient(150deg, #3f87a6, #f69d3c)
}

Tech and Tools

• CSS
• HTML
• JS Fiddle
• Placehold (a simple free image placeholder service) https://placehold.co/

Demo

Open demo on JS Fiddle. (Clicking the link will open up a new window.)

Link to Demo