
Несмотря на то, что данная презентация довольно ресурсоемкая и использует две библиотеки (three
и gsap
, общим весом 700кб), на ее основе можно создать очень красивую титульную страницу, например, для персонального сайта.
Несмотря на то, что данная презентация довольно ресурсоемкая и использует две библиотеки (three
и gsap
, общим весом 700кб), на ее основе можно создать очень красивую титульную страницу, например, для персонального сайта.
Автор данной презентации: isladjan
Оригинальная версия: Quotes animation
Ниже представлена немного измененная версия, с удаленным премиальным плагином SplitText3.min.js
Для смены фона кликните на него
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
- изображение для первого фона.
Для того чтобы кадры менялись сами через заданный промежуток времени, нужно раскомментировать строку 67 - setInterval(changeTexture, 10000);
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; } } |
Адаптивный 3D слайдер-карусель с 3-мя видимыми фотографиями
Сборник светлых бесшовных фонов для сайта в PNG и BASE64 форматах
Анимационный эффект метели для блока или всей страницы
Не цепляется canvas вроде бы. Ошибка
Uncaught TypeError: webgl.particlesMesh is undefined
Жаль, на мобильном не работает (