asif/ab-particles
1
0
Fork 0
Code Issues Pull Requests Releases 1 Activity

update all sample pages and config samples

Browse Source
This commit is contained in:
Asif Bacchus 2020-04-10 16:12:15 -06:00
parent 632b556310
commit c496077ae9
8 changed files with 197 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
README.md
View File

@ -111,7 +111,7 @@ hover|Should connection lines change colours when the mouse is near them?|boolea
Random balanced horizontal and vertical motion bouncing off the edges of the window. Particles are repelled by the mouse and connections are highlighted on hover. [Sample](defaults.html)
```html
<body onload='particles(opacity=100, numParticles=10, sizeMultiplier=5, width=1, connections=true, connectionDensity=15, speed=50, avoidMouse=true, hover=true)'>
<body onload='particles(opacity=100, numParticles=10, sizeMultiplier=5, width=1, connections=true, connectionDensity=15, noBounceH=false, noBounceV=false, speed=50, avoidMouse=true, hover=true)'>
```
### starry night
@ -124,42 +124,42 @@ Freeze the display, remove connections, disable mouse interaction. Creates a ran
### snow
No horizontal movement, connections or mouse interaction. Particles fall straight down. [Sample](snow.html)
No horizontal movement, connections or mouse interaction. Particles fall straight down, so no vertical bounce. [Sample](snow.html)
```html
<body onload='particles(hSpeed=0, vSpeed=100, connections=false, avoidMouse=false, hover=false)'>
<body onload='particles(noBounceV=true, speedV=100, connections=false, avoidMouse=false, hover=false)'>
```
### bubbles
Opposite of snow, looks a little like bubbles. [Sample](bubbles.html)
Opposite of snow, looks a little like bubbles. No vertical bounce and negative vertical speed. Added a little horizontal speed for effect and to show off 'skew'. [Sample](bubbles.html)
```html
<body onload='particles(hSpeed=0, vSpeed=-100, connections=false, avoidMouse=false, hover=false)'>
<body onload='particles(noBounceV=true, speedV=-100, speedH=-15,connections=false, avoidMouse=false, hover=false)'>
```
### warp speed to the right
Moving right would make the particles go left, therefore negative movement. We don't want connections or mouse interaction here either. [Sample](warpright.html)
Moving right would make the particles go left, therefore negative movement. No horizontal bounce. We don't want connections or mouse interaction here either. [Sample](warpright.html)
```html
<body onload='particles(vSpeed=0, hSpeed=-100, connections=false, avoidMouse=false, hover=false)'>
<body onload='particles(noBounceH=true, speedH=-100, connections=false, avoidMouse=false, hover=false)'>
```
### warp speed to the left
Moving left would make the particles go right, therefore positive movement. We don't want connections or mouse interaction here either. [Sample](warpleft.html)
Moving left would make the particles go right, therefore positive movement. No horizontal bounce. We don't want connections or mouse interaction here either. Added a little positive vertical speed to show off skew. [Sample](warpleft.html)
```html
<body onload='particles(vSpeed=0, hSpeed=100, connections=false, avoidMouse=false, hover=false)'>
<body onload='particles(noBounceH=true, speedH=100, speedV=15, connections=false, avoidMouse=false, hover=false)'>
```
### my usual settings (nice background effect)
I use this for screens where I can't figure out a meaningful background, so why not generate something nice to look at? [Sample](index.html)
I use this for screens where I can't figure out a meaningful background, so why not generate something nice to look at? Toning down the opacity a little to not distract from the text. [Sample](index.html)
```html
<body onload='particles(speed=15, avoidMouse=false)'>
<body onload='particles(speed=15, avoidMouse=false, opacity=65)'>
```
## Advanced loading

37
bubbles.html
View File

@ -4,22 +4,47 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animated particles</title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Montserrat&display=block"
crossorigin="anonymous">
<link rel="stylesheet"
href="css/index.min.css"
crossorigin="anonymous"/>
integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov"
crossorigin="anonymous">
</head>
<body onload='particles(hSpeed=0, vSpeed=-100, connections=false, avoidMouse=false, hover=false)'>
<body onload='particles(noBounceV=true, speedV=-100, speedH=-15,connections=false, avoidMouse=false, hover=false)'>
<div class="wrapper">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut delectus quibusdam est rem sequi consectetur doloremque. Laborum suscipit, incidunt excepturi veniam rerum quis accusamus eaque, obcaecati modi doloremque eveniet ratione!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quod, ut aliquid doloremque impedit debitis similique dicta perferendis nam iusto consequuntur obcaecati nemo, <a href="#">perspiciatis nobis ipsum</a> nostrum eos quasi est quidem reiciendis ducimus beatae repudiandae. Facere mollitia incidunt recusandae, voluptatem ullam placeat fugiat autem nihil. Hic quia accusantium nesciunt dicta.</p>
<div class="spacer"></div>
<header>
<h1>ab-particles</h1>
<h2>simple, lightweight vanilla-javascript particle animation</h2>
</header>
<main>
<p>This is a sample page showing off some settings of this tiny (5kb!) script. No external libraries, no external configuration files, no jQuery. Just javascript and easy colour styling via CSS variables.</p>
<p>Configuration details, download and source at <a href="http://git.asifbacchus.app/asif/ab-particles.git">my git repo</a>.</p>
<p>Thanks for checking it out!</p>
</main>
<div class="spacer"></div>
<footer>
<p>Design, code and content appearing on this site is developed by
<a href="https://asifbacchus.com">Asif Bacchus</a> ('author') and
may be freely used and redistributed in accordance with the <a
href="https://git.asifbacchus.app/asif/ab-particles/LICENSE">license</a>
appearing in the <a
href="https://git.asifbacchus.app/asif/ab-particles.git">content
repo</a>. Author provides no warranties, guarantees or implications
of suitability and disclaims any and all responsibility arising from
the usage of anything appearing on or linked to this page for any
purpose whatsoever. Copyright 2020 Asif Bacchus. Some Rights
Reserved.</p>
</footer>
</div>
<canvas id="particles"></canvas>
<!-- javascript -->
<script
src="js/ab-particles.min.js"
integrity="sha384-HI+YXFmq6RX6R45hGuCOv6U/XhbS6swme7nnQVc8g6QfhucST79WEzlK6XMbanUp"
crossorigin="anonymous"
integrity="sha384-eUruDNgO8YkfdY2sU3oCkjzhJbnXXT9kac3I8DwYkh2mjE0jCIKvTgN6yvvo9SqO"
defer>
</script>
<!-- end javascript -->

37
defaults.html
View File

@ -4,22 +4,47 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animated particles</title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Montserrat&display=block"
crossorigin="anonymous">
<link rel="stylesheet"
href="css/index.min.css"
crossorigin="anonymous"/>
integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov"
crossorigin="anonymous">
</head>
<body onload='particles(opacity=100, numParticles=10, sizeMultiplier=5, width=1, connections=true, connectionDensity=15, speed=50, avoidMouse=true, hover=true)'>
<body onload='particles(opacity=100, numParticles=10, sizeMultiplier=5, width=1, connections=true, connectionDensity=15, noBounceH=false, noBounceV=false, speed=50, avoidMouse=true, hover=true)'>
<div class="wrapper">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut delectus quibusdam est rem sequi consectetur doloremque. Laborum suscipit, incidunt excepturi veniam rerum quis accusamus eaque, obcaecati modi doloremque eveniet ratione!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quod, ut aliquid doloremque impedit debitis similique dicta perferendis nam iusto consequuntur obcaecati nemo, <a href="#">perspiciatis nobis ipsum</a> nostrum eos quasi est quidem reiciendis ducimus beatae repudiandae. Facere mollitia incidunt recusandae, voluptatem ullam placeat fugiat autem nihil. Hic quia accusantium nesciunt dicta.</p>
<div class="spacer"></div>
<header>
<h1>ab-particles</h1>
<h2>simple, lightweight vanilla-javascript particle animation</h2>
</header>
<main>
<p>This is a sample page showing off some settings of this tiny (5kb!) script. No external libraries, no external configuration files, no jQuery. Just javascript and easy colour styling via CSS variables.</p>
<p>Configuration details, download and source at <a href="http://git.asifbacchus.app/asif/ab-particles.git">my git repo</a>.</p>
<p>Thanks for checking it out!</p>
</main>
<div class="spacer"></div>
<footer>
<p>Design, code and content appearing on this site is developed by
<a href="https://asifbacchus.com">Asif Bacchus</a> ('author') and
may be freely used and redistributed in accordance with the <a
href="https://git.asifbacchus.app/asif/ab-particles/LICENSE">license</a>
appearing in the <a
href="https://git.asifbacchus.app/asif/ab-particles.git">content
repo</a>. Author provides no warranties, guarantees or implications
of suitability and disclaims any and all responsibility arising from
the usage of anything appearing on or linked to this page for any
purpose whatsoever. Copyright 2020 Asif Bacchus. Some Rights
Reserved.</p>
</footer>
</div>
<canvas id="particles"></canvas>
<!-- javascript -->
<script
src="js/ab-particles.min.js"
integrity="sha384-HI+YXFmq6RX6R45hGuCOv6U/XhbS6swme7nnQVc8g6QfhucST79WEzlK6XMbanUp"
crossorigin="anonymous"
integrity="sha384-eUruDNgO8YkfdY2sU3oCkjzhJbnXXT9kac3I8DwYkh2mjE0jCIKvTgN6yvvo9SqO"
defer>
</script>
<!-- end javascript -->

2
index.html
View File

@ -12,7 +12,7 @@
integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov"
crossorigin="anonymous">
</head>
<body onload='particles(avoidMouse=false, speed=15)'>
<body onload='particles(speed=15, avoidMouse=false, opacity=65)'>
<div class="wrapper">
<div class="spacer"></div>
<header>

37
snow.html
View File

@ -4,22 +4,47 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animated particles</title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Montserrat&display=block"
crossorigin="anonymous">
<link rel="stylesheet"
href="css/index.min.css"
crossorigin="anonymous"/>
integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov"
crossorigin="anonymous">
</head>
<body onload='particles(hSpeed=0, vSpeed=100, connections=false, avoidMouse=false, hover=false)'>
<body onload='particles(noBounceV=true, speedV=100, connections=false, avoidMouse=false, hover=false)'>
<div class="wrapper">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut delectus quibusdam est rem sequi consectetur doloremque. Laborum suscipit, incidunt excepturi veniam rerum quis accusamus eaque, obcaecati modi doloremque eveniet ratione!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quod, ut aliquid doloremque impedit debitis similique dicta perferendis nam iusto consequuntur obcaecati nemo, <a href="#">perspiciatis nobis ipsum</a> nostrum eos quasi est quidem reiciendis ducimus beatae repudiandae. Facere mollitia incidunt recusandae, voluptatem ullam placeat fugiat autem nihil. Hic quia accusantium nesciunt dicta.</p>
<div class="spacer"></div>
<header>
<h1>ab-particles</h1>
<h2>simple, lightweight vanilla-javascript particle animation</h2>
</header>
<main>
<p>This is a sample page showing off some settings of this tiny (5kb!) script. No external libraries, no external configuration files, no jQuery. Just javascript and easy colour styling via CSS variables.</p>
<p>Configuration details, download and source at <a href="http://git.asifbacchus.app/asif/ab-particles.git">my git repo</a>.</p>
<p>Thanks for checking it out!</p>
</main>
<div class="spacer"></div>
<footer>
<p>Design, code and content appearing on this site is developed by
<a href="https://asifbacchus.com">Asif Bacchus</a> ('author') and
may be freely used and redistributed in accordance with the <a
href="https://git.asifbacchus.app/asif/ab-particles/LICENSE">license</a>
appearing in the <a
href="https://git.asifbacchus.app/asif/ab-particles.git">content
repo</a>. Author provides no warranties, guarantees or implications
of suitability and disclaims any and all responsibility arising from
the usage of anything appearing on or linked to this page for any
purpose whatsoever. Copyright 2020 Asif Bacchus. Some Rights
Reserved.</p>
</footer>
</div>
<canvas id="particles"></canvas>
<!-- javascript -->
<script
src="js/ab-particles.min.js"
integrity="sha384-HI+YXFmq6RX6R45hGuCOv6U/XhbS6swme7nnQVc8g6QfhucST79WEzlK6XMbanUp"
crossorigin="anonymous"
integrity="sha384-eUruDNgO8YkfdY2sU3oCkjzhJbnXXT9kac3I8DwYkh2mjE0jCIKvTgN6yvvo9SqO"
defer>
</script>
<!-- end javascript -->

35
starrynight.html
View File

@ -4,22 +4,47 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animated particles</title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Montserrat&display=block"
crossorigin="anonymous">
<link rel="stylesheet"
href="css/index.min.css"
crossorigin="anonymous"/>
integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov"
crossorigin="anonymous">
</head>
<body onload='particles(speed=0, connections=false, avoidMouse=false, hover=false)'>
<div class="wrapper">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut delectus quibusdam est rem sequi consectetur doloremque. Laborum suscipit, incidunt excepturi veniam rerum quis accusamus eaque, obcaecati modi doloremque eveniet ratione!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quod, ut aliquid doloremque impedit debitis similique dicta perferendis nam iusto consequuntur obcaecati nemo, <a href="#">perspiciatis nobis ipsum</a> nostrum eos quasi est quidem reiciendis ducimus beatae repudiandae. Facere mollitia incidunt recusandae, voluptatem ullam placeat fugiat autem nihil. Hic quia accusantium nesciunt dicta.</p>
<div class="spacer"></div>
<header>
<h1>ab-particles</h1>
<h2>simple, lightweight vanilla-javascript particle animation</h2>
</header>
<main>
<p>This is a sample page showing off some settings of this tiny (5kb!) script. No external libraries, no external configuration files, no jQuery. Just javascript and easy colour styling via CSS variables.</p>
<p>Configuration details, download and source at <a href="http://git.asifbacchus.app/asif/ab-particles.git">my git repo</a>.</p>
<p>Thanks for checking it out!</p>
</main>
<div class="spacer"></div>
<footer>
<p>Design, code and content appearing on this site is developed by
<a href="https://asifbacchus.com">Asif Bacchus</a> ('author') and
may be freely used and redistributed in accordance with the <a
href="https://git.asifbacchus.app/asif/ab-particles/LICENSE">license</a>
appearing in the <a
href="https://git.asifbacchus.app/asif/ab-particles.git">content
repo</a>. Author provides no warranties, guarantees or implications
of suitability and disclaims any and all responsibility arising from
the usage of anything appearing on or linked to this page for any
purpose whatsoever. Copyright 2020 Asif Bacchus. Some Rights
Reserved.</p>
</footer>
</div>
<canvas id="particles"></canvas>
<!-- javascript -->
<script
src="js/ab-particles.min.js"
integrity="sha384-HI+YXFmq6RX6R45hGuCOv6U/XhbS6swme7nnQVc8g6QfhucST79WEzlK6XMbanUp"
crossorigin="anonymous"
integrity="sha384-eUruDNgO8YkfdY2sU3oCkjzhJbnXXT9kac3I8DwYkh2mjE0jCIKvTgN6yvvo9SqO"
defer>
</script>
<!-- end javascript -->

37
warpleft.html
View File

@ -4,22 +4,47 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animated particles</title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Montserrat&display=block"
crossorigin="anonymous">
<link rel="stylesheet"
href="css/index.min.css"
crossorigin="anonymous"/>
integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov"
crossorigin="anonymous">
</head>
<body onload='particles(vSpeed=0, hSpeed=100, connections=false, avoidMouse=false, hover=false)'>
<body onload='particles(noBounceH=true, speedH=100, speedV=15, connections=false, avoidMouse=false, hover=false)'>
<div class="wrapper">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut delectus quibusdam est rem sequi consectetur doloremque. Laborum suscipit, incidunt excepturi veniam rerum quis accusamus eaque, obcaecati modi doloremque eveniet ratione!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quod, ut aliquid doloremque impedit debitis similique dicta perferendis nam iusto consequuntur obcaecati nemo, <a href="#">perspiciatis nobis ipsum</a> nostrum eos quasi est quidem reiciendis ducimus beatae repudiandae. Facere mollitia incidunt recusandae, voluptatem ullam placeat fugiat autem nihil. Hic quia accusantium nesciunt dicta.</p>
<div class="spacer"></div>
<header>
<h1>ab-particles</h1>
<h2>simple, lightweight vanilla-javascript particle animation</h2>
</header>
<main>
<p>This is a sample page showing off some settings of this tiny (5kb!) script. No external libraries, no external configuration files, no jQuery. Just javascript and easy colour styling via CSS variables.</p>
<p>Configuration details, download and source at <a href="http://git.asifbacchus.app/asif/ab-particles.git">my git repo</a>.</p>
<p>Thanks for checking it out!</p>
</main>
<div class="spacer"></div>
<footer>
<p>Design, code and content appearing on this site is developed by
<a href="https://asifbacchus.com">Asif Bacchus</a> ('author') and
may be freely used and redistributed in accordance with the <a
href="https://git.asifbacchus.app/asif/ab-particles/LICENSE">license</a>
appearing in the <a
href="https://git.asifbacchus.app/asif/ab-particles.git">content
repo</a>. Author provides no warranties, guarantees or implications
of suitability and disclaims any and all responsibility arising from
the usage of anything appearing on or linked to this page for any
purpose whatsoever. Copyright 2020 Asif Bacchus. Some Rights
Reserved.</p>
</footer>
</div>
<canvas id="particles"></canvas>
<!-- javascript -->
<script
src="js/ab-particles.min.js"
integrity="sha384-HI+YXFmq6RX6R45hGuCOv6U/XhbS6swme7nnQVc8g6QfhucST79WEzlK6XMbanUp"
crossorigin="anonymous"
integrity="sha384-eUruDNgO8YkfdY2sU3oCkjzhJbnXXT9kac3I8DwYkh2mjE0jCIKvTgN6yvvo9SqO"
defer>
</script>
<!-- end javascript -->

37
warpright.html
View File

@ -4,22 +4,47 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animated particles</title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Montserrat&display=block"
crossorigin="anonymous">
<link rel="stylesheet"
href="css/index.min.css"
crossorigin="anonymous"/>
integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov"
crossorigin="anonymous">
</head>
<body onload='particles(vSpeed=0, hSpeed=-100, connections=false, avoidMouse=false, hover=false)'>
<body onload='particles(noBounceH=true, speedH=-100, connections=false, avoidMouse=false, hover=false)'>
<div class="wrapper">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut delectus quibusdam est rem sequi consectetur doloremque. Laborum suscipit, incidunt excepturi veniam rerum quis accusamus eaque, obcaecati modi doloremque eveniet ratione!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quod, ut aliquid doloremque impedit debitis similique dicta perferendis nam iusto consequuntur obcaecati nemo, <a href="#">perspiciatis nobis ipsum</a> nostrum eos quasi est quidem reiciendis ducimus beatae repudiandae. Facere mollitia incidunt recusandae, voluptatem ullam placeat fugiat autem nihil. Hic quia accusantium nesciunt dicta.</p>
<div class="spacer"></div>
<header>
<h1>ab-particles</h1>
<h2>simple, lightweight vanilla-javascript particle animation</h2>
</header>
<main>
<p>This is a sample page showing off some settings of this tiny (5kb!) script. No external libraries, no external configuration files, no jQuery. Just javascript and easy colour styling via CSS variables.</p>
<p>Configuration details, download and source at <a href="http://git.asifbacchus.app/asif/ab-particles.git">my git repo</a>.</p>
<p>Thanks for checking it out!</p>
</main>
<div class="spacer"></div>
<footer>
<p>Design, code and content appearing on this site is developed by
<a href="https://asifbacchus.com">Asif Bacchus</a> ('author') and
may be freely used and redistributed in accordance with the <a
href="https://git.asifbacchus.app/asif/ab-particles/LICENSE">license</a>
appearing in the <a
href="https://git.asifbacchus.app/asif/ab-particles.git">content
repo</a>. Author provides no warranties, guarantees or implications
of suitability and disclaims any and all responsibility arising from
the usage of anything appearing on or linked to this page for any
purpose whatsoever. Copyright 2020 Asif Bacchus. Some Rights
Reserved.</p>
</footer>
</div>
<canvas id="particles"></canvas>
<!-- javascript -->
<script
src="js/ab-particles.min.js"
integrity="sha384-HI+YXFmq6RX6R45hGuCOv6U/XhbS6swme7nnQVc8g6QfhucST79WEzlK6XMbanUp"
crossorigin="anonymous"
integrity="sha384-eUruDNgO8YkfdY2sU3oCkjzhJbnXXT9kac3I8DwYkh2mjE0jCIKvTgN6yvvo9SqO"
defer>
</script>
<!-- end javascript -->