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

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

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

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

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

Пример:

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

Пример реализации данных эффектов можно увидеть на сайте турагентствa «ДК Тур»

HTML:

Где:

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

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

JS:

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

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

CSS:

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

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

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

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

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

  • Валерий:

    А вы не могли бы этот слайд мне у становить на вордпресс?
    Я новичок в этом деле, а так хотябы посмотрю что и где стоит, смогу заменить картинки(наверное)
    за небольшую плату возьметесь?

    Ответить
    • Alexander:

      Напишите в ВК или ТГ, посмотрим что как у вас

      Ответить
  • Koh:

    Не получается заменить указание пути к картинкам (включая в html), в чём может быть проблема? Дело в presents.js?
    Я попробовал взять код с оригинального сайта, вроде работает, но когда хочу заменить путь к картинкам перестаёт работать, но у вас получилось это, как?
    В скрипте все пути к картинкам идут на сайт: https://i.ibb.co/WnbfKGk/ И это не получается изменить.

    Ответить
    • Alexander:

      Локально может не работать, залейте на хост все

      Ответить
  • Евгений:

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

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

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

      Ответить