mz-particles
Version:
TypeScript library for creating particle effects on canvas.
226 lines (195 loc) • 15.1 kB
HTML
<html lang="en">
<head>
<title>mzParticles Documentation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png" />
<link id="favicon-48" rel="icon" type="image/png" sizes="48x48" href="/img/favicon/favicon-48.png" />
<link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
<link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
<link rel="stylesheet" href="/css/styles.1682505671423.css" />
<!--<link rel="stylesheet" href="/js/index.1682505671423.css" />-->
</head>
<body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
<header class="py-4 px-4 border-b shadow-sm bg-slate-100 dark:bg-slate-900 dark:text-slate-400 dark:border-black">
<div class="container mx-auto flex items-center justify-between">
<div class="flex items-center">
<!-- mobile menu button -->
<button
id="mobile-menu-btn"
type="button"
class="mr-4 pointer md:hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
<a href="/" title="" class="flex items-center ml-6">
<svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
stroke-width="3.48" stroke="rgba(255, 255, 255, 1)"
class="mr-4"
fill="none" stroke-linecap="round" stroke-linejoin="round">
<circle cx="50%" cy="50%" r="50%" stroke="none" stroke-width="0" fill="rgba(40, 95, 104, 1)"/>
<g transform="translate(3.36, 3.36) scale(0.72)">
<g transform="rotate(25.2 12 12)">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M6 20v-16l6 14l6 -14v16"/>
</g>
</g>
</svg>
<span class="text-slate-600 dark:text-slate-400"><b>mzParticles</b> Documentation</span>
</a>
</div>
<div class="flex items-center">
<!-- themes -->
<button type="button" id="move-to-dark-mode-btn" class="hidden">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3 block" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M14.828 14.828a4 4 0 1 0-5.656-5.656 4 4 0 0 0 5.656 5.656zm-8.485 2.829-1.414 1.414M6.343 6.343 4.929 4.929m12.728 1.414 1.414-1.414m-1.414 12.728 1.414 1.414M4 12H2m10-8V2m8 10h2m-10 8v2"/>
</svg>
</button>
<button type="button" id="move-to-light-mode-btn" class="hidden">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3 block" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"/>
<path fill="currentColor" stroke="none" d="M12 1.992a10 10 0 1 0 9.236 13.838c.341-.82-.476-1.644-1.298-1.31a6.5 6.5 0 0 1-6.864-10.787l.077-.08c.551-.63.113-1.653-.758-1.653h-.266l-.068-.006-.06-.002z"/>
</svg>
</button>
<a href="https://github.com/mzusin/mz-particles" class="mx-3 block text-slate-400 hover:text-slate-500"><span class="sr-only">mzParticles on GitHub</span><svg viewBox="0 0 16 16" class="w-5 h-5" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a>
</div>
</div>
</header>
<div class="container mx-auto flex-1 overflow-hidden">
<div class="flex h-full">
<div class="side-menu border-r dark:border-slate-900 shadow-md overflow-y-auto h-full max-w-full min-w-270 md:w-350 absolute md:static md:left-auto bg-white dark:bg-slate-900 z-50" id="side-menu">
<div class="px-6 pb-4 flex flex-col relative">
<!-- mobile menu close -->
<button type="button" class="pointer absolute right-4 top-2 md:hidden" id="mobile-menu-close-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M18 6 6 18M6 6l12 12"/>
</svg>
</button>
<div class="text-xl my-4 flex items-center cursor-pointer" data-collapsible-title data-opened="true" data-id="10-main">
Main
<svg data-arrow xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="#626e7f" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="ml-2 rotate-90" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="m7 7 5 5-5 5m6-10 5 5-5 5"/>
</svg>
</div><div class="flex flex-col" data-links><a href="/pages/basic-usage.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 text-slate-500">Basic Usage</a></div><div class="text-xl my-4 flex items-center cursor-pointer" data-collapsible-title data-opened="true" data-id="20-shapes">
Shapes
<svg data-arrow xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="#626e7f" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="ml-2 rotate-90" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="m7 7 5 5-5 5m6-10 5 5-5 5"/>
</svg>
</div><div class="flex flex-col" data-links><a href="/pages/circles.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 pb-2 text-slate-500">Circles</a><a href="/pages/stars.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 pb-2 text-slate-500">Stars</a><a href="/pages/triangles.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 text-slate-500">Triangles</a></div><div class="text-xl my-4 flex items-center cursor-pointer" data-collapsible-title data-opened="true" data-id="100-settings">
Settings
<svg data-arrow xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="#626e7f" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="ml-2 rotate-90" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="m7 7 5 5-5 5m6-10 5 5-5 5"/>
</svg>
</div><div class="flex flex-col" data-links><a href="/pages/settings.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 pb-2 text-slate-500">Settings</a><a href="/pages/canvas-settings.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 pb-2 text-slate-500">Canvas Settings</a><a href="/pages/particles-number.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 pb-2 text-slate-500">Particles Number</a><a href="/pages/particles-settings.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 pb-2 text-slate-500">Particles Settings</a><a href="/pages/connecting-lines.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 pb-2 text-slate-500">Connecting Lines</a><a href="/pages/rotation-effect.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 pb-2 text-slate-500">Rotation Effect</a><a href="/pages/scale-effect.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 pb-2 text-sky-500">Scale Effect</a><a href="/pages/fade-effect.html" title="" class="pl-3 border-l border-slate-150 dark:border-slate-600 text-slate-500">Fade Effect</a></div>
</div>
</div>
<div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
<div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h1 class="text-3xl mb-8">Scale Effect</h1>
<ul class="list-disc mb-10 ml-2 pl-2 leading-8">
<li>
<p class="mb-4"><strong class="font-bold">scaleInOut?: boolean</strong> - A boolean value indicating whether or not the particles should have a scaling effect. If this property is set to true, the particles will grow and shrink as they move around.</p>
</li>
<li>
<p class="mb-4"><strong class="font-bold">maxScale?: number</strong> - A number representing the maximum scaling factor for the particles. If the scaleInOut property is set to true, this property determines the maximum size that the particles can reach. The scaling factor is multiplied with the original size of the particle. If this property is not specified, a default value of <strong class="font-bold">2</strong> will be used.</p>
</li>
<li>
<p class="mb-4"><strong class="font-bold">minScale?: number</strong> - A number representing the minimum scaling factor for the particles. If the scaleInOut property is set to true, this property determines the minimum size that the particles can shrink to. The scaling factor is multiplied with the original size of the particle. If this property is not specified, a default value of <strong class="font-bold">0.5</strong> will be used.</p>
</li>
<li>
<p class="mb-4"><strong class="font-bold">scaleStep?: number</strong> - A number representing the step size for scaling the particles. If the scaleInOut property is set to true, this property determines the increment or decrement in the scaling factor for each frame of animation. If this property is not specified, a default value of <strong class="font-bold">0.01</strong> will be used.</p>
</li>
</ul>
<h2 class="text-3xl mb-8">Usage Example</h2>
<pre class="hljs p-4 mb-4 rounded-md shadow-xl overflow-auto whitespace-pre-wrap text-base"><code><span class="hljs-variable language_">window</span>.<span class="hljs-title function_">particles</span>({
<span class="hljs-comment">// scale effect -----------</span>
<span class="hljs-attr">scaleInOut</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">maxScale</span>: <span class="hljs-number">1.5</span>,
<span class="hljs-attr">minScale</span>: <span class="hljs-number">0.7</span>,
<span class="hljs-attr">scaleStep</span>: <span class="hljs-number">0.005</span>,
<span class="hljs-comment">// canvas settings --------- </span>
<span class="hljs-attr">$placeholder</span>: <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'placeholder'</span>),
<span class="hljs-attr">canvasColor</span>: <span class="hljs-string">'rgb(17, 24, 39)'</span>,
<span class="hljs-attr">particlesNumber</span>: <span class="hljs-number">100</span>,
<span class="hljs-attr">minSize</span>: <span class="hljs-number">10</span>,
<span class="hljs-attr">maxSize</span>: <span class="hljs-number">30</span>,
<span class="hljs-attr">particlesColors</span>: [
<span class="hljs-string">'#CEA262'</span>, <span class="hljs-string">'#f3a73a'</span>, <span class="hljs-string">'#fffc00'</span>, <span class="hljs-string">'#92ccfa'</span>,
<span class="hljs-string">'#5daed2'</span>, <span class="hljs-string">'#366d8c'</span>
],
<span class="hljs-comment">// stars -------------</span>
<span class="hljs-attr">svgPathData</span>: [
<span class="hljs-string">'m14.5 21.75-8.52289 4.48075 1.62773-9.49038-6.89516-6.72112 9.52888-1.38462L14.5 0l4.26144 8.63463 9.52888 1.38462-6.89516 6.72112 1.62773 9.49038z'</span>,
<span class="hljs-string">'M14.5 21.75 4.24695 24.75305 7.25 14.5 4.24695 4.24695 14.5 7.25l10.25305-3.00305L21.75 14.5l3.00305 10.25305z'</span>,
<span class="hljs-string">'m14.5 21.75-5.54891 6.14625.42239-8.26973-8.26973.42239L7.25 14.5 1.10375 8.95109l8.26973.42239-.42239-8.26973L14.5 7.25l5.54891-6.14625-.42239 8.26973 8.26973-.42239L21.75 14.5l6.14625 5.54891-8.26973-.42239.42239 8.26973z'</span>,
],
});</code></pre>
</div>
<div class="w-800 max-w-full mx-auto grid lg:grid-cols-2 gap-8 items-center text-slate-500">
<div class="flex justify-between items-start border border-slate-200 rounded p-4">
<a href="/pages/rotation-effect.html" title="" class="mr-4 hover:text-blue-500">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M5 12h14M5 12l6 6m-6-6 6-6"/>
</svg>
</a>
<div class="flex flex-col items-end justify-center">
<div class="mb-2 text-sm text-slate-300">Previous</div>
<a href="/pages/rotation-effect.html" title="" class="hover:text-blue-500">Rotation Effect</a>
</div>
</div>
<div class="flex justify-between items-start border border-slate-200 rounded p-4">
<div class="flex flex-col justify-center">
<div class="mb-2 text-sm text-slate-300">Next</div>
<a href="/pages/fade-effect.html" title="" class="hover:text-blue-500">Fade Effect</a>
</div>
<a href="/pages/fade-effect.html" title="" class="mr-4 hover:text-blue-500">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M5 12h14m-6 6 6-6m-6-6 6 6"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<!--<footer class="py-2 px-4 border-t">
<div class="container mx-auto">
Footer
</div>
</footer>-->
<script src="/js/index.1682505671423.js"></script>
</body>
</html>