Vanilla javascript particle animation with no external libraries or configuration files. Integrates with CSS for easy theming. https://git.asifbacchus.app/asif/ab-particles
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

52 lines
2.4 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<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">
</head>
<body onload='particles(noBounceV=true, speedV=-100, speedH=-15,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>
</div>
<canvas id="particles"></canvas>
<!-- javascript -->
<script
src="js/ab-particles.min.js"
integrity="sha384-HI+YXFmq6RX6R45hGuCOv6U/XhbS6swme7nnQVc8g6QfhucST79WEzlK6XMbanUp"
crossorigin="anonymous"
defer>
</script>
<!-- end javascript -->
</body>
</html>