Слайдер изображений с глючным эффектом переходов на 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 Комментарий

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

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

fapalnaapo

@Al-Sher, но как я понимаю эта реклама подгружаеться в обход сайт или поверх сайта типо того

2023-04-20 22:03:09

Al-Sher

@fapalnaapo, не, ну поверх сайта она не может подгружаться. Если ток через плагины
юкоз по факту только свой js может вставлять, который изменяет твой html(ну или iframe)

2023-04-20 23:01:45

fapalnaapo

@Al-Sher, я раньше ее ломал эту рекламу через

.iframe{width: 0px;display:none; opacity: 0.0;
position: absolute;}

но с ней ломалась часть сайта, а теперь это не работает

2023-04-21 06:49:30

Apocalypse

@fapalnaapo, эх... За любые махинации с рекламой на сайте будет перманентный бан...

2023-04-23 21:35:34

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

Новый комментарий от пользователя Atom: «В каталоге статей точно не работает, попробовал всё менять, бесполезно/ С разных сайтов попробовал все варианты.» в материале Удаление материала ссылкой для всех модулей by uWnd

2023-04-23 21:36:57

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

Новый комментарий от пользователя Apocalypse: «Скорее всего требуется модернизация. Скрипту тыща лет, а в Козе с тех пор была куча изменений» в материале Удаление материала ссылкой для всех модулей by uWnd

2023-04-23 21:38:11

fapalnaapo

@Apocalypse, я Особенный 😀 c 2012 полет нормлаьный 😆

2023-04-25 12:50:21

fapalnaapo

я даже учавствую в конкурсе лучшего сайта 🤡

2023-04-25 12:52:02

fapalnaapo

тоесть топ 100

2023-04-25 12:52:36

Apocalypse

@fapalnaapo, "я даже учавствую в конкурсе лучшего сайта" 😅

2023-04-27 09:14:15

......

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

Слайдер изображений с глючным эффектом переходов на 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

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

Читайте также:

Неоновый след от курсора на HTML5 Canvas

Эффект открывающихся букв на CSS3

Волк, полнолуние и вращающиеся звёзды на CSS3

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

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