How to create Horizontal Scroll Snap Using HTML and CSS ?

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

scroll-hp

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>

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #2e8b57; /* Dark green background */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    color: white;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

.main_box {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    width: 300px; /* Small width to ensure scrolling */
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border-radius: 10px;
}

.main_box a {
    flex: 0 0 auto;
    scroll-snap-align: center;
    margin-right: 10px;
}

.main_box img {
    width: 150px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.main_box a:last-child {
    margin-right: 0;
}

Output:

scroll-hp

How to create Horizontal Scroll Snap Using HTML and CSS ?

R

rahulmahajann

Improve

Article Tags :

Similar Reads

How to Create Scrollable Horizontal Menu using CSS?

The scrollable horizontal menu is suitable for various screen sizes. To create a scrollable horizontal menu using CSS, you can make use of the overflow property on a container.Syntaxwhite-space: nowrapoverflow: auto;HTML<!DOCTYPE html> <html> <head> <style> div.scrollmenu { b

How to create horizontal scrollable sections using CSS ?

In this article, we will see how we can create a horizontal scrollable section using CSS. We are going to make different sections and make them horizontally scrollable using CSS. HTML code is used to create the basic structure of the sections and CSS code is used to set the style. HTML Code: In this

How to create an image gallery with a horizontal scrollbar using CSS ?

In this article, we will learn how to create an image gallery with a horizontal scrollbar using CSS. It provides a way to navigate through a set of images, on scroll horizontally to view different pictures. This effect is helpful when space optimization of the web page is a concern that efficiently

How to Create an Image Gallery with a Horizontal Scrollbar using CSS?

Image galleries are essential tools for showcasing multiple images within a single container on a website. They allow users to view a collection of images in an organized way. When we use the horizontal scrollbar, then we can reduce the space. In this tutorial, we will go through the steps on how to

How to Make a Div Horizontally Scrollable using CSS?

Creating a horizontally scrollable <div> is a practical CSS technique used to handle wide content such as image galleries, tables, or long text blocks without breaking the layout. Instead of wrapping or shrinking content, horizontal scrolling allows users to scroll sideways and view hidden ele

How to Create Shrink Header on Scroll using HTML, CSS and JavaScript ?

The Shrink Navigation bar works when the user scrolls down the page. In this article, we will use HTML, CSS, and JavaScript to design a shrink navigation bar. HTML is used to create the structure, and CSS is used to set the style of the HTML structure to make it looks good. This kind of shrinking na

How to Create a Horizontal Navigation Bar in HTML and CSS?

Creating a horizontal navigation bar in HTML and CSS involves using an unordered list (<ul>) for navigation items and applying CSS to style them for a horizontal layout. We will create a horizontal navigation bar using HTML and CSS, including styling for layout, spacing, and appearance, as wel

How to Create a Custom Scrollbar using CSS?

Scrollbars are common graphical user interface elements that allow users to navigate content beyond the visible area. By default, web browsers provide basic scrollbars with a predefined style. However, using HTML and CSS, you can customize the scrollbar to match your website's design better.Scrollba

How to create swinging Image Hanger using HTML and CSS ?

In this article, we will learn how to create a type of Image Hanger that undergoes a swinging motion using HTML and CSS. This can be used to add interactivity to the page or highlight an image to draw attention.Approach:We will first create an HTML file in which we are going to add an image for our

How to Add Horizontal Scroll Bar in HTML Table?

When working with tables that have a lot of columns or when the content inside the cells is too wide to fit within the viewport, it is frequently necessary to add a horizontal scroll bar to an HTML table. This ensures that the table maintains its usability and readability without affecting the webpa