Феерверк на веб странице

Итак, наступает большой праздник “День победы”, одним из символов которого является конечно же праздничный салют. Как раз сегодня натолкнулся на скрипт fireworks.js, который позволяет добавлять яркие, красочные салюты на веб страницу.

fireworks.js - феерверк на веб странице

Автор этого скрипта также является автором библиотеки SoundManager, для работы со звуком через JavaScript (о ней я недавно написал статью), поэтому не удивительно, что феерверк сопровождается замечательными звуковыми эффектами.

Основные возможности скрипта:

  • Много разных вариаций формы и цвета феерверка
  • Легкий в конфигурации API для добавления дополнительных эффектов
  • Управляемые скриптом звуковые эффекты при помощи SoundManager API
  • Чередующаяся анимация (позволяет легко устанавливать последовательность феерверков)
  • Эффект звукового панорамирования, в зависимости от расположения салюта на странице.

Попробовать скрипт в работе можно здесь.

С праздником Вас, и до скорых встреч!


Maklay.com - Большой каталог товаров для спорта и активного отдыха
  • http://www.mannodesign.com/ Настя Манно

    Ой как здорово то! :) )) Прямо не оторваться. На страничке автора игралась с настройками и салютами минут 15. Боюсь только что на WP сильно грузить будет систему скрипт этот.

  • admin

    Вовсе нет, WP будет работать нормально, производительность тут от компа зависит и от сложности самого салюта. Из всех демо у меня тормозил только один – CPU-heavy :)

  • http://www.futsal.dp.ua SergAntDnepr

    Напишите, пожалуйста, как вставить себе на сайт “Феерверк”!

  • http://www.futsal.dp.ua SergAntDnepr

    Так эту штуковину можно поставить себе на сайт или только играться на сайте автора? Ковырял, ковырял – не выковырял! Пожалуйста помогите!

  • admin

    @SergAntDnepr
    Конечно можно поставить себе. Там же есть ссылка на скачивание, вместе с библиотекой и демо пример есть, по нему все можно понять. По сути сразу нужно подключить скрипты:
    <link rel=”stylesheet” type=”text/css” href=”style/fireworks.css” media=”screen” />
    <script type=”text/javascript” src=”script/soundmanager.js”></script>
    <script type=”text/javascript” src=”script/fireworks.js”></script>
    В конце страницы добавляем инициализацию soundmanager:
    <script type=”text/javascript”>
    if (typeof(soundManagerInit)!=’undefined’) soundManagerInit();
    </script>
    Ну а феерверк создаем следующей функцией:
    createFirework(nRadius,nParticles,nCircles,burstType,startX,startY,burstX,burstY,allowRandom,obeyBoundaries)
    На странице скачивания есть пример:
    createFirework(90,193,1,1,null,null,null,null,false,true);

  • http://www.futsal.dp.ua SergAntDnepr

    Вот: http://futsaldnepr.narod.ru/test/fireworks.html тестирую, а звука нет. Подскажите, пожалуйста, почему. Все папки и файлы на сервере, так же как и в скаченном демо-примере.

  • http://www.futsal.dp.ua SergAntDnepr

    Кстати, после того как скачиваешь демо-пример, он тоже работает почему-то без звука.

JSToolbox создан на основе WordPress