Skip to content
Related Articles
Open in App
Not now

Related Articles

How to create Horizontal Scroll Snap Using HTML and CSS ?

Improve Article
Save Article
  • Last Updated : 18 Aug, 2022
Improve Article
Save Article

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=
    </a>
    <!-- img-2 -->
    <a href="#">
        <img src=
    </a>
    <!-- img-3 -->
    <a href="#">
        <img src=
    </a>
    <!-- img-4 -->
    <a href="#">
        <img src=
    </a>
    <!-- img-5 -->
    <a href="#">
        <img src=
    </a>
    <!-- img-6 -->
    <a href="#">
        <img src=
    </a>
    </div>
</body>
</html>

Output:

Horizontal Scroll Snap


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!