Звёздный след от курсора на HTML5 Canvas
Очень крутой скрипт, который создаёт лед из звёзд за вашим курсором. Клик по кнопкам мышки будет вызывать что-то вроде звёздного взрыва. Смотрится очень эффектно!
Для начала посмотрите ДЕМО
Установка:
На нужных страницах перед открывающим тегом <body> вставьте:
1 2 3 4 |
<canvas id="testCanvas" width="550" height="500"></canvas> <a href="https://createjs.com/" target="_blank" rel="noopener"><img id="logo" src="https://createjs.com/mediakit/createjs-badge-reverse.png"></a> <script src='/js/easeljs-NEXT.js'></script> <script src='/js/sparks.js'></script> |
Осталось лишь залить два JS файла из прикреплённого архива в папку js и картинку в папку img
Добрый день!
На сайте Демо очень интересно смотрится, у меня никак не хочет работать, вроде и файлы разложил, и html перепроверил, ничего кроме ошибок нет:
=============Сыпятся ошибки:============
sparks.js:120 Uncaught TypeError: Cannot read property 'clone' of undefined
at addSparkles (sparks.js:120)
at moveCanvas (sparks.js:114)
at StageGL.p._dispatchEvent (easeljs-NEXT.js:827)
at StageGL.p._dispatchEvent (easeljs-NEXT.js:834)
at StageGL.p.dispatchEvent (easeljs-NEXT.js:751)
at StageGL.p._dispatchMouseEvent (easeljs-NEXT.js:8699)
at StageGL.p._handlePointerMove (easeljs-NEXT.js:8481)
at StageGL.p._handleMouseMove (easeljs-NEXT.js:8457)
at f (easeljs-NEXT.js:8381)
addSparkles @ sparks.js:120
moveCanvas @ sparks.js:114
p._dispatchEvent @ easeljs-NEXT.js:827
p._dispatchEvent @ easeljs-NEXT.js:834
p.dispatchEvent @ easeljs-NEXT.js:751
p._dispatchMouseEvent @ easeljs-NEXT.js:8699
p._handlePointerMove @ easeljs-NEXT.js:8481
p._handleMouseMove @ easeljs-NEXT.js:8457
f @ easeljs-NEXT.js:8381
===== и так по кругу=====
Странно... jQuey на сайте подключен?
К сожалению даже с подключённым jQuey не работает(
Можете скинуть html с примером вашего подключения? Или указать сайт где пытаетесь подключить.
Можно ссылку на ваш сайт или страницу, где не работает данное решение?