How to create Horizontal Scroll Snap Using HTML and CSS ?
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.w3wiki.net/wp-content/uploads/20210223165952/gfglogo.png" > </ a > <!-- img-2 --> < a href = "#" > < img src = "https://media.w3wiki.net/wp-content/uploads/20210218121103/resize16136304481344613575img2-300x150.jpg" > </ a > <!-- img-3 --> < a href = "#" > < img src = "https://media.w3wiki.net/wp-content/uploads/20210215161411/w3wikiremovebgpreview-300x300.jpg" > </ a > <!-- img-4 --> < a href = "#" > < img src = "https://media.w3wiki.net/wp-content/uploads/20210223165952/gfglogo.png" > </ a > <!-- img-5 --> < a href = "#" > < img src = "https://media.w3wiki.net/wp-content/uploads/20210218121103/resize16136304481344613575img2-300x150.jpg" > </ a > <!-- img-6 --> < a href = "#" > < img src = "https://media.w3wiki.net/wp-content/uploads/20210215161411/w3wikiremovebgpreview-300x300.jpg" > </ a > </ div > </ body > </ html > |
Output: