Это экспериментальный интерактивный слайд-шоу компонент с математическими формами и текстом, с использованием Canvas. Каждый слад этого Слайд-шоу состоит из символа или фигуры и текста, которые всвою очередь сделаны из интерактивных частиц, с которыми пользователь может взаимодействовать. С Canvas можно динамически рисовать 2D вещи с помощью JavaScript и этот эксперимент показывает некоторые из возможностей.
Ну как говорится лучше один раз увидеть чем сто раз услышать(в нашем случае прочесть) поэтому привожу пример. нажмите на сылку демо ниже для просмотра:
Смотреть Демо
Обратите внимание: это работает только в предназначенных в браузерах, которые поддерживают соответствующие свойства CSS. Современные браузеры только!
Частицы для форм имеют предопределенный набор цветов, в которые частицы будут окрашены. Текст будет построен из белых частиц похожих на облако :
При навигации к следующему (или предыдущему слайду), текст и форма будет превращаться в новую, создавая интересный эффект:
После преобразования, мы можем видеть форму и текст на следующем слайде:
Частицы текста и формы являются интерактивными таким образом, что мы можем немного двигать их курсором мыши:
Думаю как выглядит Слайдер и принцип его работы вы уже поняли и в том случае если он вам понравился и вы решили установить его на свой сайт вы наверняка захотите поменять надписи на слайдах на свои, а как это сделать я опишу ниже:
1. Откройте фаил particlesSlideshow.js который находится в папке js (/InteractiveParticlesSlideshow/js/particlesSlideshow.js), и встроке words поменяйте значения ‘circle’, ‘ovals’, ‘drop’, ‘ribbon’ на свои
words = [ 'circle', 'ovals', 'drop', 'ribbon' ]
На этом все
Надеюсь, что вам понравился это Слайд-шоу!
| Смотреть Демо | Скачать Исходники |