📜Awesome Page Scroll Effect | HTML & CSS✨

#html #css #beginners #webdev

How to make Awesome Full Page Scroll Effect using html &css Using HTML & CSS, step-by-step from scratch.
Let’s create a nice scroll animation with just 4 lines of code!

Markup

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS SNAP EFFECT</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="container">

    <section class="one">
      <h1>First Page</h1>
    </section>

    <section class="two">
      <h1>Second Page</h1>
    </section>

    <section class="three">
      <h1>Third Page</h1>
    </section>

    <section class="four">
      <h1>Web Dev</h1>
    </section>
  </div>

</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

.container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
}

section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
}

h1 {
    color: rgb(226, 226, 226);
    text-shadow: 1px 1px 4px #000;
}

.one {
    background-color: rgb(36, 164, 138);
}
.two {
    background-color: rgb(211, 79, 79);
}
.three {
    background-color: rgb(67, 91, 175);
}
.four {
    background-color: rgb(191, 64, 191);
}

🛴 Follow me on:
Facebook: https://bit.ly/3cp2S5W
YouTube: https://bit.ly/3oBQbc0
Twitter: https://bit.ly/3zejZ6f

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site