Статьи

CSS3 анимированный слайдер фотографий

Октябрь 30, 2018

Сегодня я подготовил новую великолепную демонстрацию CSS3. Это 3D-слайд-шоу, где я использовал 3D-преобразования WebKit CSS. В демоверсии вы увидите свободно плавающий 3D-объект с фотографиями. Но — вы должны использовать Chrome или Safari, чтобы увидеть все эти прелести.

Live Demo

результат загрузки

Хорошо, загрузите файлы примеров и давайте начнем кодировать!

Шаг 1. HTML

Сначала создадим основную разметку HTML. Как видите, структура, как обычно, довольно минимальная и содержит только несколько элементов DIV и IMG.

index.html

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Animated Photo Slider | Script Tutorials</title>
        <link href="css/layout.css" rel="stylesheet" type="text/css" />
        <link href="css/slider.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <header>
            <h2>CSS3 Animated Photo Slider</h2>
            <a href="http://www.script-tutorials.com/css3-animated-photo-slider/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>

        <div class="slider">
            <div class="x_rot">
                <div class="y_rot">
                    <div id="i1">
                        <img src="images/1.jpg" />
                    </div>
                    <div id="i2">
                        <img src="images/2.jpg" />
                    </div>
                    <div id="i3">
                        <img src="images/3.jpg" />
                    </div>
                    <div id="i4">
                        <img src="images/4.jpg" />
                    </div>
                    <div id="i5">
                        <img src="images/5.jpg" />
                    </div>
                    <div id="i6">
                        <img src="images/6.jpg" />
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Шаг 2. CSS

Теперь вот CSS-правила, которые превратят нашу разметку в отличный анимированный слайдер фотографий. Я уже прокомментировал CSS ниже, так что вы можете увидеть основные части этого файла.

CSS / slider.css

/* Animations with keyframes */
@-webkit-keyframes x_rot {
    0%    { -webkit-transform: rotateX(-30deg); }
    50%   { -webkit-transform: rotateX(30deg); }
    100%  { -webkit-transform: rotateX(-30deg); }
}
@-webkit-keyframes y_rot {
    0%    { -webkit-transform: rotateY(0deg); }
    50%   { -webkit-transform: rotateY(180deg); }
    100%  { -webkit-transform: rotateY(360deg); }
}

/* main styles */
.slider {
    margin: 250px auto;

    -webkit-perspective: 1000; /* setup perspective to parent */
}
.x_rot {
    -webkit-transform-style: preserve-3d;
    -webkit-animation-name: x_rot; /* setup custom animations */
    -webkit-animation-duration: 6s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
}
.y_rot {
    -webkit-transform-style: preserve-3d;
    -webkit-animation-name: y_rot; /* setup custom animations */
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
.y_rot div {
    color: rgba(0,0,0,0.9);
    height: 235px;
    left: 300px;
    opacity: 0.8;
    position: absolute;
    width: 235px;

    -webkit-border-radius: 15px;
    -webkit-transition: .3s;
}
.y_rot div#i1 {
    -webkit-transform: rotateY(0deg) translateZ(200px);
}
.y_rot div#i2 {
    -webkit-transform: rotateY(60deg) translateZ(200px);
}
.y_rot div#i3 {
    -webkit-transform: rotateY(120deg) translateZ(200px);
}
.y_rot div#i4 {
    -webkit-transform: rotateY(180deg) translateZ(200px);
}
.y_rot div#i5 {
    -webkit-transform: rotateY(240deg) translateZ(200px);
}
.y_rot div#i6 {
    -webkit-transform: rotateY(300deg) translateZ(200px);
}
.y_rot div img {
    height:235px;
    width:235px;

    -webkit-border-radius: 15px;
    -webkit-transition: .3s;
}

/* onhover effect */
.y_rot div#i1:hover,
.y_rot div#i2:hover,
.y_rot div#i3:hover,
.y_rot div#i4:hover,
.y_rot div#i5:hover,
.y_rot div#i6:hover {
    opacity: 1;
}
.y_rot div#i1:hover img,
.y_rot div#i2:hover img,
.y_rot div#i3:hover img,
.y_rot div#i4:hover img,
.y_rot div#i5:hover img,
.y_rot div#i6:hover  img{
    height:335px;
    width:335px;
    margin-left:-50px;
    margin-top:-50px;
}

/* pause main animation onhover */
.x_rot:hover {
    -webkit-animation-play-state: paused;
}
.y_rot:hover {
    -webkit-animation-play-state: paused;
}

Сегодня я опускаю стили макета страницы (layout.css). Это не важно сейчас. Файл будет доступен в упаковке.

Live Demo

результат загрузки

Вывод

Сегодня мы сделали еще одно замечательное слайд-шоу с фотографиями CSS3. Только одна заметка, как указано выше: мы использовали CSS3-анимацию с 3D-преобразованиями — и это поддерживается только в браузерах Chrome и Safari. Для получения дополнительной информации — смотрите здесь . Будем надеяться, что в следующих версиях FF это тоже будет поддерживаться. С праздником, и вы можете оставить свои комментарии здесь!

 

Источник: http://www.script-tutorials.com/css3-animated-photo-slider/

37
Share: