Compare commits
15 Commits
818c82ad6c
...
v1.0
| Author | SHA1 | Date | |
|---|---|---|---|
 Asif Bacchus
|
af0a60b8b1 | ||
|
Asif Bacchus
|
0f0e182c4c | ||
|
Asif Bacchus
|
e61be6247f | ||
|
Asif Bacchus
|
658e97de7e | ||
|
Asif Bacchus
|
1d7a12528f | ||
|
Asif Bacchus
|
3e13824dfb | ||
|
Asif Bacchus
|
c496077ae9 | ||
|
Asif Bacchus
|
632b556310 | ||
|
Asif Bacchus
|
eca5bd9d95 | ||
|
Asif Bacchus
|
d1cde40984 | ||
|
Asif Bacchus
|
14931c7dc9 | ||
|
Asif Bacchus
|
db11078881 | ||
|
Asif Bacchus
|
e6ab47bfdd | ||
|
Asif Bacchus
|
5d44e2d93b | ||
|
Asif Bacchus
|
81e41b9fd3 |
+1
-2
@@ -9,6 +9,5 @@
|
||||
# Local History for Visual Studio Code
|
||||
.history/
|
||||
|
||||
# compiled CSS
|
||||
# expanded CSS for troubleshooting only
|
||||
css-review
|
||||
css
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2020 Asif Bacchus
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@@ -1,6 +1,24 @@
|
||||
# ab-particles: vanilla javascript particle animation
|
||||
|
||||
Very simple, lightweight animated particles display that **does not** require any external files whatsoever. No libraries, configuration JSON or anything. This is a stripped-down version of the famous ['js-particles' by Vincent Garreau](https://vincentgarreau.com/particles.js) and the code was inspired by an amazing tutorial by [Franks Laboratory](https://youtu.be/d620nV6bp0A).
|
||||
Very simple, lightweight animated particles display that **does not** require any external files whatsoever. No libraries, configuration JSON or anything. This is a stripped-down version of the famous <a href="https://vincentgarreau.com/particles.js" target="_blank">'js-particles' by Vincent Garreau</a> and the code was inspired by an amazing tutorial by <a href="https://youtu.be/d620nV6bp0A" target="_blank">Franks Laboratory</a>.
|
||||
- [Features](#features)
|
||||
- [Usage (simple)](#usage-simple)
|
||||
- [CSS customizations (colours)](#css-customizations-colours)
|
||||
- [Setting feature parameters](#setting-feature-parameters)
|
||||
- [Examples](#examples)
|
||||
- [default settings (explicit)](#default-settings-explicit)
|
||||
- [starry night](#starry-night)
|
||||
- [snow](#snow)
|
||||
- [bubbles](#bubbles)
|
||||
- [warp speed to the right](#warp-speed-to-the-right)
|
||||
- [warp speed to the left](#warp-speed-to-the-left)
|
||||
- [my usual settings (nice background effect)](#my-usual-settings-nice-background-effect)
|
||||
- [Advanced loading](#advanced-loading)
|
||||
- [Sub-resource Integrity (SRI)](#sub-resource-integrity-sri)
|
||||
- [addEventListener](#addeventlistener)
|
||||
- [Notes](#notes)
|
||||
- [License and usage](#license-and-usage)
|
||||
- [Final thoughts](#final-thoughts)
|
||||
|
||||
## Features
|
||||
|
||||
@@ -16,7 +34,7 @@ Very simple, lightweight animated particles display that **does not** require an
|
||||
|
||||
## Usage (simple)
|
||||
|
||||
1. Download the release file.
|
||||
1. [Download the release file](https://git.asifbacchus.app/asif/ab-particles/releases).
|
||||
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,6 +72,8 @@ 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
|
||||
@@ -96,9 +116,11 @@ 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
|
||||
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
|
||||
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
|
||||
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
|
||||
|
||||
@@ -106,15 +128,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](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. <a href="https://asifbacchus.app/public/samples/ab-particles/defaults.html" target="_blank">[Sample]</a>
|
||||
|
||||
```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
|
||||
|
||||
Freeze the display, remove connections, disable mouse interaction. Creates a random assortment of particles that will change on each reload. [Sample](starrynight.html)
|
||||
Freeze the display, remove connections, disable mouse interaction. Creates a random assortment of particles that will change on each reload. <a href="https://asifbacchus.app/public/samples/ab-particles/starrynight.html" target="_blank">[Sample]</a>
|
||||
|
||||
```html
|
||||
<body onload='particles(speed=0, connections=false, avoidMouse=false, hover=false)'>
|
||||
@@ -122,42 +144,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. <a href="https://asifbacchus.app/public/samples/ab-particles/snow.html" target="_blank">[Sample]</a>
|
||||
|
||||
```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'. <a href="https://asifbacchus.app/public/samples/ab-particles/bubbles.html" target="_blank">[Sample]</a>
|
||||
|
||||
```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. <a href="https://asifbacchus.app/public/samples/ab-particles/warpright.html" target="_blank">[Sample]</a>
|
||||
|
||||
```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. <a href="https://asifbacchus.app/public/samples/ab-particles/warpleft.html" target="_blank">[Sample]</a>
|
||||
|
||||
```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. <a href="https://asifbacchus.app/public/samples/ab-particles/index.html" target="_blank">[Sample]</a>
|
||||
|
||||
```html
|
||||
<body onload='particles(speed=15, avoidMouse=false)'>
|
||||
<body onload='particles(speed=15, avoidMouse=false, opacity=65)'>
|
||||
```
|
||||
|
||||
## Advanced loading
|
||||
@@ -188,6 +210,10 @@ Again, I recommend using *load* instead of something like *DOMContentLoaded* sin
|
||||
- *numParticles* is a multiplier. The script takes 1% of the window width and sets that as the number of particles it will generate multiplied by the value of *numParticles*. It is because this is a multiplier that you need to be careful about setting high values!
|
||||
- I don't really like most of the popular animations such as clicking to add more particles or 'grabbing' particles on hover/click. As such, I have not implemented these animations. Let me know if this is something you want!
|
||||
|
||||
## License and usage
|
||||
|
||||
You are free to use this script for anything or in any way you want including modifying it to suit your needs. While not necessary, I'd love if you put an attribution on your site if you use it and/or link back to this repo either on the page or at least in your HTML with a comment. Most important, if you improve the code, PLEASE contribute it back in this repo via a pull request or an issue or something. Thanks!
|
||||
|
||||
## Final thoughts
|
||||
|
||||
I put this together pretty quickly to generate a less boring background for a login page I was working on. As such, I didn't really add many bells and whistles. I wanted to keep it pretty lean and focussed. Also, this is one of the first javascript projects I've decided to 'release into the wild' for others to use. So, I'd love any feedback, suggestions and improvements you have to offer! I'm a horrid programmer so don't worry, I won't be offended by any criticism and look forward to maybe learning a few things from your suggestions!
|
||||
|
||||
+31
-6
@@ -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 -->
|
||||
|
||||
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
@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 */
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"sources": [
|
||||
"../scss/index.scss",
|
||||
"../scss/_reset.scss",
|
||||
"../scss/_palette.scss"
|
||||
],
|
||||
"names": [],
|
||||
"file": "index.min.css"
|
||||
}
|
||||
+31
-6
@@ -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 -->
|
||||
|
||||
+31
-6
@@ -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(avoidMouse=false, speed=15)'>
|
||||
<body onload='particles(speed=15, avoidMouse=false, opacity=65)'>
|
||||
<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 -->
|
||||
|
||||
+48
-27
@@ -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 (vSpeed === 0 && hSpeed > 0){
|
||||
if (noBounceH === true && speedH > 0){
|
||||
if (this.x > canvas.width){
|
||||
this.x = 0;
|
||||
}
|
||||
}
|
||||
else if (vSpeed === 0 && hSpeed < 0){
|
||||
else if (noBounceH === true && speedH < 0){
|
||||
if (this.x < 0){
|
||||
this.x = canvas.width;
|
||||
}
|
||||
@@ -75,12 +75,12 @@ function particles(){
|
||||
}
|
||||
|
||||
// check if particle.y is still within canvas
|
||||
if (hSpeed === 0 && vSpeed > 0){
|
||||
if (noBounceV === true && speedV > 0){
|
||||
if (this.y > canvas.height) {
|
||||
this.y = 0;
|
||||
}
|
||||
}
|
||||
else if (hSpeed === 0 && vSpeed < 0){
|
||||
else if (noBounceV === true && speedV < 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 * hSpeed;
|
||||
this.y += this.directionY * speed * vSpeed;
|
||||
this.x += this.directionX * speed * speedH;
|
||||
this.y += this.directionY * speed * speedV;
|
||||
}
|
||||
|
||||
// draw particle
|
||||
@@ -129,25 +129,24 @@ 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);
|
||||
let y = (Math.random() * ((innerHeight - size * 2) - (size * 2)) + size * 2);
|
||||
// set directionX
|
||||
let directionX = 0
|
||||
if (vSpeed === 0){
|
||||
directionX = (Math.random() * 5);
|
||||
if (noBounceH){
|
||||
directionX = Math.random() * 5;
|
||||
}
|
||||
else{
|
||||
directionX = (Math.random() * 5) - 2.5;
|
||||
}
|
||||
// set directionY
|
||||
let directionY = 0;
|
||||
if (hSpeed === 0){
|
||||
directionY = (Math.random() * 5);
|
||||
// set Y
|
||||
let y = (Math.random() * ((innerHeight - size * 2) - (size * 2)) + size * 2);
|
||||
if (noBounceV){
|
||||
directionY = Math.random() * 5;
|
||||
}
|
||||
else{
|
||||
directionY = (Math.random() * 5) -2.5;
|
||||
}
|
||||
|
||||
|
||||
particlesArray.push(new Particle(x, y, directionX, directionY, size));
|
||||
}
|
||||
}
|
||||
@@ -287,6 +286,28 @@ 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;
|
||||
}
|
||||
@@ -298,28 +319,28 @@ function particles(){
|
||||
console.log("'speed' must be an integer between 1-1000. Using default of '50'.");
|
||||
};
|
||||
|
||||
if (typeof hSpeed == 'undefined'){
|
||||
hSpeed = 1;
|
||||
if (typeof speedH == 'undefined'){
|
||||
speedH = 1;
|
||||
}
|
||||
else if (Number.isInteger(hSpeed) && (-1000 <= hSpeed && hSpeed <= 1000)){
|
||||
hSpeed;
|
||||
else if (Number.isInteger(speedH) && (-1000 <= speedH && speedH <= 1000)){
|
||||
speedH;
|
||||
speed = 1;
|
||||
}
|
||||
else{
|
||||
hSpeed = 1;
|
||||
console.log("'hSpeed' must be an integer between -1000 and 1000. Using default of '1'.");
|
||||
speedH = 1;
|
||||
console.log("'speedH' must be an integer between -1000 and 1000. Using default of '1'.");
|
||||
};
|
||||
|
||||
if (typeof vSpeed == 'undefined'){
|
||||
vSpeed = 1;
|
||||
if (typeof speedV == 'undefined'){
|
||||
speedV = 1;
|
||||
}
|
||||
else if (Number.isInteger(vSpeed) && (-1000 <= vSpeed && vSpeed <= 1000)){
|
||||
vSpeed;
|
||||
else if (Number.isInteger(speedV) && (-1000 <= speedV && speedV <= 1000)){
|
||||
speedV;
|
||||
speed = 1;
|
||||
}
|
||||
else{
|
||||
vSpeed = 1;
|
||||
console.log("'vSpeed' must be an integer between -1000 and 1000. Using default of '1'.");
|
||||
speedV = 1;
|
||||
console.log("'speedV' must be an integer between -1000 and 1000. Using default of '1'.");
|
||||
};
|
||||
|
||||
if (typeof avoidMouse == 'undefined'){
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
+2
-2
@@ -1,5 +1,5 @@
|
||||
ab-particles.js
|
||||
sha384-32rQlAEttnfdAaALKP4Mx9JCGitJhSWyOtuEEhN9guPoNMB/3N9bvQdyLOMwWfmf
|
||||
sha384-PpJE3R4II13gzBeewjjwi2f4nhJwQlF+npzxD5peeir09lsN/8PQi6JPvi3l98LB
|
||||
|
||||
ab-particles.min.js
|
||||
sha384-eUruDNgO8YkfdY2sU3oCkjzhJbnXXT9kac3I8DwYkh2mjE0jCIKvTgN6yvvo9SqO
|
||||
sha384-HI+YXFmq6RX6R45hGuCOv6U/XhbS6swme7nnQVc8g6QfhucST79WEzlK6XMbanUp
|
||||
+6
-4
@@ -1,8 +1,10 @@
|
||||
// colours used thoughout site
|
||||
// colour palette
|
||||
:root {
|
||||
--col-bg: #212121;
|
||||
--col-particle: #536878;
|
||||
--col-particle-stroke: #035096;
|
||||
--col-particle-stroke-hover: #0892d0;
|
||||
--col-link: #bbdefb;
|
||||
--col-text: #ebe7c5;
|
||||
|
||||
--col-particle-stroke-hover: #0892d0;
|
||||
--col-particle-stroke: #035096;
|
||||
--col-particle: #536878;
|
||||
}
|
||||
|
||||
+41
-8
@@ -9,12 +9,37 @@ 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: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3rem;
|
||||
line-height: 3rem;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
@@ -23,19 +48,16 @@ p {
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
transition: all 0.5s ease;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: red;
|
||||
color: var(--col-link);
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
#particles {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
@@ -44,3 +66,14 @@ a {
|
||||
width: 100%;
|
||||
z-index: -999;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-height: 100%;
|
||||
padding: 2rem;
|
||||
}
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@@ -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 -->
|
||||
|
||||
+30
-5
@@ -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 -->
|
||||
|
||||
+31
-6
@@ -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 -->
|
||||
|
||||
+31
-6
@@ -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 -->
|
||||
|
||||
Reference in New Issue
Block a user