tsparticles
tsParticles 3.0.2
Легкая библиотека типовых произведений для создания частиц. Свободная зависимость (*), браузер готов и совместимый с React.js, Vue.js (2.x и 3.x), угловатым, стройным, jquery, preact, inferno, riot.js, solid.js и веб -компоненты
@tsparticles/angularastro-particlesember-tsparticlesinferno-particlesjquery-particlespreact-particles@tsparticles/reactriot-particlessolid-particles@tsparticles/svelte@tsparticles/vue2@tsparticles/vue3web-particles@tsparticles/wordpressДокументация и ссылки на разработку здесь
Эта библиотека доступна на двух самых популярных CDN, и она легко и готова к использованию, если вы использовали частицы. JS это еще проще .
Вы найдете инструкции ниже, со всеми необходимыми ссылками, и не будете бояться TypeScript , это просто исходный язык .
Выходные файлы просто JavaScript . ?
CDN и npm имеют все необходимые вам источники в JavaScript , Bundle Browser Ready (tsparticles.engine.min.js), и все файлы, разделенные для синтаксиса import .
Если вы заинтересованы, есть несколько простых инструкций чуть ниже, чтобы направить вас к мигрированию из библиотеки старых частиц.js.
Пожалуйста, используйте эти хосты или ваши собственные для загрузки Tpoparticles в ваши проекты
https://unpkg.com/@tsparticles/confetti/ https://unpkg.com/@tsparticles/engine/ https://unpkg.com/@tsparticles/fireworks/ https://unpkg.com/@tsparticles/basic/ https://unpkg.com/@tsparticles/slim/ https://unpkg.com/tsparticles/ https://unpkg.com/@tsparticles/all/
Tpparticles Confetti
Двигатель Tpparticles
Tpparticles Fireworks
Tpparticles Basic
Tparticles Slim
Tpparticles
Tpparticles All
npm install @tsparticles/engineyarn add @tsparticles/enginepnpm install @tsparticles/engine const tsParticles = require ( "@tsparticles/engine" ) ;
// or
import { tsParticles } from "@tsparticles/engine" ; Импортируемые tsParticles - это тот же экземпляр, который у вас есть при включении сценария на страницу, используя тег <script> .
Загрузите Tparticles и настройте частицы:
index.html
< div id =" tsparticles " > </ div >
< script src =" tsparticles.engine.min.js " > </ script >app.js
// @path-json can be an object or an array, the first will be loaded directly, and the object from the array will be randomly selected
/* tsParticles.load(@params); */
tsParticles
. load ( {
id : "tsparticles" ,
url : "presets/default.json" ,
} )
. then ( container => {
console . log ( "callback - tsparticles config loaded" ) ;
} )
. catch ( error => {
console . error ( error ) ;
} ) ;
//or
tsParticles . load ( {
id : "tsparticles" ,
options : {
/* options here */
} ,
} ) ;
//or
tsParticles . load ( {
id : "tsparticles" ,
options : [
{
/* options here */
} ,
{
/* other options here */
} ,
] ,
} ) ;
//random object
tsParticles . load ( {
id : "tsparticles" ,
options : [
{
/* options here */
} ,
{
/* other options here */
} ,
] ,
index : 1 ,
} ) ; //the second one
// Important! If the index is not in range 0...<array.length, the index will be ignored.
// after initialization this can be used.
/* tsParticles.setOnClickHandler(@callback); */
/* this will be fired from all particles loaded */
tsParticles . setOnClickHandler ( ( event , particles ) => {
/* custom on click handler */
} ) ;
// now you can control the animations too, it's possible to pause and resume the animations
// these methods don't change the config so you're safe with all your configurations
// domItem(0) returns the first tsParticles instance loaded in the dom
const particles = tsParticles . domItem ( 0 ) ;
// play will start the animations, if the move is not enabled it won't enable it, it just updates the frame
particles . play ( ) ;
// pause will stop the animations
particles . pause ( ) ; @tsparticles/angularИнструкции доступны здесь
astro-particlesИнструкции доступны здесь
ember-tsparticlesИнструкции доступны здесь
inferno-particlesИнструкции доступны здесь
jquery-particlesИнструкции доступны здесь
preact-particlesИнструкции доступны здесь
@tsparticles/reactИнструкции доступны здесь
riot-particlesВы можете найти инструкции здесь
solid-particlesВы можете найти инструкции здесь
@tsparticles/svelteИнструкции доступны здесь
@tsparticles/vue2Инструкции доступны здесь
@tsparticles/vue3Инструкция доступна здесь
web-particlesВы можете найти инструкции здесь
@tsparticles/wordpressСтраница плагинов, размещенная на WordPress.org, можно найти здесь
На самом деле, официального плагина Tparticles не существует, но у меня есть сотрудничество с Premium Addons for Elementor .
В этом хранилище есть некоторые пресеты, готовые к использованию, и у них также есть файл пакета, который содержит все необходимое для запуска.
Эта предустановка загружает большие цветные круги, движущиеся вверх на белом фоне.
Вы можете найти инструкции здесь
Эта предустановка загружает цветные пузырьки, идущие с нижней части экрана на белом фоне.
Вы можете найти инструкции здесь
Эта предустановка загружает белый и красный конфетти, запущенный из экрана на прозрачном фоне.
Вы можете найти инструкции здесь
Эта предустановка загружает выцветший красный на черный фон с частицами, окрашенными в огонь и ясеней.
Вы можете найти инструкции здесь
Эта предустановка загружает мышиную тропу, сделанную с небольшими выцветающими частицами, такими как маленькие светлячки.
Вы можете найти инструкции здесь
Эта предустановка загружает красивый фейерверк.
Вы можете найти инструкции здесь
Вы можете найти инструкции здесь
Вы можете найти инструкции здесь
Вы можете найти инструкции здесь
Вы можете найти инструкции здесь
Вы можете найти инструкции здесь
Вы можете найти инструкции здесь
Вы можете найти несколько шаблонов, связанных с Tparticles, здесь. Шаблоны созданы для ванильного JavaScript , ReactJS , Vuejs , Angular , SVELTEJS и других фреймворков.
Шаблоны будут варьироваться, могут быть созданы новые или более старые, обновлены с последними функциями или изменены в лучшем стиле. Проверьте их время от времени.
Если вы создали хороший дизайн с Tparticles, не стесняйтесь отправлять запрос на привлечение с вашим классным шаблоном, вы будете зачислены в качестве автора шаблона!
https://github.com/tsparticles/templates
https://particles.js.org/samples
Вы можете найти все видеоуроки на веб -сайте здесь: https://particles.js.org/video.html
Скоро появится больше видео! Проверьте каждый день, есть ли какое -то новое содержимое.
частицы
Вы можете найти несколько образцов конфигурации здесь
Вы можете найти все варианты, доступные здесь
Я создал коллекцию Tsparticles на Codepen? или вы можете проверить мой профиль
В противном случае, есть ссылка на демонстрацию ниже.
Хотите увидеть еще больше демонстраций? Клонировать репозиторий на вашем компьютере и следуйте этим инструкциям
$ pnpm i
$ pnpm run build
$ cd demo/vanilla
$ pnpm startБум! ? http: // localhost: 3000, и вы можете проверить другие демонстрации.
Если вы достаточно смелы, вы можете переключиться на филиал dev , чтобы попробовать функции в разрабатывании.
У Tsparticles есть пакет, который делает эту библиотеку на 100% совместимой с конфигурацией частиц.js .
Серьезно, вам просто нужно изменить сценарий с частиц.js на пакет совместимости в комплекте, и т. Д., Вы готовы ?!
Вы можете прочитать больше здесь
Хотите знать 5 причин сделать переключатель? Читайте здесь
Ниже вы можете найти всю информацию, необходимую для установки Tpparticles и ее нового синтаксиса.
Tpparticles теперь поддерживает некоторые настройки?
Вы можете создать свои собственные плагины
Подробнее здесь ...
Блок -схема TD
ядро подграфа [ядро]
Двигатель [Tpparticles Engine]
Perlin-noise [Perlin Noise Lib]
Simplex-noise [Simplex Noise Lib]
конфигурации [Tparticles Config]]
конец
Подграф-пакет-базы [Tpparticles Basic]
Подграфы базовых-носителей [Movers]
База движения [база]
конец
подграф основной формы [формы]
Цирк формы [Круг]
конец
подграф базовые обновления [Updaters]
Cudtater-Color [Color]
обновляющий-повышение [непрозрачность]
Обновляющие моды [режимы выхода]
Обновляющий размер [размер]
конец
конец
Двигатель-> пакет-базы
Subgraph Bundle-Confetti [Tsparticles Confetti]
Подграф конфетти-плугинс [плагины]
плагин-эмиттеры
плагин-движения
конец
Подграф конфетти-формы [формы]
карты формы
Форма-Эмоджи
Shape-Heart
форма-формы
Shape-полигон
квадрат формы
звезда формы
конец
Подграф конфетти-Updaters [Updaters]
обновляющий жизнь
Updater-Roll
обновляющий доход
обновляющий наклон
обновляющий стрижки
конец
конец
Bundle-Basic-> Bundle-Confetti
Подграф-пакет-стлим [Tparticles Slim]
Подграф Slim-Interactions [взаимодействия]
Подграф с большими интернациями-внешние [внешние]
Взаимодействие-внешнее-привлечение [привлечь]
Взаимодействие-Экстернал-Бонк [отскок]
взаимодействие-внешнее пузырь [пузырь]
взаимодействие-внешнее соединение [Connect]
Взаимодействие-External-Grab [Grab]
взаимодействие-экстернальная пауза [пауза]
Взаимодействие-экстернал-пиш [push]
Взаимодействие-External-Remove [удалить]
взаимодействие-экстернал-репульс [Repulse]
Взаимодействие-External-Slow [медленно]
конец
Субграф Слим-взаимодействия-частицы [частицы]
взаимодействие-частиц-привлечение [привлечь]
взаимодействие-частицы-сборы [столкновения]
взаимодействие-часовые линии [ссылки]
конец
конец
Подграф-стройные моменты [Movers]
Move-Parallax [Parallax]
конец
Подграф Slim-Plugins [плагины]
Подграф Слим-Плугинс-Азлонья [Снижение]
Плагин-прозрачный квад [Quad]
конец
конец
Подграф тонкие формы [формы]
Shape-Emoji [Emoji]
Shape-Image [Image]
Линия формы [линия]
Shape-полигон [Polygon]
Shape-Square [Square]
Shape-Star [Star]
конец
Subgraph Slim-Updaters [Updaters]
Обдуманная жизнь [Жизнь]
обновленная доход [вращается]
Cudtater-Stroke-Color [Color]
конец
конец
Bundle-Basic-> Pack-Slim
Подграф-пакет-фарворки [Tparticles Fireworks]
Подграф-фейерверк-эффекты [эффекты]
эффект-трейл
конец
Подграф-фейерверк-плугинс [плагины]
плагин-эмиттеры
Подграф-фейерверки-плугин-эмиттерс-формы [излучающие формы]
плагин-эмиттеры-квадрат
конец
плагин-звуки
конец
Подграф-фейерверк-Updaters [Updaters]
обновляющий дестра
обновляющий жизнь
обновляющий доход
конец
конец
Bundle-Basic-> Bundle-FireWorks
Подграф-комплект
Подграф полные взаимодействия [взаимодействия]
Подграф с полными вовлеченными вмешательствами [Внешние]
Взаимодействие-экстернальное трейл [тропа]
конец
конец
Подграф с полной плугинс [плагины]
плагин-поглощения [поглотители]
Плагин-эмиттеры [излучатели]
Подграф с полной плугин-эмиттерскую формы [излучающие формы]
Плагин-эмиттеры формируют цирку [круг]
Плагин-эмиттеры-квадрат [Square]
конец
конец
Подграф с полной формой [формы]
Shape-Text [Text]
конец
Subgraph Full-Updaters [Updaters]
обновляющий дестра [уничтожить]
Updater-Roll [Roll]
Updater-Tilt [tilt]
Updater-Twinkle [Twinkle]
Обдуманная стяга [Wobble]
конец
конец
Пандл-Слим-> Пандл-Фулл
Подграф-комплект-все [Tpparticles All]
Bundle-PJS [Tpparticles Particles.js Совместимость]
Подграф все эффекты [эффекты]
Эффект-публе [пузырь]
эффект-трейл [тропа]
конец
Подграф все-интерфейсы [взаимодействия]
Подграф все-интернации-External [Внешний]
взаимодействие-экстерно-частица [частица]
Взаимодействие-внешнее поп [POP]
конец
Свет взаимодействия [свет]
Субграф-все-взаимодействие-частицы [частицы]
взаимодействие-частиц-Repulse [Repulse]
конец
конец
Подграф все пути [Пути]
Path-Curl-Noise [Шум скручивания]
Публики [кривые]
PATH-PERLIN-NOISE [Перлин Шум]
PATH-Polygon [Polygon]
Path-Simplex-Noise [Simplex Noise]
PATH-SVG [SVG]
конец
Подграф все-плугинс [плагины]
плагин-канвас-маска [маска холста]
Подграф все-плугинс-аварии [Снижение]
Обратный плагин [обратно]
Плагин-лизание [Circ]
плагин-кубик [кубический]
плагин-обезживание-экспо [Expo]
плагин-линейный [линейный]
Плагин-лизание [кварта]
Плагин-лизак-Quint [Quint]
плагин-лизан
конец
Подграф все-плугин-эмиттерс формы [формы излучателей]
Плагин-эмиттеры-формы-канвы [Canvas]
Плагин-эмиттеры-формы проход [Путь]
Плагин-эмиттеры-формировать полигон [Polygon]
конец
Подграф все-плугинс-экспорт [экспорт]
плагин-экспорт-image [Image]
плагин-экспорт-JSON [json]
плагин-экспорт-video [видео]
конец
плагин-HSV-Color [цвет HSV]
Инфекция плагина [инфекция]
Плагин-движения [движение]
плагин-поуссон-диск [Пуассонский диск]
плагин-полигон-маска [многоугольная маска]
плагин-звуки [звучит]
конец
Подграф все формируют [формы]
Форма Сорвира [Стрелка]
карты формы [карты]
Shape-Cog [Cog]
Shape-Heart [сердце]
Плат формы [Путь]
Форма-полигон [округлый многоугольник]
Раунда-раунд-рект [округлый прямо]
Shape-Spiral [спираль]
конец
Subgraph All-Updaters [Updaters]
Обновляющий-градиент [градиент]
обновляющий орбит [орбита]
конец
Simplex-Noise-> Path-Curl-Noise
Perlin-noise-> path-perlin-noise
Simplex-noise-> Path-Simplex-Noise
конец
Компания
Огромное спасибо Jetbrains за лицензии с открытым исходным кодом в 2020-2022 годах!
Webstorm Jetbrains используется для поддержания этого проекта.
