Библиотека particles.js для эффектов с частицами
В предыдущей заметке я просто привёл несложный шаблон для canvas-приложения с движущимися "частицами" (particles) на канве, а есть ли готовые библиотеки для того, чтобы делать красивые canvas-эффекты вообще без программирования?
По крайней мере одну такую библиотеку мне удалось обнаружить быстро, это particles.js.
Скачав или удалённо подключив её, мы можем просто прописать в теге яваскрипта свойства объектов
particles и interactivity
согласно документации
и получить работающее приложение!
В приведённом далее коде предполагается, что файл particles.js также находится в папке скрипта, я на всякий случай скачал его с этого адреса.
Библиотека умеет реагировать на клик мышью, наведение мыши и изменение размеров окна, все эти события использованы.
При раскрытии окна на весь экран клавишей F11 на нём также не должно быть полос прокрутки за счёт указанного на странице скрипта стиля.
Вот мой исходник и картинка со снежинкой, в онлайн-демке просто изменены пути к картинке и библиотеке. Предполагается, что исходник будет сохранён как файл типа .html в кодировке Юникода UTF-8.
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="utf-8">
<title>Кликоснег</title>
<style>
html {
overflow: hidden;
}
body {
margin: 0; padding: 0; border: 0;
}
.canvasbox {
display: block;
text-align: center;
}
#particlesId {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to bottom,
rgba(0, 0, 132, 0.99) 20%,
rgba(0, 0, 99, 0.99) 40%,
rgba(0, 0, 66, 0.99) 60%,
rgba(0, 0, 33, 0.99) 80%,
rgba(0, 0, 0, 0.99) 100%);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
</style>
</head>
<body>
<div id="canvasbox">
<div id="particlesId"></div>
</div>
<script src="particles.js"></script>
<script>
particlesJS ("particlesId", {
"particles": {
"number": {
"value": 500,
"density": {
"enable": true,
"value_area": 1000
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "image",
"stroke": {
"width": 6,
"color": "#ffffff"
},
"polygon": {
"nb_sides": 6
},
"image": {
"src": "snowflake.png",
"width": 572,
"height": 572
}
},
"opacity": {
"value": 0.618,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 8,
"random": true,
"anim": {
"enable": false,
"speed": 25,
"size_min": 1,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 50,
"color": "#ffffff",
"opacity": 0.618,
"width": 1
},
"move": {
"enable": true,
"speed": 5,
"direction": "bottom",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": true,
"rotateX": 500,
"rotateY": 500
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "bubble"
},
"onclick": {
"enable": true,
"mode": "repulse"
},
"resize": true
},
"modes": {
"grab": {
"distance": 600,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 200,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.2
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});</script>
<noscript><div align="center">Извините, нужен Javascript для работы приложения</div></noscript>
</body></html>
snowflake.png
Версия particles.js, использованная в скрипте (44 Кб)
Файл .html, онлайн-демо полученного эффекта, открыть в текущем окне (вкладке) (3 Кб)
06.02.2019, 16:10 [2736 просмотров]