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

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

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

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

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

Пример:

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

HTML:

Где:

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

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

JS:

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

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

CSS:

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

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

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

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

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

  • Евгений:

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

    Ответить
    • Анатолий Сергеевич:

      Жаль, на мобильном не работает (

      Ответить