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

demosourse

Данный эксперимент работает на новом компоненте HTML5 Canvas. Все слайды состоят из специальных фигур и текста, с которыми можно немного поиграть, используя курсор мыши. Элемент Canvas может использоваться для рисования 2D графики через JavaScript.

Все цвета для элементов интерактивных фигур заданы изначально. Текст так же будет состоять из нарисованных частиц:

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

После трансформаций мы сможем увидеть новую фигуру:

Если поводить по частицам фигурок курсором мыши, то можно ощутить интерактивный аспект данного слайдера:

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tympanus.net/codrops/2013/07/03/interactive-particles-slideshow/
Перевел: Станислав Протасевич
Урок создан: 26 Августа 2013
Просмотров: 18596
Правила перепечатки


5 последних уроков рубрики "HTML и DHTML"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 26 Августа 2013 23:05
    igontarev
    это потрясно
  • 27 Августа 2013 11:59
    mccrush
    Вообще интересно. Но так и не могу придумать, где это можно использовать.
  • 27 Августа 2013 13:07
    sadchenko
    Хах)) Развлекаловка)) можно полностью собрать всю фигуру в два крутящихся шарика))
  • 27 Августа 2013 20:37
    rymaruk
    Сказать что я потрясен это ничего не сказать.. Супер. Будем разбираться с исходником))))
  • 28 Августа 2013 10:22
    fuckmazahak
    Крутая штука)) а можно использовать другие фигуры?
  • 28 Августа 2013 11:06
    Angel0s
    Спасибо! Было бы хорошо организовать подробную статью об элементе Canvas и его возможностях.
    • 9 Сентября 2013 23:00
      marat.dimaev
      а лучше рубрику целую
  • 29 Ноября 2013 13:39
    apostaline
    Уже использовал эту тему )) для сайта не плохо подошла!
^ Наверх ^