Как создать эффект скольжения фото с помощью HTML и CSS?

Опубликовано: 5 Января, 2022

Это простой и удивительный эффект анимации, созданный с помощью HTML и CSS, где фотографии перемещаются по горизонтали одна за другой, как ролик. Когда указатель мыши находится на фотографии, конкретная фотография перестает двигаться.

Подход: основная идея этой анимации исходит из эффекта наведения CSS-анимации. Посмотрим, как работает код.

HTML-код: фотографии будут перемещаться по круговому кольцу с использованием HTML. Чтобы создать анимацию, мы взяли «div» и раздел, чтобы правильно поддерживать область фотографий, а имя класса используется в коде CSS. Мы использовали HTML- рисунок и тег img для фотографий, которые будут отображаться на странице.

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 > 

Код CSS: давайте поговорим о части кода CSS. Используются некоторые базовые атрибуты, такие как поля, отступы, положение, плавание, граница, анимация и т. Д., Которые помогут фотографиям придать им правильное положение. Это помогает повернуть фотографии в 2D. Сначала он вращается вокруг собственной оси. Затем весь «div» вращается вокруг своей оси.

Для создания этой анимации используется свойство figure: nth-child («кол-во детей»). Преобразование: rotateY (количество градусов) и translateZ (–px) - два атрибута 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 15 s infinite linear;
        transform-style: preserve -3 d;
    }
 
    .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( 0 deg) translateZ( 300px );
    }
 
    .content-carrousel figure:nth-child( 2 ) {
        transform: rotateY( 60 deg) translateZ( 300px );
    }
 
    .content-carrousel figure:nth-child( 3 ) {
        transform: rotateY( 120 deg) translateZ( 300px );
    }
 
    .content-carrousel figure:nth-child( 4 ) {
        transform: rotateY( 180 deg) translateZ( 300px );
    }
 
    .content-carrousel figure:nth-child( 5 ) {
        transform: rotateY( 240 deg) translateZ( 300px );
    }
 
    .content-carrousel figure:nth-child( 6 ) {
        transform: rotateY( 300 deg) translateZ( 300px );
    }
 
    .content-carrousel figure:nth-child( 7 ) {
        transform: rotateY( 360 deg) translateZ( 300px );
    }
 
    .slideshow {
        position : absolute ;
        box-shadow: 0px 0 pz 20px 0px #000 ;
        border-radius: 2px ;
    }
 
    .content-carrousel img {
        image-rendering: auto ;
 
        /* The photo will move
        with this velocity */
        transition: all 300 ms;
         
        /* width of the photo */
        width : 100% ;
         
        /* height of the photo */
        height : 100% ;
    }
 
    .content-carrousel img:hover {
        transform: scale( 1.2 );
        transition: all 300 ms;
    }
 
    @keyframes rotar {
        from {
            transform: rotateY( 0 deg);
        }
 
        to {
            transform: rotateY( 360 deg);
        }
    }
 </style>

Окончательный код: в этом разделе мы объединим два вышеуказанных раздела (HTML и CSS) кода.

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 > 

Выход:

Вопросы о Web технологиях HTML CSS-Misc HTML-Misc CSS

Как создать эффект скольжения фото с помощью HTML и CSS?

HTML

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ