Новогодний фейерверк с фигурами на jQuery и HTML5 Canvas

Разместил: Apocalypse
Опубликовано: 8 ноября 2017

Скачать Очень крутой реалистичный фейерверк, который взрывается в форме различных фигур от сердечек до надписи "Happy Lunar New Year!!!" Для начала посмотрите ДЕМО Установка: 1#: На страницах, где должен выводиться этот эффект, сразу после body вставьте:

<canvas id="canvas"></canvas> <div class="block-audio"> <audio class="exp" src="/audio/exp1.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp1.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp1.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp2.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp2.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp2.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp3.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp3.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp3.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp4.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp4.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp4.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp5.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp5.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp5.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp6.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp6.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp6.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp7.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp7.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp7.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp8.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp8.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp8.mp3" controls="controls"></audio> <audio class="launch" src="/audio/launch1.mp3" controls="controls"></audio> <audio class="launch" src="/audio/launch1.mp3" controls="controls"></audio> <audio class="launch" src="/audio/launch2.mp3" controls="controls"></audio> <audio class="launch" src="/audio/launch2.mp3" controls="controls"></audio> <audio class="launch" src="/audio/launch3.mp3" controls="controls"></audio> <audio class="launch" src="/audio/launch3.mp3" controls="controls"></audio> <audio class="launch" src="/audio/launch4.mp3" controls="controls"></audio> <audio class="launch" src="/audio/launch4.mp3" controls="controls"></audio> <audio class="launch" src="/audio/launch5.mp3" controls="controls"></audio> <audio class="launch" src="/audio/launch5.mp3" controls="controls"></audio> </div> <script src="/js/fwhtml5.js"></script>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

<canvas id="canvas"></canvas> <div class="block-audio"> <audio class="exp" src="/audio/exp1.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp1.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp1.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp2.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp2.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp2.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp3.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp3.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp3.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp4.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp4.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp4.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp5.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp5.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp5.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp6.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp6.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp6.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp7.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp7.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp7.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp8.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp8.mp3" controls="controls"></audio> <audio class="exp" src="/audio/exp8.mp3" controls="controls"></audio> <audio class="launch" src="/audio/launch1.mp3" controls="controls"></audio> <audio class="launch" src="/audio/launch1.mp3" controls="controls"></audio> <audio class="launch" src="/audio/launch2.mp3" controls="controls"></audio> <audio class="launch" src="/audio/launch2.mp3" controls="controls"></audio> <audio class="launch" src="/audio/launch3.mp3" controls="controls"></audio> <audio class="launch" src="/audio/launch3.mp3" controls="controls"></audio> <audio class="launch" src="/audio/launch4.mp3" controls="controls"></audio> <audio class="launch" src="/audio/launch4.mp3" controls="controls"></audio> <audio class="launch" src="/audio/launch5.mp3" controls="controls"></audio> <audio class="launch" src="/audio/launch5.mp3" controls="controls"></audio> </div> <script src="/js/fwhtml5.js"></script>

Осталось лишь залить JS файл из прикреплённого архива в папку js и все MP3 файлы в папку audio

Автор публикации

не в сети 4 дня

Apocalypse

12

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1095Регистрация: 27-08-2018

Метки: FireworksHTML5jQueryNew YearWinterЗимаНовый годФейерверк

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

• Следующая публикация Реалистичный снег из крупных снежинок на HTML5 Canvas
• Предыдущая публикация Анимированные новогодние гирлянды на CSS3

Вам может также понравиться...

• LightView - шикарный jQuery lightbox плагин с поддержкой галерей, фреймов и видео

  Разместил: Apocalypse 28 марта 2017

  - Apocalypse 28 марта 2017 Last modified 2 сентября 2018

• Реалистичное пламя на HTML5 Canvas

  Разместил: Apocalypse 8 января 2019

  - Apocalypse 8 января 2019

• Неоновые пузыри, плавающие по экрану на HTML5 Canvas

  Разместил: Apocalypse 29 сентября 2016

  - Apocalypse 29 сентября 2016

Подписаться

Уведомить о

новых последующих комментариях новых ответах на мои комментарии

Label

{} [+]

Имя*

Email*

Сайт

Δ

Label

{} [+]

Имя*

Email*

Сайт

Δ

6 Комментарий

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии

Участник

Antony

3 лет назад

Приветствую. А можно ли как-то использовать этот скрипт без звука?

0

Ответить

Автор

Apocalypse

3 лет назад

Ответить на  Antony

Для этого достаточно просто не заливать MP3 файлы в папку audio

0

Ответить

Участник

Antony

3 лет назад

Ответить на  Apocalypse

Спасибо

1

Ответить

Автор

Apocalypse

3 лет назад

Ответить на  Antony

Пожалуйста 🙃

0

Ответить

Гость

Эдуард

10 месяцев назад

А как изменить надпись при фейерверке на нужный год?

1

Ответить

Автор

Apocalypse

10 месяцев назад

Ответить на  Эдуард

var textString = 'happylunarnewyear2017';

1	var textString = 'happylunarnewyear2017';

В файле fwhtml5.js замени в этой строчке 2017 на нужный год

0

Последний раз редактировалось 10 месяцев назад Apocalypse ем

Ответить