Es un efecto de animación fácil y sorprendente creado con HTML y CSS, donde las fotos se mueven horizontalmente una por una como un rodillo. Cuando el puntero del mouse llega a la foto, la foto específica deja de moverse.
Enfoque: la idea básica de estas animaciones proviene del efecto de desplazamiento de la animación CSS. Veamos cómo funciona el código.
Código HTML: las fotos se moverán en un anillo circular usando HTML. Para crear la animación, hemos tomado un «div» y una sección para mantener el área de las fotos correctamente y el nombre de la clase se usa en el código CSS. Utilizamos la figura HTML y la etiqueta img para las fotos que se mostrarán en la página.
HTML
<!DOCTYPE html> <html> <body> <div class="addition"> <section class="slideshow"> <div class="content"> <div class="content-carrousel"> <figure class="shadow"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20201105170558/geeks112.png"> </figure> <figure class="shadow"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20201105170611/geeks28.png"> </figure> <figure class="shadow"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20201105170619/geeks33.png"> </figure> <figure class="shadow"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20201105170627/geeks41.jpg"> </figure> <figure class="shadow"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20201105170635/geeks51.jpg"> </figure> <figure class="shadow"> <img src= "https://media.geeksforgeeks.org/wp-contentuploads/20201105170644/geeks61.jpg"> </figure> </div> </div> </section> </div> </body> </html>
Código CSS: Hablemos de la parte CSS del código. Se utilizan algunos atributos básicos como margen, relleno, posición, flotación, borde, animación, etc., que ayudarán a las fotos a darles la posición correcta. Ayuda a rotar las fotos en 2D. Primero gira alrededor de su propio eje. Luego, todo el «div» gira alrededor de su eje.
Para crear esta animación, se utiliza la propiedad figure:nth-child(“no. of child”) . El transform:rotateY(cantidad de grados) y translateZ(–px) son los dos atributos de CSS que ayudan a rotar el objeto.
CSS
<style>
body {
background-color: #000000;
}
.addition {
margin-left: 35%;
margin-top: 10%;
}
.slideshow {
position: centre;
margin: 0 auto;
padding-top: 50px;
height: 250px;
background-color: rgb(10, 10, 10);
box-sizing: border-box;
}
.content {
margin: auto;
width: 190px;
perspective: 1000px;
position: relative;
padding-top 80px;
}
.content-carrousel {
padding-left: 40px;
/* This helps to rotate the
photo div with respest to
axis of an another circle */
width: 100%;
position: absolute;
float: right;
animation: rotar 15s infinite linear;
transform-style: preserve-3d;
}
.content-carrousel:hover {
/* This is a hover effect.
when the mouse will reach
on the photo, the photo
will stop moving */
animation-play-state: paused;
cursor: pointer;
}
.content-carrousel figure {
/* width of the full image div*/
width: 100%;
/* height of the full image div*/
height: 120px;
border: 1px solid #4d444d;
overflow: hidden;
position: absolute;
}
/* The calculation part starts for the angle.
first, take the number of photos and then divide
by 360 and write it in the position of degree */
.content-carrousel figure:nth-child(1) {
transform: rotateY(0deg) translateZ(300px);
}
.content-carrousel figure:nth-child(2) {
transform: rotateY(60deg) translateZ(300px);
}
.content-carrousel figure:nth-child(3) {
transform: rotateY(120deg) translateZ(300px);
}
.content-carrousel figure:nth-child(4) {
transform: rotateY(180deg) translateZ(300px);
}
.content-carrousel figure:nth-child(5) {
transform: rotateY(240deg) translateZ(300px);
}
.content-carrousel figure:nth-child(6) {
transform: rotateY(300deg) translateZ(300px);
}
.content-carrousel figure:nth-child(7) {
transform: rotateY(360deg) translateZ(300px);
}
.slideshow {
position: absolute;
box-shadow: 0px 0pz 20px 0px #000;
border-radius: 2px;
}
.content-carrousel img {
image-rendering: auto;
/* The photo will move
with this velocity */
transition: all 300ms;
/* width of the photo */
width: 100%;
/* height of the photo */
height: 100%;
}
.content-carrousel img:hover {
transform: scale(1.2);
transition: all 300ms;
}
@keyframes rotar {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
</style>
Código final: en esta sección, combinaremos las dos secciones anteriores (HTML y CSS) de código.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #000000;
}
.addition {
margin-left: 35%;
margin-top: 10%;
}
.slideshow {
position: centre;
margin: 0 auto;
padding-top: 50px;
height: 250px;
background-color: rgb(10, 10, 10);
box-sizing: border-box;
}
.content {
margin: auto;
width: 190px;
perspective: 1000px;
position: relative;
padding-top 80px;
}
.content-carrousel {
padding-left: 40px;
width: 100%;
position: absolute;
float: right;
animation: rotar 15s infinite linear;
transform-style: preserve-3d;
}
.content-carrousel:hover {
animation-play-state: paused;
cursor: pointer;
}
.content-carrousel figure {
width: 100%;
height: 120px;
border: 1px solid #4d444d;
overflow: hidden;
position: absolute;
}
.content-carrousel figure:nth-child(1) {
transform: rotateY(0deg) translateZ(300px);
}
.content-carrousel figure:nth-child(2) {
transform: rotateY(60deg) translateZ(300px);
}
.content-carrousel figure:nth-child(3) {
transform: rotateY(120deg) translateZ(300px);
}
.content-carrousel figure:nth-child(4) {
transform: rotateY(180deg) translateZ(300px);
}
.content-carrousel figure:nth-child(5) {
transform: rotateY(240deg) translateZ(300px);
}
.content-carrousel figure:nth-child(6) {
transform: rotateY(300deg) translateZ(300px);
}
.content-carrousel figure:nth-child(7) {
transform: rotateY(360deg) translateZ(300px);
}
.slideshow {
position: absolute;
box-shadow: 0px 0pz 20px 0px #000;
border-radius: 2px;
}
.content-carrousel img {
image-rendering: auto;
transition: all 300ms;
width: 100%;
height: 100%;
}
.content-carrousel img:hover {
transform: scale(1.2);
transition: all 300ms;
}
@keyframes rotar {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="addition">
<section class="slideshow">
<div class="content">
<div class="content-carrousel">
<figure class="shadow">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201105170558/geeks112.png">
</figure>
<figure class="shadow">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201105170611/geeks28.png">
</figure>
<figure class="shadow">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201105170619/geeks33.png">
</figure>
<figure class="shadow">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201105170627/geeks41.jpg">
</figure>
<figure class="shadow">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201105170635/geeks51.jpg">
</figure>
<figure class="shadow">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201105170644/geeks61.jpg">
</figure>
</div>
</div>
</section>
</div>
</body>
</html>
Producción:
