How to create Horizontal Scroll Snap Using HTML and CSS ?

Last Updated : 30 Jul, 2024

In this project, we are going to create a simple Horizontal Scroll Snap by using HTML and CSS only.

Glimpse of Project

Approach:

The best way to animate the HTML objects is by using CSS classes and by setting the transitions at different stages.

HTML code:

Create an HTML file (index.html).
Link the CSS file in HTML that provides all the animation’s effect to our HTML. This is also placed in between the <head> tag.
Add six anchor <a> tag for creating buttons and assign particular classes to them.

HTML

<!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">   
    <link rel="stylesheet" href="style.css">
</head>
  
<body>
    <h1>Horizontal Scroll Snap</h1>
    <div class="main_box">
    <!-- img-1 -->
    <a href="#">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210223165952/gfglogo.png">
    </a>
    <!-- img-2 -->
    <a href="#">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210218121103/resize16136304481344613575img2-300x150.jpg">
    </a>
    <!-- img-3 -->
    <a href="#">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210215161411/geeksforgeeksremovebgpreview-300x300.jpg">
    </a>
    <!-- img-4 -->
    <a href="#">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210223165952/gfglogo.png">
    </a>
    <!-- img-5 -->
    <a href="#">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210218121103/resize16136304481344613575img2-300x150.jpg">
    </a>
    <!-- img-6 -->
    <a href="#">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210215161411/geeksforgeeksremovebgpreview-300x300.jpg">
    </a>
    </div>
</body>
  
</html>