starry-night
Take a look at the night sky, right here in your browser. This module adds some pretty looking stars to your html document's background, complete with
- parallax scrolling
- random flickering (Perlin noise)
- dynamic rendering based on display size All without serious effects on your website's performance.
demo
You can find a demo of this module by navigating your browser to ./dist/index.html
the quality is quite poor due to this being a GIF image
dependency usage
- add
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>to your html page's<head>
to prevent the possibility of including p5.js twice, you must include it as a separate script (if you're not using it already)
load starry-night using JsDelivr CDN
- add
<script src="https://cdn.jsdelivr.net/npm/@nout-kleef/starry-night@2/dist/starry-night.min.js"></script>to your html page's<head> - load
https://cdn.jsdelivr.net/npm/@nout-kleef/starry-night@2/dist/img/stars-sprite-12.png, which holds the stars' images
load starry-night using local file
note: you should probably move these files from node_modules to your public_html folder first, using Gulp, Grunt etc.
2) add node_modules/@nout-kleef/starry-night/dist/starry-night.min.js as a script to your html page's <head>
3) copy/load node_modules/@nout-kleef/starry-night/dist/img/stars-sprite-12.png
development usage
sudo npm installgulp-
python -m SimpleHTTPServer(only way to fetch the assets is over http(s)) - navigate to
http://0.0.0.0:8000/dist/or something similar - see terminal - use either the demo page or your own project to make some improvements to this module!