Полноэкранное слайдшоу с интересным эффектом на Javascript и CSS3

Разместил: Apocalypse
Опубликовано: 9 июня 2016

Неплохое полноэкранное слайдшоу изображений с применением эффектов зуминга и растворения Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 1#: В самый низ вашего CSS вставьте:

#slideshow {
position: relative;
height: 100vh;
overflow: hidden;
background: #000;
}

#slideshow img {
position: absolute;
min-width: 100%;
min-height: 100%;
height: auto;
-webkit-transition-property: opacity,-webkit-transform;
transition-property: opacity,-webkit-transform;
transition-property: transform,opacity;
transition-property: transform,opacity,-webkit-transform;
-webkit-transition-duration: 9s,4s;
transition-duration: 9s,4s;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
opacity: 0;
}

#slideshow img:nth-child(2n+1) {
-webkit-transform-origin: top right;
transform-origin: top right;
}

#slideshow img:nth-child(3n+1) {
-webkit-transform-origin: top left;
transform-origin: top left;
}

#slideshow img:nth-child(4n+1) {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}

#slideshow img:firsh-child {
opacity: 1;
z-index: -1;
}

#slideshow .fx {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}

#slideshow {

position: relative;

height: 100vh;

overflow: hidden;

background: #000;

}

#slideshow img {

position: absolute;

min-width: 100%;

min-height: 100%;

height: auto;

-webkit-transition-property: opacity,-webkit-transform;

transition-property: opacity,-webkit-transform;

transition-property: transform,opacity;

transition-property: transform,opacity,-webkit-transform;

-webkit-transition-duration: 9s,4s;

transition-duration: 9s,4s;

-webkit-transform-origin: bottom left;

transform-origin: bottom left;

opacity: 0;

}

#slideshow img:nth-child(2n+1) {

-webkit-transform-origin: top right;

transform-origin: top right;

}

#slideshow img:nth-child(3n+1) {

-webkit-transform-origin: top left;

transform-origin: top left;

}

#slideshow img:nth-child(4n+1) {

-webkit-transform-origin: bottom right;

transform-origin: bottom right;

}

#slideshow img:firsh-child {

opacity: 1;

z-index: -1;

}

#slideshow .fx {

opacity: 1;

-webkit-transform: scale(1.2);

transform: scale(1.2);

}

2#: На нужных страницах между body и /body вставьте:

<div id="slideshow">
<img src="ССЫЛКА_НА_КАРТИНКУ" alt="img" />
<img src="ССЫЛКА_НА_КАРТИНКУ" alt="img" />
<img src="ССЫЛКА_НА_КАРТИНКУ" alt="img" />
<img src="ССЫЛКА_НА_КАРТИНКУ" alt="img" />
<img src="ССЫЛКА_НА_КАРТИНКУ" alt="img" />
<img src="ССЫЛКА_НА_КАРТИНКУ" alt="img" />
</div>

<script>
(function() {
var images = document.querySelectorAll('#slideshow img'),
imgLength = images.length,
i = 1;

function setFirst() {
images[0].className = "fx";
}
window.setTimeout(setFirst, 1000);
window.setInterval(kenBurns, 6200);

function kenBurns() {
images[i].className = "fx";
i++;
if (i === imgLength) {
i = 0;
images[imgLength - 2].className = "";
}
if (i === 1) {
images[imgLength - 1].className = "";
}
if (i > 1) {
images[i - 2].className = "";
}
}
})();
</script>

</div>

(function() {

var images = document.querySelectorAll('#slideshow img'),

imgLength = images.length,

i = 1;

function setFirst() {

images[0].className = "fx";

}

window.setTimeout(setFirst, 1000);

window.setInterval(kenBurns, 6200);

function kenBurns() {

images[i].className = "fx";

i++;

if (i === imgLength) {

i = 0;

images[imgLength - 2].className = "";

}

if (i === 1) {

images[imgLength - 1].className = "";

}

if (i > 1) {

images[i - 2].className = "";

}

})();

</script>

Автор публикации

не в сети 2 месяца

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1096Регистрация: 27-08-2018

Метки: CSS3 Javascript Slideshow Zoom Полноэкранное Слайдшоу Эффект

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Вам может также понравиться...

0 Комментарий

Старые

Межтекстовые Отзывы

Посмотреть все комментарии

Всевидящее око

Новый комментарий от пользователя Эдуард: «Забыл добавить. Снег появляется то в футере (когда ставил перед закрывающим тегом body), то наоборот почему-то в самом верху (причем сам блог сдвигался вниз), когда ставил его после открывающего тега, как было указано в статье.» в материале Приятный Новогодний снежок на HTML5 Canvas

2024-12-29 16:26:03

VVL99

Всех с новым годом!

2025-01-02 17:46:18

Всевидящее око

Новый комментарий от пользователя Acıbadem su kaçak tespiti: «Acıbadem su kaçak tespiti Kadıköy su kaçağı tespiti: Kadıköy’deki su sızıntılarında noktasal tespit için yanınızdayız. https://www.grand-indonesia.com/author/kacak/» в материале Фон из анимированных самолётов на CSS3

2025-01-02 18:25:49

Всевидящее око

Новый комментарий от пользователя elavil for anxiety reviews: «elavil for anxiety reviews

elavil for anxiety reviews» в материале Крутой анимированный индикатор загрузки в виде снежка на CSS3

2025-01-03 19:51:39

Всевидящее око

Новый комментарий от пользователя how long can you take elavil: «how long can you take elavil

how long can you take elavil» в материале След за курсором из частиц на HTML5 Canvas

2025-01-05 15:00:13

stalker1313

Привет. Может кто-нибудь знает почему не получается зайти на сайт playstation через vpn и как это исправить? Без vpn захожу на сайт, но не могу зарегать акк.
Ошибка:
Страница недоступна
Сайт playstation.com не отправил данных.
ERR_EMPTY_RESPONSE

2025-01-08 18:00:15

Al-Sher

@stalker1313, Привет. Возможно впн блочит их сайт. Попробовал со своим личным впном - сайт открывается

2025-01-08 19:56:24

stalker1313

@Al-Sher, бесплатный, хороший vpn посоветуете?

2025-01-08 22:01:35

stalker1313

Можно как-то сохранить все статьи с сайта wp в отдельные вордовские документы?

2025-01-09 19:50:03

Al-Sher

@stalker1313, Увы, я уже давно пользуюсь только личным впн на своей впске)

2025-01-10 20:41:42

......

Для публикации сообщений в чате необходимо авторизоваться