From c496077ae934af7292e02cbc1f835e8e2fc7dff4 Mon Sep 17 00:00:00 2001 From: Asif Bacchus Date: Fri, 10 Apr 2020 16:12:15 -0600 Subject: [PATCH] update all sample pages and config samples --- README.md | 22 +++++++++++----------- bubbles.html | 37 +++++++++++++++++++++++++++++++------ defaults.html | 37 +++++++++++++++++++++++++++++++------ index.html | 2 +- snow.html | 37 +++++++++++++++++++++++++++++++------ starrynight.html | 35 ++++++++++++++++++++++++++++++----- warpleft.html | 37 +++++++++++++++++++++++++++++++------ warpright.html | 37 +++++++++++++++++++++++++++++++------ 8 files changed, 197 insertions(+), 47 deletions(-) diff --git a/README.md b/README.md index 626688a..d26bb66 100644 --- a/README.md +++ b/README.md @@ -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 - + ``` ### 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 - + ``` ### 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 - + ``` ### 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 - + ``` ### 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 - + ``` ### 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 - + ``` ## Advanced loading diff --git a/bubbles.html b/bubbles.html index 2a1a1a9..ad6722e 100644 --- a/bubbles.html +++ b/bubbles.html @@ -4,22 +4,47 @@ animated particles + + integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov" + crossorigin="anonymous"> - +
-

Lorem ipsum dolor sit amet.

-

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!

-

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quod, ut aliquid doloremque impedit debitis similique dicta perferendis nam iusto consequuntur obcaecati nemo, perspiciatis nobis ipsum nostrum eos quasi est quidem reiciendis ducimus beatae repudiandae. Facere mollitia incidunt recusandae, voluptatem ullam placeat fugiat autem nihil. Hic quia accusantium nesciunt dicta.

+
+
+

ab-particles

+

simple, lightweight vanilla-javascript particle animation

+
+
+

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.

+

Configuration details, download and source at my git repo.

+

Thanks for checking it out!

+
+
+
+

Design, code and content appearing on this site is developed by + Asif Bacchus ('author') and + may be freely used and redistributed in accordance with the license + appearing in the content + repo. 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.

+
diff --git a/defaults.html b/defaults.html index 9f5c7e6..50d1c9d 100644 --- a/defaults.html +++ b/defaults.html @@ -4,22 +4,47 @@ animated particles + + integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov" + crossorigin="anonymous"> - +
-

Lorem ipsum dolor sit amet.

-

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!

-

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quod, ut aliquid doloremque impedit debitis similique dicta perferendis nam iusto consequuntur obcaecati nemo, perspiciatis nobis ipsum nostrum eos quasi est quidem reiciendis ducimus beatae repudiandae. Facere mollitia incidunt recusandae, voluptatem ullam placeat fugiat autem nihil. Hic quia accusantium nesciunt dicta.

+
+
+

ab-particles

+

simple, lightweight vanilla-javascript particle animation

+
+
+

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.

+

Configuration details, download and source at my git repo.

+

Thanks for checking it out!

+
+
+
+

Design, code and content appearing on this site is developed by + Asif Bacchus ('author') and + may be freely used and redistributed in accordance with the license + appearing in the content + repo. 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.

+
diff --git a/index.html b/index.html index 014d4c3..6317059 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@ integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov" crossorigin="anonymous"> - +
diff --git a/snow.html b/snow.html index bbb3bde..3a16c6a 100644 --- a/snow.html +++ b/snow.html @@ -4,22 +4,47 @@ animated particles + + integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov" + crossorigin="anonymous"> - +
-

Lorem ipsum dolor sit amet.

-

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!

-

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quod, ut aliquid doloremque impedit debitis similique dicta perferendis nam iusto consequuntur obcaecati nemo, perspiciatis nobis ipsum nostrum eos quasi est quidem reiciendis ducimus beatae repudiandae. Facere mollitia incidunt recusandae, voluptatem ullam placeat fugiat autem nihil. Hic quia accusantium nesciunt dicta.

+
+
+

ab-particles

+

simple, lightweight vanilla-javascript particle animation

+
+
+

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.

+

Configuration details, download and source at my git repo.

+

Thanks for checking it out!

+
+
+
+

Design, code and content appearing on this site is developed by + Asif Bacchus ('author') and + may be freely used and redistributed in accordance with the license + appearing in the content + repo. 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.

+
diff --git a/starrynight.html b/starrynight.html index 1613bea..03da443 100644 --- a/starrynight.html +++ b/starrynight.html @@ -4,22 +4,47 @@ animated particles + + integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov" + crossorigin="anonymous">
-

Lorem ipsum dolor sit amet.

-

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!

-

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quod, ut aliquid doloremque impedit debitis similique dicta perferendis nam iusto consequuntur obcaecati nemo, perspiciatis nobis ipsum nostrum eos quasi est quidem reiciendis ducimus beatae repudiandae. Facere mollitia incidunt recusandae, voluptatem ullam placeat fugiat autem nihil. Hic quia accusantium nesciunt dicta.

+
+
+

ab-particles

+

simple, lightweight vanilla-javascript particle animation

+
+
+

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.

+

Configuration details, download and source at my git repo.

+

Thanks for checking it out!

+
+
+
+

Design, code and content appearing on this site is developed by + Asif Bacchus ('author') and + may be freely used and redistributed in accordance with the license + appearing in the content + repo. 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.

+
diff --git a/warpleft.html b/warpleft.html index bd179ff..875ca1f 100644 --- a/warpleft.html +++ b/warpleft.html @@ -4,22 +4,47 @@ animated particles + + integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov" + crossorigin="anonymous"> - +
-

Lorem ipsum dolor sit amet.

-

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!

-

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quod, ut aliquid doloremque impedit debitis similique dicta perferendis nam iusto consequuntur obcaecati nemo, perspiciatis nobis ipsum nostrum eos quasi est quidem reiciendis ducimus beatae repudiandae. Facere mollitia incidunt recusandae, voluptatem ullam placeat fugiat autem nihil. Hic quia accusantium nesciunt dicta.

+
+
+

ab-particles

+

simple, lightweight vanilla-javascript particle animation

+
+
+

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.

+

Configuration details, download and source at my git repo.

+

Thanks for checking it out!

+
+
+
+

Design, code and content appearing on this site is developed by + Asif Bacchus ('author') and + may be freely used and redistributed in accordance with the license + appearing in the content + repo. 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.

+
diff --git a/warpright.html b/warpright.html index d0b1015..e4cdaa1 100644 --- a/warpright.html +++ b/warpright.html @@ -4,22 +4,47 @@ animated particles + + integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov" + crossorigin="anonymous"> - +
-

Lorem ipsum dolor sit amet.

-

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!

-

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quod, ut aliquid doloremque impedit debitis similique dicta perferendis nam iusto consequuntur obcaecati nemo, perspiciatis nobis ipsum nostrum eos quasi est quidem reiciendis ducimus beatae repudiandae. Facere mollitia incidunt recusandae, voluptatem ullam placeat fugiat autem nihil. Hic quia accusantium nesciunt dicta.

+
+
+

ab-particles

+

simple, lightweight vanilla-javascript particle animation

+
+
+

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.

+

Configuration details, download and source at my git repo.

+

Thanks for checking it out!

+
+
+
+

Design, code and content appearing on this site is developed by + Asif Bacchus ('author') and + may be freely used and redistributed in accordance with the license + appearing in the content + repo. 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.

+