Слайдер с меняющимися фото на CSS

Слайдер с меняющимися фото на CSS

Owebs
29 июля 2022
Просмотры 111
Рейтинг
Время чтения Время чтения: 6 минут

Оглавление
Развернуть Свернуть
Пхи-Пхи Тайланд

Пхи-Пхи — один из самых популярных экскурсионных курортов в Таиланде. Огромное количество туристов приезжает сюда ежедневно на однодневную экскурсию — посмотреть на красивые скалы, поваляться на белоснежном песочке и покупаться в чистейшей воде, которая переливается всеми оттенками бирюзового.

Каменный лес Мадагаскар

Каменный лес Мадагаскара становится все более популярным у туристов и любителей экстрима. Здесь есть подвесные мосты и смотровые площадки, позволяющие насладиться великолепной панорамой этого сказочного места.

Большой каньон

Большой каньон — один из глубочайших каньонов в мире. Находится на плато Колорадо, штат Аризона, США, на территории национального парка «Гранд-Каньон».

Маттерхорн

Ма́ттерхорн — вершина в Пеннинских Альпах на границе Швейцарии в кантоне Вале и Италии в провинции Валле-д’Аоста. Высота вершины составляет 4478 метров над уровнем моря.

Данный слайдер полностью выполнен на CSS (свойство - animation) без использования JS и других скриптов.

Ниже представлен HTML код слайдера:

HTML:
              <div class="slideanimation">
    <div class="slideanimation-item">
        <img src="photo-1.jpg" alt="">
        <div class="slideanimation-item-text">
            <h5>Здесь заголовок слайда</h5>
            <p>Здесь пишем описание слайда</p>
        </div>
    </div>
    <div class="slideanimation-item">
        <img src="photo-2.jpg" alt="">
        <div class="slideanimation-item-text">
            <h5>Здесь заголовок слайда</h5>
            <p>Здесь пишем описание слайда</p>
        </div>
    </div>
    <div class="slideanimation-item">
        <img src="photo-3.jpg" alt="">
        <div class="slideanimation-item-text">
            <h5>Здесь заголовок слайда</h5>
            <p>Здесь пишем описание слайда</p>
        </div>
    </div>
    <div class="slideanimation-item">
        <img src="photo-4.jpg" alt="">
        <div class="slideanimation-item-text">
            <h5>Здесь заголовок слайда</h5>
            <p>Здесь пишем описание слайда</p>            
        </div>
    </div>
</div>

            

Далее мы берем и копируем следующие стили:

CSS:
 .slideanimation {
    width: 100%;
    height: 499px;
    position: relative;
    overflow: hidden;
    background: #111;
    margin: 15px 0;
}
.slideanimation-item {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    animation: slideanim 40s infinite;
    pointer-events: none;
}
.slideanimation-item:nth-child(1),
.slideanimation-item:nth-child(1) img {
    animation-delay: 0;
}
.slideanimation-item:nth-child(2),
.slideanimation-item:nth-child(2) img {
    animation-delay: 10s;
}
.slideanimation-item:nth-child(3),
.slideanimation-item:nth-child(3) img {
    animation-delay: 20s;
}
.slideanimation-item:nth-child(4),
.slideanimation-item:nth-child(4) img {
    animation-delay: 30s;
}
.slideanimation-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: zoom 40s infinite;
}
.slideanimation-item-text {
    max-width: 65%;
    position: absolute;
    bottom: 15px;
    left: 15px;
    background-color: rgb(25 24 24 / 61%);
    color: #ebebeb;
    padding: 15px 25px;  
}
.slideanimation-item-text h5 {
    font-size: 25px;
    margin: 0 0 15px 0;
    color: #9fd2fb;
}
.slideanimation-item-text p {
    font-size: 16px;
    margin-bottom: 15px;
	color: white;
}
@keyframes slideanim {
    12.5%{
        opacity: 1;
        pointer-events: auto;
    }
    25%{
        opacity: 1;
        pointer-events: auto;
    }    
    37.5%{
        opacity: 0;
    }
}
@keyframes zoom {
    50%{
        transform: scale(1.3);
    }    
}
@media screen and (max-width: 1100px){
    .slideanimation-item-text{
        max-width: 75%;
    }
}
@media screen and (max-width: 456px){
    .slideanimation-item-text {
        bottom: 0;
        left: 0;
        max-width: 100%;
    }
    .slideanimation-item-text h5 {
        font-size: 18px;
    }
    .slideanimation-item-text p {
        font-size: 13px;
    }
}
            
Подробнее о коде:

Код работает таким образом, что на каждый из слайдов выделено по 10 секунд.  Всего их 4 штуки. Следовательно, общая продолжительность анимации - 40 секунд. Данные показатели указываются в: animation: slideanim 40s infinite и animation: zoom 40s infinite.

В каждом слайде устанавливается задержка, которая указана к class - .slideanimation-item:nth-child(1), .slideanimation-item:nth-child(1) img и др.

Далее мы должны установить значения для самой анимации: slideanim:

  • 12.5% {opacity: 1} - данный % мы получаем путем уравнения: 100 делим на количество слайдов (4 шт), далее все это делим на 2. Этот параметр отвечает за переход с полной прозрачности в видимую область.
  • 25% {opacity: 1} - данный % мы получаем путем уравнения: 100 делим на количество слайдов (4 шт). Этот параметр отвечает за показ непрозрачного слайда.
  • 37.5% {opacity: 0} - данный % получается при сложении двух предыдущих показателей. Он отвечает за возвращение слайда в прозрачность.

Далее мы устанавливаем значения для анимации в zoom:

  • 50% {transform: scale(1.3)} - данный % мы получаем путем уравнения: 100 делим на количество слайдов (4 шт), далее все это умножаем на 2. Параметр отвечает за увеличение фото.

К примеру, если надо сделать анимацию для 10 слайдов, то CSS будет выглядеть следующим образом:

 @keyframes slideanim {
    5%{
        opacity: 1;
        pointer-events: auto;
    }
    10%{
        opacity: 1;
        pointer-events: auto;
    }    
    15%{
        opacity: 0;
    }
}
@keyframes zoom {
    20%{
        transform: scale(1.3);
    }    
}
            
Ow
Имя:
Комментарий:
Развернуть все Скрыть
Декор Декор

Популярные Популярные

Анимированный индикатор для пунктов меню на сайте
Просмотры 183
Рейтинг 15
8 декабря
5 месяцев назад

Расскажем как написать анимированный индикатор для пунктов меню на сайте. Так портал станет более интерактивным и привлекательным для пользователей.

Оформления блока акций через CSS
Просмотры 344
Рейтинг 6
14 декабря
5 месяцев назад

В данном уроке будем стилизовать текст для объявлений об акции. Необходимо сделать так, чтобы наше объявление привлекло потенциальных покупателей

Создание сайтов через нейросети
Просмотры 366
Рейтинг 4
9 февраля
3 месяцев назад

Популярность нейросетей в 2024 году набирает обороты. Нет, они не заменяют полноценных специалистов. Зато существенно упрощают и ускоряют работу тех же копирайтеров, сеошников и дизайнеров.

Сегодня мы расскажем, какие нейросети можно использовать в работе, разберем их функционал и приведем примеры генерации.

Оставьте заявку СЕЙЧАС

Поставив галочку, Вы даете согласие на обработку ваших Персональных данных

Сookies-файлы на сайте

Наш сайт использует куки.
Продолжая им пользоваться, вы соглашаетесь на обработку данных в соответсвии с политикой конфидециальности.

Согласен