Слайдер-презентация с красивым эффектом

Несмотря на то, что данная презентация довольно ресурсоемкая и использует две библиотеки (three и gsap, общим весом 700кб), на ее основе можно создать очень красивую титульную страницу, например, для персонального сайта.

Автор данной презентации: isladjan

Оригинальная версия: Quotes animation

Ниже представлена немного измененная версия, с удаленным премиальным плагином SplitText3.min.js

Пример:

Для смены фона кликните на него

HTML:

<div id="wrapper">
    <div id="canvas_container"></div>
    <div class="text">
        <p class="quoteText">Для смены фона <span style="color:#BFE2FF">кликните на него</span></p>
	</div>
    <img id="first" src="/demo/presents/1.jpg" style="display:none;" />
</div>

<p class="quoteText">Для смены фона <span style="color:#BFE2FF">кликните на него</span></p>

</div>

</div>

Где:

.quoteText - первая подпись, которая сменится на другую (из JS) после прохождения цикла по всем кадрам.

#first - изображение для первого фона.

JS:

Подключаем библиотеку three.min.js
Подключаем библиотеку gsap.min.js
Подключаем скрипт презентации presents.js

Для того чтобы кадры менялись сами через заданный промежуток времени, нужно раскомментировать строку 67 - setInterval(changeTexture, 10000);

CSS:

#wrapper {
	width: 100%;
	height: 700px;
	background: #000;
	position: relative;
	overflow: hidden;
	margin: 20px 0;
}
#canvas_container {
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
canvas {
	display: block;
}
.text {
	width: calc(100% + 2000px);
	padding: 0 1020px;
	height: 100px;
	text-align: center;
	position: absolute;
	left: -1000px;
	bottom: 0;
	z-index: 10;
	background-color: rgba(0, 0, 0, 0.5);
	user-select: none;
	overflow: hidden;
	display: flex;
	align-items:center;
}
.text span {
	color: #e7aa27;
}
.text .quoteText {
	color: #FFF;
    font-size: 20px;
	line-height: 1.5;
	margin: 0 auto;
}
.text .quoteText span {
	font-weight: 700;
}
@media only screen and (max-width:767px) {
	.text .quoteText {
		font-size: 16px;
	}
}

#wrapper {

width: 100%;

height: 700px;

background: #000;

position: relative;

overflow: hidden;

margin: 20px 0;

}

#canvas_container {

position: relative;

left: 0;

top: 0;

width: 100%;

height: 100%;

}

canvas {

display: block;

}

.text {

width: calc(100% + 2000px);

padding: 0 1020px;

height: 100px;

text-align: center;

position: absolute;

left: -1000px;

bottom: 0;

z-index: 10;

background-color: rgba(0, 0, 0, 0.5);

user-select: none;

overflow: hidden;

display: flex;

align-items:center;

}

.text span {

color: #e7aa27;

}

.text .quoteText {

color: #FFF;

font-size: 20px;

line-height: 1.5;

margin: 0 auto;

}

.text .quoteText span {

font-weight: 700;

}

@media only screen and (max-width:767px) {

.text .quoteText {

font-size: 16px;

}

Используемые в презентации фото и видео:

Опубликовано: 14.04.2021
Рубрики: Слайдеры и карусели, Фоны и паттерны
Метки: GSAP, JavaScript, three, WebGL
8340 просмотров

Добавить комментарий:

Ваш комментарий отправлен!

Евгений: 28.06.2021 в 11:52

Не цепляется canvas вроде бы. Ошибка
Uncaught TypeError: webgl.particlesMesh is undefined

Ответить
- Анатолий Сергеевич: 06.12.2021 в 13:27
  
  Жаль, на мобильном не работает (
  
  Ответить

Пример:

HTML:

JS:

CSS:

Используемые в презентации фото и видео:

Смотрите также:

3D слайдер-карусель

Бесшовные светлые фоны

Эффект метели на JS

Добавить комментарий:

Комментарии: