snowfall-js-plugin - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

CHANGELOG.md

		@@ -5,2 +5,8 @@ # Changelog

		## [0.0.6] - 2024-01-31

		- Important documentation changes (TG-17).
		- Minor tweak to config parameters loading on re-start.
		- Minor update to batchDraw function to guarantee correct snowflake radius calculations (TG-18).

		## [0.0.5] - 2024-01-30
		@@ -7,0 +13,0 @@

package.json

		{
		"name": "snowfall-js-plugin",
		"description": "Snowfall-js-plugin is a JavaScript library to add some winter magic to your project. This package creates animated snowflakes on a web page using HTML5 canvas and JavaScript classes, no dependencies. You can customize the number, size, speed, color and text of the snowflakes, and enjoy the beautiful snow falling effect on your website or app. Snowfall.js-plugin is easy to use and compatible with most browsers and devices. The plugins comes with optional features: keyboard focusable and customizable switches to allow the users to toggle the animation on/off — simply add one or more containers with the proper class name; store the user preferences in local storage; enable hardware restriction to automatically disable the animation on low end devices; enable a date range: for example, only activate the animation during winter months.",
		"version": "0.0.5",
		"version": "0.0.6",
		"main": "index.js",
		@@ -6,0 +6,0 @@ "type": "module",

README.md

		@@ -27,3 +27,3 @@ # Snowfall-js-plugin
		```js
		import { snowAnimationStart } from "snowfall-animation-plugin";
		import { snowAnimationStart } from "snowfall-js-plugin";

		@@ -133,4 +133,12 @@ document.addEventListener("DOMContentLoaded", function () {

		### Canvas Height Limit
		### Snowflake styles and canvas options

		#### Snowflake styles

		Most options are self-explanatory: For example, "count" is the number of snowflakes that are rendered on the canvas at any given time. There is no minimum or maximum but take into account that the browser will have to perform calculations on each snowflake. The calculations and drawings are batched together but you will notice performance issues if you set your value too high. The recommended maximum is 100.

		The minRadius and maxRadius determine the size of the snowflakes.

		#### Canvas Height Limit

		The snowflakes are drawn on the screen via an HTML Canvas element. By default the height of the canvas will take up the entire scrollable area. This is nice because the snowflakes will dwindle all the way to your footer area. However, on pages with lots of content the performance will become problematic. You'll have to test this yourself but if your page is over 8000 px long, you may want to start limiting the height of the canvas.
		@@ -137,0 +145,0 @@

snowfall.js

		@@ -97,4 +97,3 @@ /*!
		) {
		//font and fillStyle are the same for all snowflakes
		ctx.font = snowflakes[0].h + "px Arial, sans-serif";
		// FillStyle is the same for all snowflakes
		ctx.fillStyle = snowflakes[0].c;
		@@ -106,2 +105,3 @@
		if (snowflake.isVisible(scrollX, scrollY, windowWidth, windowHeight)) {
		ctx.font = snowflake.h + "px Arial, sans-serif";
		ctx.fillText(snowflake.t, snowflake.x, snowflake.y);
		@@ -108,0 +108,0 @@ }

switch.js

		@@ -136,3 +136,3 @@ import { setUserSettings } from "./userSettings.js";
		function startAnimation(event, params) {
		snowfallState.snowfallInstance = initSnowfall();
		snowfallState.snowfallInstance = initSnowfall(params.snowfall);
		snowfallState.isAnimationRunning = true;
		@@ -139,0 +139,0 @@ logInfo("Animation started.");

New alerts