Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create Horizontal Scroll Snap Using HTML and CSS ?

  • Last Updated : 17 Mar, 2021

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

Glimse of Project:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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>

CSS code: The following is the content for the ‘style.css’ file used in the above HTML code. CSS is used to give different types of animations and effects to our HTML page so that it looks interactive to all users.  

  • Restore all the browser effects.
  • Use classes and ids to give effects to HTML elements.

style.css




*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  
body{
    background-color: rgb(4, 84, 23);
}
  
h1{
    position: absolute;
    top: 0;
    margin: 3em;
    left: 37%;
    margin-left: 0;
}
  
.main_box{
    margin: 0 auto;
    margin-top: 15em;
    display: grid;
    grid-auto-flow: column;
    padding: 1em;
    gap: 1em;
    height: 15em;
    width: 30em;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
}
  
.main_box > a{
    scroll-snap-align: center;
}
  
.main_box img{
    width: 12em;
    max-width: none;
    object-fit: contain;
    border-radius: 1em;
}

Output:

Horizontal Scroll Snap




My Personal Notes arrow_drop_up
Recommended Articles
Page :