Интерактивное слайд-шоу. Интерактивный - Слайдер.

Интерактивное слайд-шоу. Интерактивный - Слайдер.

Slideshow

Это экспериментальный интерактивный слайд-шоу компонент с математическими формами и текстом, с использованием Canvas. Каждый слад этого Слайд-шоу состоит из символа или фигуры и текста, которые всвою очередь сделаны из интерактивных частиц, с которыми пользователь может взаимодействовать. С Canvas можно динамически рисовать 2D вещи с помощью JavaScript и этот эксперимент показывает некоторые из возможностей.

Ну как говорится лучше один раз увидеть чем сто раз услышать(в нашем случае прочесть) поэтому привожу пример. нажмите на сылку демо ниже для просмотра:


Смотреть Демо
 А в конце статьи будет опубликована ссылка для скачивания исходного кода интерактивного слайдера

Обратите внимание: это работает только в предназначенных в браузерах, которые поддерживают соответствующие свойства CSS. Современные браузеры только!

Частицы для форм имеют предопределенный набор цветов, в которые частицы будут окрашены. Текст будет построен из белых частиц похожих на облако :

Slideshow01

При навигации к следующему (или предыдущему слайду), текст и форма будет превращаться в новую, создавая интересный эффект:
Slideshow02

После преобразования, мы можем видеть форму и текст на следующем слайде:
Slideshow03

Частицы текста и формы являются интерактивными таким образом, что мы можем немного двигать их курсором мыши:
Slideshow04

Думаю как выглядит Слайдер и принцип его работы вы уже поняли и в том случае если он вам понравился и вы решили установить его на свой сайт вы наверняка захотите поменять надписи на слайдах на свои, а как это сделать я опишу ниже:

1. Откройте фаил particlesSlideshow.js который находится в папке js (/InteractiveParticlesSlideshow/js/particlesSlideshow.js), и встроке words поменяйте значения ‘circle’, ‘ovals’, ‘drop’, ‘ribbon’ на свои


words = [ 'circle', 'ovals', 'drop', 'ribbon' ]

На этом все

Надеюсь, что вам понравился это Слайд-шоу!

 

 

Смотреть Демо Скачать Исходники

 

 

 

Отставить отзыв

Ваш e-mail не будет опубликован. Обязательные поля помечены *