Несмотря на то, что данная презентация довольно ресурсоемкая и использует две библиотеки (three и gsap, общим весом 700кб), на ее основе можно создать очень красивую титульную страницу, например, для персонального сайта.
Автор данной презентации: isladjan
Оригинальная версия: Quotes animation
Ниже представлена немного измененная версия, с удаленным премиальным плагином SplitText3.min.js
Пример:
Для смены фона кликните на него
Пример реализации данных эффектов можно увидеть на сайте турагентствa «ДК Тур»
HTML:
|
1 2 3 4 5 6 7 |
<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> |
Где:
.quoteText - первая подпись, которая сменится на другую (из JS) после прохождения цикла по всем кадрам.
#first - изображение для первого фона.
JS:
- Подключаем библиотеку three.min.js
- Подключаем библиотеку gsap.min.js
- Подключаем скрипт презентации presents.js
Для того чтобы кадры менялись сами через заданный промежуток времени, нужно раскомментировать строку 67 - setInterval(changeTexture, 10000);
CSS:
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
#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; } } |
Используемые в презентации фото и видео:
Смотрите также:
Трехмерное переключение вкладок, в которых присутствует фотография и ее описание
Скрипт splitpic.js для смены мышкой одной фотографии на другую
Небольшой скрипт на jQuery реализующий слайдер со сменой по диагонали фотографий
Добавить комментарий:
Ваш комментарий отправлен!
Вставил данный код - не работает. На странице только чёрный прямоугольник. В чём может быть ошибка? Неправильно подключил библиотеки?
В консоле про CORS ничего нет?
Закиньте на сервер результат, локально он может не работать.
ничего подобного не видел !
А вы не могли бы этот слайд мне у становить на вордпресс?
Я новичок в этом деле, а так хотябы посмотрю что и где стоит, смогу заменить картинки(наверное)
за небольшую плату возьметесь?
Напишите в ВК или ТГ, посмотрим что как у вас
Не получается заменить указание пути к картинкам (включая в html), в чём может быть проблема? Дело в presents.js?
Я попробовал взять код с оригинального сайта, вроде работает, но когда хочу заменить путь к картинкам перестаёт работать, но у вас получилось это, как?
В скрипте все пути к картинкам идут на сайт: https://i.ibb.co/WnbfKGk/ И это не получается изменить.
Локально может не работать, залейте на хост все
Не цепляется canvas вроде бы. Ошибка
Uncaught TypeError: webgl.particlesMesh is undefined
Жаль, на мобильном не работает (