En este proyecto, vamos a crear un ajuste de desplazamiento horizontal simple usando solo HTML y CSS.
Vistazo del proyecto:
Enfoque: La mejor manera de animar los objetos HTML es usando clases CSS y configurando las transiciones en diferentes etapas.
Código HTML:
- Cree un archivo HTML (index.html).
- Vincula el archivo CSS en HTML que proporciona todo el efecto de la animación a nuestro HTML. Esto también se coloca entre la etiqueta <head>.
- Agregue seis etiquetas de anclaje <a> para crear botones y asígneles clases particulares.
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>
Código CSS: El siguiente es el contenido del archivo ‘style.css’ utilizado en el código HTML anterior. CSS se utiliza para dar diferentes tipos de animaciones y efectos a nuestra página HTML para que parezca interactiva para todos los usuarios.
- Restaura todos los efectos del navegador.
- Utilice clases e identificadores para dar efectos a los elementos HTML.
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;
}
Producción:
Ajuste de desplazamiento horizontal
Publicación traducida automáticamente
Artículo escrito por rahulmahajann y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA