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

Compare commits

base: asif:1d7a12528f8dd4b727163fb5b1582c588070ec9c
Branches Tags
asif:master
asif:v1.0
..
compare: asif:818c82ad6c7a964efca69ff75d19748320051ab2
Branches Tags
asif:master
asif:v1.0

No commits in common. "1d7a12528f8dd4b727163fb5b1582c588070ec9c" and "818c82ad6c7a964efca69ff75d19748320051ab2" have entirely different histories.
1d7a12528f ... 818c82ad6c

16 changed files with 103 additions and 350 deletions
Show Stats Expand all files Collapse all files

3
.gitignore vendored
View File

@ -9,5 +9,6 @@
# Local History for Visual Studio Code
.history/
# expanded CSS for troubleshooting only
# compiled CSS
css-review
css

36
README.md
View File

@ -16,7 +16,7 @@ Very simple, lightweight animated particles display that **does not** require an
## Usage (simple)
1. [Download the release file](https://git.asifbacchus.app/asif/ab-particles/releases).
1. Download the release file.
2. Edit your HTML to include a canvas with *ID* 'particles'. You can put the canvas anywhere you'd like, but I'd strongly recommend putting it at the end of the *body*.
```html
@ -54,8 +54,6 @@ Very simple, lightweight animated particles display that **does not** require an
</head>
```
> Remember to use the proper integrity checksum found in *js/integrity.sha384* and not copy the one here!
5. Because the script reads CSS variables, we need to wait until CSS is fully parsed. Add an *onload* event to the *body* tag of your HTML:
```html
@ -98,11 +96,9 @@ sizeMultiplier|Random multiplier between 0 and this number that is applied to va
width|Stroke width (px) of connector lines.|integer|1
connections|Whether or not to connect the particles to each other when they get close enough.|boolean|true
connectionDensity|How densely particles connect to each other.<br/>**Careful not to set this number too high or you can crash the browser!**|finite number > 1|15
noBounceH|Particles do not bounce off the left or right sides of the window.|boolean|false
noBounceV|Particles do not bounce off the top or bottom of the window.|boolean|false
speed|How quickly the particles bounce around the window|1 < integer < 1000|50
speedH|How quickly the particles move horizontally. Positive values move to the right, negative to the left. This overrides the value of 'speed'.|-1000 < integer < 1000|1
speedV|How quickly the particles move vertically. Positive values move down, negative move up. This overrides the value of 'speed'.|-1000 < integer < 1000|1
hSpeed|How quickly the particles move horizontally. Positive values move to the right, negative to the left. This overrides the value of 'speed'.|-1000 < integer < 1000|1
vSpeed|How quickly the particles move vertically. Positive values move down, negative move up. This overrides the value of 'speed'.|-1000 < integer < 1000|1
avoidMouse|Should particles be repelled away from the mouse?|boolean|true
hover|Should connection lines change colours when the mouse is near them?|boolean|true
@ -110,15 +106,15 @@ hover|Should connection lines change colours when the mouse is near them?|boolea
### default settings (explicit)
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](https://asifbacchus.app/public/samples/ab-particles/defaults.html)
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, noBounceH=false, noBounceV=false, speed=50, avoidMouse=true, hover=true)'>
<body onload='particles(opacity=100, numParticles=10, sizeMultiplier=5, width=1, connections=true, connectionDensity=15, speed=50, avoidMouse=true, hover=true)'>
```
### starry night
Freeze the display, remove connections, disable mouse interaction. Creates a random assortment of particles that will change on each reload. [Sample](https://asifbacchus.app/public/samples/ab-particles/starrynight.html)
Freeze the display, remove connections, disable mouse interaction. Creates a random assortment of particles that will change on each reload. [Sample](starrynight.html)
```html
<body onload='particles(speed=0, connections=false, avoidMouse=false, hover=false)'>
@ -126,42 +122,42 @@ Freeze the display, remove connections, disable mouse interaction. Creates a ran
### snow
No horizontal movement, connections or mouse interaction. Particles fall straight down, so no vertical bounce. [Sample](https://asifbacchus.app/public/samples/ab-particles/snow.html)
No horizontal movement, connections or mouse interaction. Particles fall straight down. [Sample](snow.html)
```html
<body onload='particles(noBounceV=true, speedV=100, connections=false, avoidMouse=false, hover=false)'>
<body onload='particles(hSpeed=0, vSpeed=100, connections=false, avoidMouse=false, hover=false)'>
```
### bubbles
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](https://asifbacchus.app/public/samples/ab-particles/bubbles.html)
Opposite of snow, looks a little like bubbles. [Sample](bubbles.html)
```html
<body onload='particles(noBounceV=true, speedV=-100, speedH=-15,connections=false, avoidMouse=false, hover=false)'>
<body onload='particles(hSpeed=0, vSpeed=-100, connections=false, avoidMouse=false, hover=false)'>
```
### warp speed to the right
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](https://asifbacchus.app/public/samples/ab-particles/warpright.html)
Moving right would make the particles go left, therefore negative movement. We don't want connections or mouse interaction here either. [Sample](warpright.html)
```html
<body onload='particles(noBounceH=true, speedH=-100, connections=false, avoidMouse=false, hover=false)'>
<body onload='particles(vSpeed=0, hSpeed=-100, connections=false, avoidMouse=false, hover=false)'>
```
### warp speed to the left
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](https://asifbacchus.app/public/samples/ab-particles/warpleft.html)
Moving left would make the particles go right, therefore positive movement. We don't want connections or mouse interaction here either. [Sample](warpleft.html)
```html
<body onload='particles(noBounceH=true, speedH=100, speedV=15, connections=false, avoidMouse=false, hover=false)'>
<body onload='particles(vSpeed=0, hSpeed=100, 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? Toning down the opacity a little to not distract from the text. [Sample](https://asifbacchus.app/public/samples/ab-particles/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? [Sample](index.html)
```html
<body onload='particles(speed=15, avoidMouse=false, opacity=65)'>
<body onload='particles(speed=15, avoidMouse=false)'>
```
## Advanced loading

37
bubbles.html
View File

@ -4,47 +4,22 @@
<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"
integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov"
crossorigin="anonymous">
crossorigin="anonymous"/>
</head>
<body onload='particles(noBounceV=true, speedV=-100, speedH=-15,connections=false, avoidMouse=false, hover=false)'>
<body onload='particles(hSpeed=0, vSpeed=-100, connections=false, avoidMouse=false, hover=false)'>
<div class="wrapper">
<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>
<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>
<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
css/index.min.css vendored
View File

@ -1,2 +0,0 @@
@media only screen and (max-width: 640px){:root{font-size:42.5%}}@media only screen and (min-width: 641px) and (max-width: 1024px){:root{font-size:50%}}@media only screen and (min-width: 1025px){:root{font-size:62.5%}}:root{height:100%;scroll-behavior:smooth;width:100%}:root body{font-size:2.2rem;height:100%;line-height:2.75rem;width:100%}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:inherit;font:inherit;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}:root{--col-bg: #212121;--col-link: #bbdefb;--col-text: #ebe7c5;--col-particle-stroke-hover: #0892d0;--col-particle-stroke: #035096;--col-particle: #536878}body{background-color:var(--col-bg);color:var(--col-text);font-family:'Montserrat', sans-serif;font-size:1.6rem;line-height:1.6rem}main{-webkit-box-flex:1;-ms-flex:1;flex:1}header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}footer{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.5rem;line-height:1.85rem}h1{font-size:5rem;line-height:5rem;margin-bottom:1rem}h2{font-size:3rem;line-height:3rem;margin-bottom:5rem}p{margin-bottom:1.5rem}a{color:inherit;font-weight:bold;text-decoration:underline;-webkit-transition:all 0.5s ease;transition:all 0.5s ease}a:hover,a:focus,a:active{color:var(--col-link)}#particles{height:100%;left:0;position:fixed;top:0;width:100%;z-index:-999}.wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:100%;padding:2rem}.spacer{-webkit-box-flex:1;-ms-flex:1;flex:1}
/*# sourceMappingURL=index.min.css.map */

11
css/index.min.css.map
View File

@ -1,11 +0,0 @@
{
"version": 3,
"mappings": "ACKA,MAAM,MAAM,MAAM,MAAM,SAAS,EAAE,KAAK,EACvC,AAAA,KAAK,AAAC,CACL,SAAS,CAAE,KAAK,CAChB,CAGF,MAAM,MAAM,MAAM,MAAM,SAAS,EAAE,KAAK,OAAO,SAAS,EAAE,MAAM,EAC/D,AAAA,KAAK,AAAC,CACL,SAAS,CAAE,GAAG,CACd,CAGF,MAAM,MAAM,MAAM,MAAM,SAAS,EAAE,MAAM,EACxC,AAAA,KAAK,AAAC,CACL,SAAS,CAAE,KAAK,CAChB,CAIF,AAAA,KAAK,AAAC,CACL,MAAM,CAAE,IAAI,CACZ,eAAe,CAAE,MAAM,CACvB,KAAK,CAAE,IAAI,CAOX,AAVD,AAII,KAJC,CAID,IAAI,AAAC,CACP,SAAS,CAAE,MAAM,CACjB,MAAM,CAAE,IAAI,CACZ,WAAW,CAAE,OAAa,CAC1B,KAAK,CAAE,IAAI,CACR,AAGL,AAAA,IAAI,CAAE,IAAI,CAAE,GAAG,CAAE,IAAI,CAAE,MAAM,CAAE,MAAM,CAAE,MAAM,CAC7C,EAAE,CAAE,EAAE,CAAE,EAAE,CAAE,EAAE,CAAE,EAAE,CAAE,EAAE,CAAE,CAAC,CAAE,UAAU,CAAE,GAAG,CAC1C,CAAC,CAAE,IAAI,CAAE,OAAO,CAAE,OAAO,CAAE,GAAG,CAAE,IAAI,CAAE,IAAI,CAC1C,GAAG,CAAE,GAAG,CAAE,EAAE,CAAE,GAAG,CAAE,GAAG,CAAE,GAAG,CAAE,CAAC,CAAE,CAAC,CAAE,IAAI,CACvC,KAAK,CAAE,MAAM,CAAE,MAAM,CAAE,GAAG,CAAE,GAAG,CAAE,EAAE,CAAE,GAAG,CACxC,CAAC,CAAE,CAAC,CAAE,CAAC,CAAE,MAAM,CACf,EAAE,CAAE,EAAE,CAAE,EAAE,CAAE,EAAE,CAAE,EAAE,CAAE,EAAE,CACtB,QAAQ,CAAE,IAAI,CAAE,KAAK,CAAE,MAAM,CAC7B,KAAK,CAAE,OAAO,CAAE,KAAK,CAAE,KAAK,CAAE,KAAK,CAAE,EAAE,CAAE,EAAE,CAAE,EAAE,CAC/C,OAAO,CAAE,KAAK,CAAE,MAAM,CAAE,OAAO,CAAE,KAAK,CACtC,MAAM,CAAE,UAAU,CAAE,MAAM,CAAE,MAAM,CAAE,MAAM,CAC1C,IAAI,CAAE,GAAG,CAAE,MAAM,CAAE,IAAI,CAAE,OAAO,CAAE,OAAO,CACzC,IAAI,CAAE,IAAI,CAAE,KAAK,CAAE,KAAK,AAAC,CACxB,MAAM,CAAE,CAAC,CACT,UAAU,CAAE,UAAU,CACtB,SAAS,CAAE,OAAO,CAClB,IAAI,CAAE,OAAO,CACb,MAAM,CAAE,CAAC,CACT,OAAO,CAAE,CAAC,CACV,cAAc,CAAE,QAAQ,CACxB,AAGD,AAAA,OAAO,CAAE,KAAK,CAAE,OAAO,CAAE,UAAU,CAAE,MAAM,CAC3C,MAAM,CAAE,MAAM,CAAE,MAAM,CAAE,IAAI,CAAE,GAAG,CAAE,OAAO,AAAC,CAC1C,OAAO,CAAE,KAAK,CACd,AAED,AAAA,EAAE,CAAE,EAAE,AAAC,CACN,UAAU,CAAE,IAAI,CAChB,AAED,AAAA,UAAU,CAAE,CAAC,AAAC,CACb,MAAM,CAAE,IAAI,CACZ,AAED,AAAA,UAAU,AAAA,OAAO,CAAE,UAAU,AAAA,MAAM,CACnC,CAAC,AAAA,OAAO,CAAE,CAAC,AAAA,MAAM,AAAC,CACjB,OAAO,CAAE,EAAE,CACX,OAAO,CAAE,IAAI,CACb,AAED,AAAA,KAAK,AAAC,CACL,eAAe,CAAE,QAAQ,CACzB,cAAc,CAAE,CAAC,CACjB,AChFD,AAAA,KAAK,AAAC,CACF,QAAQ,CAAA,QAAC,CACT,UAAU,CAAA,QAAC,CACX,UAAU,CAAA,QAAC,CAEX,2BAA2B,CAAA,QAAC,CAC5B,qBAAqB,CAAA,QAAC,CACtB,cAAc,CAAA,QAAC,CAClB,AFDD,AAAA,IAAI,AAAC,CACD,gBAAgB,CAAE,aAAa,CAC/B,KAAK,CAAE,eAAe,CACtB,WAAW,CAAE,wBAAwB,CACrC,SAAS,CAAE,MAAM,CACjB,WAAW,CAAE,MAAM,CACtB,AAED,AAAA,IAAI,AAAC,CACD,IAAI,CAAE,CAAC,CACV,AAED,AAAA,MAAM,AAAC,CACH,WAAW,CAAE,MAAM,CACnB,OAAO,CAAE,IAAI,CACb,cAAc,CAAE,MAAM,CACzB,AAED,AAAA,MAAM,AAAC,CACH,OAAO,CAAE,IAAI,CACb,SAAS,CAAE,MAAM,CACjB,WAAW,CAAE,OAAO,CACvB,AAED,AAAA,EAAE,AAAC,CACC,SAAS,CAAE,IAAI,CACf,WAAW,CAAE,IAAI,CACjB,aAAa,CAAE,IAAI,CACtB,AAED,AAAA,EAAE,AAAC,CACC,SAAS,CAAE,IAAI,CACf,WAAW,CAAE,IAAI,CACjB,aAAa,CAAE,IAAI,CACtB,AAED,AAAA,CAAC,AAAC,CACE,aAAa,CAAE,MAAM,CACxB,AAED,AAAA,CAAC,AAAC,CACE,KAAK,CAAE,OAAO,CACd,WAAW,CAAE,IAAI,CACjB,eAAe,CAAE,SAAS,CAC1B,UAAU,CAAE,aAAa,CAM5B,AAVD,AAKI,CALH,AAKI,MAAM,CALX,CAAC,AAMI,MAAM,CANX,CAAC,AAOI,OAAO,AAAC,CACL,KAAK,CAAE,eAAe,CACzB,AAGL,AAAA,UAAU,AAAC,CACP,MAAM,CAAE,IAAI,CACZ,IAAI,CAAE,CAAC,CACP,QAAQ,CAAE,KAAK,CACf,GAAG,CAAE,CAAC,CACN,KAAK,CAAE,IAAI,CACX,OAAO,CAAE,IAAI,CAChB,AAED,AAAA,QAAQ,AAAC,CACL,OAAO,CAAE,IAAI,CACb,cAAc,CAAE,MAAM,CACtB,eAAe,CAAE,MAAM,CACvB,UAAU,CAAE,IAAI,CAChB,OAAO,CAAE,IAAI,CAChB,AACA,AAAA,OAAO,AAAC,CACJ,IAAI,CAAE,CAAC,CACV",
"sources": [
"../scss/index.scss",
"../scss/_reset.scss",
"../scss/_palette.scss"
],
"names": [],
"file": "index.min.css"
}

37
defaults.html
View File

@ -4,47 +4,22 @@
<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"
integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov"
crossorigin="anonymous">
crossorigin="anonymous"/>
</head>
<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)'>
<body onload='particles(opacity=100, numParticles=10, sizeMultiplier=5, width=1, connections=true, connectionDensity=15, speed=50, avoidMouse=true, hover=true)'>
<div class="wrapper">
<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>
<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>
<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
index.html
View File

@ -4,47 +4,22 @@
<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"
integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov"
crossorigin="anonymous">
crossorigin="anonymous"/>
</head>
<body onload='particles(speed=15, avoidMouse=false, opacity=65)'>
<body onload='particles(avoidMouse=false, speed=15)'>
<div class="wrapper">
<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>
<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>
<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 -->

79
js/ab-particles.js
View File

@ -58,12 +58,12 @@ function particles(){
// check particle position, mouse position, move particle and draw it
update(){
// check if particle.x is still within canvas
if (noBounceH === true && speedH > 0){
if (vSpeed === 0 && hSpeed > 0){
if (this.x > canvas.width){
this.x = 0;
}
}
else if (noBounceH === true && speedH < 0){
else if (vSpeed === 0 && hSpeed < 0){
if (this.x < 0){
this.x = canvas.width;
}
@ -75,12 +75,12 @@ function particles(){
}
// check if particle.y is still within canvas
if (noBounceV === true && speedV > 0){
if (hSpeed === 0 && vSpeed > 0){
if (this.y > canvas.height) {
this.y = 0;
}
}
else if (noBounceV === true && speedV < 0){
else if (hSpeed === 0 && vSpeed < 0){
if (this.y < 0){
this.y = canvas.height;
}
@ -114,8 +114,8 @@ function particles(){
// move particle
if (speed !== 0) {
this.x += this.directionX * speed * speedH;
this.y += this.directionY * speed * speedV;
this.x += this.directionX * speed * hSpeed;
this.y += this.directionY * speed * vSpeed;
}
// draw particle
@ -129,24 +129,25 @@ function particles(){
let numberOfParticles = canvas.width * 0.01;
for (let i = 0; i < numberOfParticles * numParticles; i++){
let size = (Math.random() * sizeMultiplier) + 1;
// set X
let x = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2);
if (noBounceH){
directionX = Math.random() * 5;
let y = (Math.random() * ((innerHeight - size * 2) - (size * 2)) + size * 2);
// set directionX
let directionX = 0
if (vSpeed === 0){
directionX = (Math.random() * 5);
}
else{
else {
directionX = (Math.random() * 5) - 2.5;
}
// set Y
let y = (Math.random() * ((innerHeight - size * 2) - (size * 2)) + size * 2);
if (noBounceV){
directionY = Math.random() * 5;
// set directionY
let directionY = 0;
if (hSpeed === 0){
directionY = (Math.random() * 5);
}
else{
directionY = (Math.random() * 5) -2.5;
directionY = (Math.random() * 5) - 2.5;
}
particlesArray.push(new Particle(x, y, directionX, directionY, size));
}
}
@ -286,28 +287,6 @@ function particles(){
console.log("'connectionDensity' must be a finite number greater than 1. Using default of '15'.");
}
if (typeof noBounceH == 'undefined'){
noBounceH = false;
}
else if (typeof noBounceH === 'boolean'){
noBounceH;
}
else{
noBounceH = false;
console.log("'noBounceH' must be either 'true' or 'false'. Using default of 'false'.");
}
if (typeof noBounceV == 'undefined'){
noBounceV = false;
}
else if (typeof noBounceV === 'boolean'){
noBounceV;
}
else{
noBounceV = false;
console.log("'noBounceV' must be either 'true' or 'false'. Using default of 'false'.");
}
if (typeof speed == 'undefined'){
speed = 50;
}
@ -319,28 +298,28 @@ function particles(){
console.log("'speed' must be an integer between 1-1000. Using default of '50'.");
};
if (typeof speedH == 'undefined'){
speedH = 1;
if (typeof hSpeed == 'undefined'){
hSpeed = 1;
}
else if (Number.isInteger(speedH) && (-1000 <= speedH && speedH <= 1000)){
speedH;
else if (Number.isInteger(hSpeed) && (-1000 <= hSpeed && hSpeed <= 1000)){
hSpeed;
speed = 1;
}
else{
speedH = 1;
console.log("'speedH' must be an integer between -1000 and 1000. Using default of '1'.");
hSpeed = 1;
console.log("'hSpeed' must be an integer between -1000 and 1000. Using default of '1'.");
};
if (typeof speedV == 'undefined'){
speedV = 1;
if (typeof vSpeed == 'undefined'){
vSpeed = 1;
}
else if (Number.isInteger(speedV) && (-1000 <= speedV && speedV <= 1000)){
speedV;
else if (Number.isInteger(vSpeed) && (-1000 <= vSpeed && vSpeed <= 1000)){
vSpeed;
speed = 1;
}
else{
speedV = 1;
console.log("'speedV' must be an integer between -1000 and 1000. Using default of '1'.");
vSpeed = 1;
console.log("'vSpeed' must be an integer between -1000 and 1000. Using default of '1'.");
};
if (typeof avoidMouse == 'undefined'){

2
js/ab-particles.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
js/integrity.sha384
View File

@ -1,5 +1,5 @@
ab-particles.js
sha384-PpJE3R4II13gzBeewjjwi2f4nhJwQlF+npzxD5peeir09lsN/8PQi6JPvi3l98LB
sha384-32rQlAEttnfdAaALKP4Mx9JCGitJhSWyOtuEEhN9guPoNMB/3N9bvQdyLOMwWfmf
ab-particles.min.js
sha384-HI+YXFmq6RX6R45hGuCOv6U/XhbS6swme7nnQVc8g6QfhucST79WEzlK6XMbanUp
sha384-eUruDNgO8YkfdY2sU3oCkjzhJbnXXT9kac3I8DwYkh2mjE0jCIKvTgN6yvvo9SqO

10
scss/_palette.scss
View File

@ -1,10 +1,8 @@
// colour palette
// colours used thoughout site
:root {
--col-bg: #212121;
--col-link: #bbdefb;
--col-text: #ebe7c5;
--col-particle-stroke-hover: #0892d0;
--col-particle-stroke: #035096;
--col-particle: #536878;
--col-particle-stroke: #035096;
--col-particle-stroke-hover: #0892d0;
--col-text: #ebe7c5;
}

49
scss/index.scss
View File

@ -9,37 +9,12 @@ import partials
body {
background-color: var(--col-bg);
color: var(--col-text);
font-family: 'Montserrat', sans-serif;
font-size: 1.6rem;
line-height: 1.6rem;
}
main {
flex: 1;
}
header {
align-items: center;
display: flex;
flex-direction: column;
}
footer {
display: flex;
font-size: 1.5rem;
line-height: 1.85rem;
}
h1 {
font-size: 5rem;
line-height: 5rem;
margin-bottom: 1rem;
}
h2 {
font-size: 3rem;
line-height: 3rem;
margin-bottom: 5rem;
margin-bottom: 3rem;
}
p {
@ -48,16 +23,19 @@ p {
a {
color: inherit;
font-weight: bold;
text-decoration: underline;
transition: all 0.5s ease;
&:hover,
&:focus,
&:active {
color: var(--col-link);
color: red;
}
}
.wrapper {
display: flex;
flex-direction: column;
padding: 2rem;
}
#particles {
height: 100%;
left: 0;
@ -66,14 +44,3 @@ a {
width: 100%;
z-index: -999;
}
.wrapper {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
padding: 2rem;
}
.spacer {
flex: 1;
}

37
snow.html
View File

@ -4,47 +4,22 @@
<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"
integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov"
crossorigin="anonymous">
crossorigin="anonymous"/>
</head>
<body onload='particles(noBounceV=true, speedV=100, connections=false, avoidMouse=false, hover=false)'>
<body onload='particles(hSpeed=0, vSpeed=100, connections=false, avoidMouse=false, hover=false)'>
<div class="wrapper">
<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>
<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>
<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,47 +4,22 @@
<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"
integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov"
crossorigin="anonymous">
crossorigin="anonymous"/>
</head>
<body onload='particles(speed=0, connections=false, avoidMouse=false, hover=false)'>
<div class="wrapper">
<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>
<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>
<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,47 +4,22 @@
<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"
integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov"
crossorigin="anonymous">
crossorigin="anonymous"/>
</head>
<body onload='particles(noBounceH=true, speedH=100, speedV=15, connections=false, avoidMouse=false, hover=false)'>
<body onload='particles(vSpeed=0, hSpeed=100, connections=false, avoidMouse=false, hover=false)'>
<div class="wrapper">
<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>
<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>
<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,47 +4,22 @@
<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"
integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov"
crossorigin="anonymous">
crossorigin="anonymous"/>
</head>
<body onload='particles(noBounceH=true, speedH=-100, connections=false, avoidMouse=false, hover=false)'>
<body onload='particles(vSpeed=0, hSpeed=-100, connections=false, avoidMouse=false, hover=false)'>
<div class="wrapper">
<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>
<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>
<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 -->