Слайдер изображений с глючным эффектом переходов на CSS3 и HTML5 Canvas

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

Очень необычный слайдер изображений с эффектом глючно-желейного перехода

Для начала посмотрите ДЕМО

Установка:

1#: В самый низ вашего CSS вставьте:

.dom-gl {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.slider {
position: relative;
padding: 0 22.5vw;
display: flex;
align-items: center;
height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: -webkit-grab;
cursor: grab;
z-index: 2;
}
.slider__inner {
display: flex;
position: relative;
}
.slide {
overflow: hidden;
}
.slide:first-child {
position: relative;
}
.slide:not(:first-child) {
position: absolute;
top: 0;
height: 100%;
}
.slide__inner {
position: relative;
overflow: hidden;
width: 55vw;
padding-top: 56.5%;
}
.slide img {
display: none;
/*
height: 100%;
width: 140%;
position: absolute;
top: 0;
left: -20%;
object-fit: cover;
will-change: transform;
*/
}
.titles {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
pointer-events: none;
z-index: 3;
}
.titles__list {
position: absolute;
top: 0;
left: 0;
}
.titles__title {
display: flex;
align-items: center;
justify-content: center;
font-size: 6vw;
font-weight: bold;
letter-spacing: -0.1vw;
color: #fff;
}
.titles__title--proxy {
visibility: hidden;
}
.progress {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 0.25rem;
overflow: hidden;
pointer-events: none;
}
.progress__line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scaleX(0);
transform-origin: left;
background-color: #fff;
}
.progress__line:nth-child(2) {
transform-origin: right;
}

100

101

102

103

104

.dom-gl {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none;

z-index: 1;

}

.slider {

position: relative;

padding: 0 22.5vw;

display: flex;

align-items: center;

height: 100%;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

cursor: -webkit-grab;

cursor: grab;

z-index: 2;

}

.slider__inner {

display: flex;

position: relative;

}

.slide {

overflow: hidden;

}

.slide:first-child {

position: relative;

}

.slide:not(:first-child) {

position: absolute;

top: 0;

height: 100%;

}

.slide__inner {

position: relative;

overflow: hidden;

width: 55vw;

padding-top: 56.5%;

}

.slide img {

display: none;

height: 100%;

width: 140%;

position: absolute;

top: 0;

left: -20%;

object-fit: cover;

will-change: transform;

}

.titles {

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

overflow: hidden;

pointer-events: none;

z-index: 3;

}

.titles__list {

position: absolute;

top: 0;

left: 0;

}

.titles__title {

display: flex;

align-items: center;

justify-content: center;

font-size: 6vw;

font-weight: bold;

letter-spacing: -0.1vw;

color: #fff;

}

.titles__title--proxy {

visibility: hidden;

}

.progress {

position: fixed;

bottom: 0;

left: 0;

width: 100%;

height: 0.25rem;

overflow: hidden;

pointer-events: none;

}

.progress__line {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

transform: scaleX(0);

transform-origin: left;

background-color: #fff;

}

.progress__line:nth-child(2) {

transform-origin: right;

}

2#: Следующий код вставьте между тегами <body> и </body>:

<div class="slider | js-drag-area">
<div class="slider__inner | js-slider">
<div class="slide | js-slide">
<div class="slide__inner | js-slide__inner">
<img class="js-slide__img" src="https://imapo.ru/images/tex1.jpg" alt="" crossorigin="anonymous" draggable="false">
</div>
</div>
<div class="slide | js-slide" style="left: 120%;">
<div class="slide__inner | js-slide__inner">
<img class="js-slide__img" src="https://imapo.ru/images/tex2.jpg" alt="" crossorigin="anonymous" draggable="false">
</div>
</div>
<div class="slide | js-slide" style="left: 240%;">
<div class="slide__inner | js-slide__inner">
<img class="js-slide__img" src="https://imapo.ru/images/tex1.jpg" alt="" crossorigin="anonymous" draggable="false">
</div>
</div>
<div class="slide | js-slide" style="left: 360%;">
<div class="slide__inner | js-slide__inner">
<img class="js-slide__img" src="https://imapo.ru/images/tex2.jpg" alt="" crossorigin="anonymous" draggable="false">
</div>
</div>
<div class="slide | js-slide" style="left: 480%;">
<div class="slide__inner | js-slide__inner">
<img class="js-slide__img" src="https://imapo.ru/images/tex1.jpg" alt="" crossorigin="anonymous" draggable="false">
</div>
</div>
<div class="slide | js-slide" style="left: 600%;">
<div class="slide__inner | js-slide__inner">
<img class="js-slide__img" src="https://imapo.ru/images/tex2.jpg" alt="" crossorigin="anonymous" draggable="false">
</div>
</div>
<div class="slide | js-slide" style="left: 720%;">
<div class="slide__inner | js-slide__inner">
<img class="js-slide__img" src="https://imapo.ru/images/tex1.jpg" alt="" crossorigin="anonymous" draggable="false">
</div>
</div>
<div class="slide | js-slide" style="left: 840%;">
<div class="slide__inner | js-slide__inner">
<img class="js-slide__img" src="https://imapo.ru/images/tex2.jpg" alt="" crossorigin="anonymous" draggable="false">
</div>
</div>
</div>
</div>

<div class="progress">
<div class="progress__line | js-progress-line"></div>
<div class="progress__line | js-progress-line-2"></div>
</div>

<script src="/js/gsap-latest-beta.min.js"></script>
<script src="/js/three.min.js"></script>
<script type="text/javascript" src="/js/initslide.js"></script>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

Осталось лишь залить три JS файла из прикреплённого архива в папку js

Метки: Canvas Effect Glitch HTML5 Slider Глитч Глюк Изображения Слайдер Эффект

Apocalypse

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

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

Вы точно не робот?

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

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

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

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

Новый комментарий от пользователя Apocalypse: «Как не работает? Изображения из архива залиты в нужную папку?» в материале Рамки для любых изображений средствами CSS

2023-11-04 07:31:47

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

Новый комментарий от пользователя Apocalypse: «Звука не услышал, сколько ни кликал» в материале Плывущие облака с Parallax эффектом на HTML5 Canvas

2023-11-04 07:35:22

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

Новый комментарий от пользователя VVL99: «Звук есть только при грозе.
Остальные сцены без звука, можно конечно добавить ветер и дождь.» в материале Плывущие облака с Parallax эффектом на HTML5 Canvas

2023-11-04 14:56:22

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

Новый комментарий от пользователя Apocalypse: «Всё, попалась эта сцена. Шикарно!» в материале Плывущие облака с Parallax эффектом на HTML5 Canvas

2023-11-04 19:02:48

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

Новый комментарий от пользователя Дмитрий: «А возможно сделать с кнопкой , что бы при нажатие на кнопку он подгружал материалы.» в материале Автоматическая подгрузка всех материалов Каталога файлов by Apocalypse для uCoz

2023-11-04 19:04:53

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

Новый комментарий от пользователя VVL99: «Если нужна конкретная сцена, ниже написано как именно её вызвать и дать постоянную ссылку.
Некоторые сцены имеют ещё и арианты, так что в общей сложности их вроде 18.» в материале Плывущие облака с Parallax эффектом на HTML5 Canvas

2023-11-04 21:18:21

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

Новый комментарий от пользователя Apocalypse: «Молодец, хорошо поработал!» в материале Плывущие облака с Parallax эффектом на HTML5 Canvas

2023-11-05 12:22:10

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

Новый комментарий от пользователя VVL99: «Всплывающая подсказка под курсором - _http://ipic.su/img/img7/fs/171.1699176980.png» в материале Плывущие облака с Parallax эффектом на HTML5 Canvas

2023-11-05 14:37:47

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

Новый комментарий от пользователя Apocalypse: «Ага, я уже потом увидел, когда курсор остановился» в материале Плывущие облака с Parallax эффектом на HTML5 Canvas

2023-11-06 21:16:35

Apocalypse

Всем доброго дня. Как дела?

2023-11-19 12:50:59

......

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

Слайдер изображений с глючным эффектом переходов на CSS3 и HTML5 Canvas

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

Посетители сайта

Панель управления

Декабрь 2023
Пн	Вт	Ср	Чт	Пт	Сб	Вс
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Слайдер изображений с глючным эффектом переходов на CSS3 и HTML5 Canvas

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

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

Разноцветный метеоритный дождь на HTML5 Canvas

Дождь, капли которого стекают по поверхности на HTML5 Canvas

Посетители сайта

Панель управления