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
Article Tags :
Recommended Articles