We use cookies to ensure you get the best experience on our website
Home Explore Help
Sign In
mirror
/
javascript-snow
mirror of https://github.com/vladimirok5959/javascript-snow.git
2
0
Fork 0
Files Wiki
Browse Source

Snow object, demo page, compressed version

Vova Tkach 5 years ago
parent
271b65a855
commit
b0512861b8
3 changed files with 174 additions and 0 deletions
Split View Show Diff Stats
  1. 26 0
      demo.html
  2. 147 0
      src/snow.js
  3. 1 0
      src/snow.min.js

+ 26 - 0
demo.html
View File 

@@ -0,0 +1,26 @@
 
+<!doctype html>
 
+<html lang="en">
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<title>Snow</title>
 
+		<style type="text/css">html,body{background-color:#818a38;}</style>
 
+		<script type="text/javascript" src="src/snow.js"></script>
 
+	</head>
 
+	<body>
 
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Et malesuada fames ac turpis egestas sed tempus urna et. Euismod elementum nisi quis eleifend. Nisi porta lorem mollis aliquam ut porttitor. Ac turpis egestas maecenas pharetra convallis posuere. Nunc non blandit massa enim nec dui. Commodo elit at imperdiet dui accumsan sit amet nulla. Viverra accumsan in nisl nisi scelerisque. Dui nunc mattis enim ut tellus. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Faucibus ornare suspendisse sed nisi lacus. Nulla facilisi morbi tempus iaculis. Ut eu sem integer vitae justo eget magna fermentum iaculis. Ullamcorper sit amet risus nullam eget felis eget nunc. Volutpat sed cras ornare arcu dui vivamus. Eget magna fermentum iaculis eu non diam.</p>
 
+		<p>Arcu ac tortor dignissim convallis aenean et tortor. Vitae auctor eu augue ut lectus arcu. Ac turpis egestas integer eget aliquet nibh praesent. Interdum velit euismod in pellentesque massa placerat duis. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. Nisl rhoncus mattis rhoncus urna neque viverra justo. Odio ut enim blandit volutpat. Ac auctor augue mauris augue neque gravida. Ut lectus arcu bibendum at varius vel. Porttitor leo a diam sollicitudin tempor id eu nisl nunc. Dolor sit amet consectetur adipiscing elit duis tristique. Semper quis lectus nulla at volutpat diam ut. Sapien eget mi proin sed.</p>
 
+		<p>Ante metus dictum at tempor commodo ullamcorper a. Facilisis mauris sit amet massa vitae. Enim neque volutpat ac tincidunt vitae. Tempus quam pellentesque nec nam aliquam sem. Mollis aliquam ut porttitor leo a diam sollicitudin. Nunc pulvinar sapien et ligula ullamcorper. Dignissim suspendisse in est ante in nibh mauris. Eget egestas purus viverra accumsan in. Vitae tempus quam pellentesque nec nam aliquam sem et. Sodales ut etiam sit amet nisl. Aliquet risus feugiat in ante. Rhoncus urna neque viverra justo nec ultrices dui sapien. Sit amet aliquam id diam maecenas ultricies. Sed odio morbi quis commodo odio aenean sed adipiscing diam.</p>
 
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Et malesuada fames ac turpis egestas sed tempus urna et. Euismod elementum nisi quis eleifend. Nisi porta lorem mollis aliquam ut porttitor. Ac turpis egestas maecenas pharetra convallis posuere. Nunc non blandit massa enim nec dui. Commodo elit at imperdiet dui accumsan sit amet nulla. Viverra accumsan in nisl nisi scelerisque. Dui nunc mattis enim ut tellus. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Faucibus ornare suspendisse sed nisi lacus. Nulla facilisi morbi tempus iaculis. Ut eu sem integer vitae justo eget magna fermentum iaculis. Ullamcorper sit amet risus nullam eget felis eget nunc. Volutpat sed cras ornare arcu dui vivamus. Eget magna fermentum iaculis eu non diam.</p>
 
+		<p>Arcu ac tortor dignissim convallis aenean et tortor. Vitae auctor eu augue ut lectus arcu. Ac turpis egestas integer eget aliquet nibh praesent. Interdum velit euismod in pellentesque massa placerat duis. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. Nisl rhoncus mattis rhoncus urna neque viverra justo. Odio ut enim blandit volutpat. Ac auctor augue mauris augue neque gravida. Ut lectus arcu bibendum at varius vel. Porttitor leo a diam sollicitudin tempor id eu nisl nunc. Dolor sit amet consectetur adipiscing elit duis tristique. Semper quis lectus nulla at volutpat diam ut. Sapien eget mi proin sed.</p>
 
+		<p>Ante metus dictum at tempor commodo ullamcorper a. Facilisis mauris sit amet massa vitae. Enim neque volutpat ac tincidunt vitae. Tempus quam pellentesque nec nam aliquam sem. Mollis aliquam ut porttitor leo a diam sollicitudin. Nunc pulvinar sapien et ligula ullamcorper. Dignissim suspendisse in est ante in nibh mauris. Eget egestas purus viverra accumsan in. Vitae tempus quam pellentesque nec nam aliquam sem et. Sodales ut etiam sit amet nisl. Aliquet risus feugiat in ante. Rhoncus urna neque viverra justo nec ultrices dui sapien. Sit amet aliquam id diam maecenas ultricies. Sed odio morbi quis commodo odio aenean sed adipiscing diam.</p>
 
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Et malesuada fames ac turpis egestas sed tempus urna et. Euismod elementum nisi quis eleifend. Nisi porta lorem mollis aliquam ut porttitor. Ac turpis egestas maecenas pharetra convallis posuere. Nunc non blandit massa enim nec dui. Commodo elit at imperdiet dui accumsan sit amet nulla. Viverra accumsan in nisl nisi scelerisque. Dui nunc mattis enim ut tellus. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Faucibus ornare suspendisse sed nisi lacus. Nulla facilisi morbi tempus iaculis. Ut eu sem integer vitae justo eget magna fermentum iaculis. Ullamcorper sit amet risus nullam eget felis eget nunc. Volutpat sed cras ornare arcu dui vivamus. Eget magna fermentum iaculis eu non diam.</p>
 
+		<p>Arcu ac tortor dignissim convallis aenean et tortor. Vitae auctor eu augue ut lectus arcu. Ac turpis egestas integer eget aliquet nibh praesent. Interdum velit euismod in pellentesque massa placerat duis. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. Nisl rhoncus mattis rhoncus urna neque viverra justo. Odio ut enim blandit volutpat. Ac auctor augue mauris augue neque gravida. Ut lectus arcu bibendum at varius vel. Porttitor leo a diam sollicitudin tempor id eu nisl nunc. Dolor sit amet consectetur adipiscing elit duis tristique. Semper quis lectus nulla at volutpat diam ut. Sapien eget mi proin sed.</p>
 
+		<p>Ante metus dictum at tempor commodo ullamcorper a. Facilisis mauris sit amet massa vitae. Enim neque volutpat ac tincidunt vitae. Tempus quam pellentesque nec nam aliquam sem. Mollis aliquam ut porttitor leo a diam sollicitudin. Nunc pulvinar sapien et ligula ullamcorper. Dignissim suspendisse in est ante in nibh mauris. Eget egestas purus viverra accumsan in. Vitae tempus quam pellentesque nec nam aliquam sem et. Sodales ut etiam sit amet nisl. Aliquet risus feugiat in ante. Rhoncus urna neque viverra justo nec ultrices dui sapien. Sit amet aliquam id diam maecenas ultricies. Sed odio morbi quis commodo odio aenean sed adipiscing diam.</p>
 
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Et malesuada fames ac turpis egestas sed tempus urna et. Euismod elementum nisi quis eleifend. Nisi porta lorem mollis aliquam ut porttitor. Ac turpis egestas maecenas pharetra convallis posuere. Nunc non blandit massa enim nec dui. Commodo elit at imperdiet dui accumsan sit amet nulla. Viverra accumsan in nisl nisi scelerisque. Dui nunc mattis enim ut tellus. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Faucibus ornare suspendisse sed nisi lacus. Nulla facilisi morbi tempus iaculis. Ut eu sem integer vitae justo eget magna fermentum iaculis. Ullamcorper sit amet risus nullam eget felis eget nunc. Volutpat sed cras ornare arcu dui vivamus. Eget magna fermentum iaculis eu non diam.</p>
 
+		<p>Arcu ac tortor dignissim convallis aenean et tortor. Vitae auctor eu augue ut lectus arcu. Ac turpis egestas integer eget aliquet nibh praesent. Interdum velit euismod in pellentesque massa placerat duis. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. Nisl rhoncus mattis rhoncus urna neque viverra justo. Odio ut enim blandit volutpat. Ac auctor augue mauris augue neque gravida. Ut lectus arcu bibendum at varius vel. Porttitor leo a diam sollicitudin tempor id eu nisl nunc. Dolor sit amet consectetur adipiscing elit duis tristique. Semper quis lectus nulla at volutpat diam ut. Sapien eget mi proin sed.</p>
 
+		<p>Ante metus dictum at tempor commodo ullamcorper a. Facilisis mauris sit amet massa vitae. Enim neque volutpat ac tincidunt vitae. Tempus quam pellentesque nec nam aliquam sem. Mollis aliquam ut porttitor leo a diam sollicitudin. Nunc pulvinar sapien et ligula ullamcorper. Dignissim suspendisse in est ante in nibh mauris. Eget egestas purus viverra accumsan in. Vitae tempus quam pellentesque nec nam aliquam sem et. Sodales ut etiam sit amet nisl. Aliquet risus feugiat in ante. Rhoncus urna neque viverra justo nec ultrices dui sapien. Sit amet aliquam id diam maecenas ultricies. Sed odio morbi quis commodo odio aenean sed adipiscing diam.</p>
 
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Et malesuada fames ac turpis egestas sed tempus urna et. Euismod elementum nisi quis eleifend. Nisi porta lorem mollis aliquam ut porttitor. Ac turpis egestas maecenas pharetra convallis posuere. Nunc non blandit massa enim nec dui. Commodo elit at imperdiet dui accumsan sit amet nulla. Viverra accumsan in nisl nisi scelerisque. Dui nunc mattis enim ut tellus. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Faucibus ornare suspendisse sed nisi lacus. Nulla facilisi morbi tempus iaculis. Ut eu sem integer vitae justo eget magna fermentum iaculis. Ullamcorper sit amet risus nullam eget felis eget nunc. Volutpat sed cras ornare arcu dui vivamus. Eget magna fermentum iaculis eu non diam.</p>
 
+		<p>Arcu ac tortor dignissim convallis aenean et tortor. Vitae auctor eu augue ut lectus arcu. Ac turpis egestas integer eget aliquet nibh praesent. Interdum velit euismod in pellentesque massa placerat duis. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. Nisl rhoncus mattis rhoncus urna neque viverra justo. Odio ut enim blandit volutpat. Ac auctor augue mauris augue neque gravida. Ut lectus arcu bibendum at varius vel. Porttitor leo a diam sollicitudin tempor id eu nisl nunc. Dolor sit amet consectetur adipiscing elit duis tristique. Semper quis lectus nulla at volutpat diam ut. Sapien eget mi proin sed.</p>
 
+		<p>Ante metus dictum at tempor commodo ullamcorper a. Facilisis mauris sit amet massa vitae. Enim neque volutpat ac tincidunt vitae. Tempus quam pellentesque nec nam aliquam sem. Mollis aliquam ut porttitor leo a diam sollicitudin. Nunc pulvinar sapien et ligula ullamcorper. Dignissim suspendisse in est ante in nibh mauris. Eget egestas purus viverra accumsan in. Vitae tempus quam pellentesque nec nam aliquam sem et. Sodales ut etiam sit amet nisl. Aliquet risus feugiat in ante. Rhoncus urna neque viverra justo nec ultrices dui sapien. Sit amet aliquam id diam maecenas ultricies. Sed odio morbi quis commodo odio aenean sed adipiscing diam.</p>
 
+	</body>
 
+</html>

+ 147 - 0
src/snow.js
View File 

@@ -0,0 +1,147 @@
 
+(function(window) {
 
+	var snow = function(window) {
 
+		// Consts
 
+		var ConstCanvasId = 'snow';
 
+		var ConstCanvasStyles = 'width:100%;height:100%;position:fixed; \
 
+			top:0px;left:0px;z-index:999999;pointer-events:none; \
 
+			-moz-pointer-events:none;-webkit-pointer-events:none; \
 
+			-o-pointer-events:none; \
 
+		';
 
+
 
+		var ConstSpeed = 25;
 
+
 
+		var ConstSnowColorR = 255;
 
+		var ConstSnowColorG = 255;
 
+		var ConstSnowColorB = 255;
 
+		var ConstSnowColorA = 0.8;
 
+
 
+		var ConstParticleMax = 50;
 
+
 
+		// Variables
 
+		var VarInited = false;
 
+		var VarBody = null;
 
+		var VarCanvas = null;
 
+		var VarContext = null;
 
+		var VarWindowWidth = 0;
 
+		var VarWindowHeight = 0;
 
+		var VarParticles = [];
 
+		var VarAngle = 0;
 
+
 
+		function UpdateSize() {
 
+			VarWindowWidth = window.innerWidth;
 
+			VarWindowHeight = window.innerHeight;
 
+			VarCanvas.width = VarWindowWidth;
 
+			VarCanvas.height = VarWindowHeight;
 
+		};
 
+
 
+		function PopulateParticles() {
 
+			VarParticles = [];
 
+			for(var i=0; i<ConstParticleMax; i++) {
 
+				VarParticles.push({
 
+					x: Math.random() * VarWindowWidth,
 
+					y: Math.random() * VarWindowHeight,
 
+					r: Math.random() * 4 + 1,
 
+					d: Math.random() * ConstParticleMax,
 
+				});
 
+			}
 
+		};
 
+
 
+		function Update() {
 
+			VarAngle += 0.01;
 
+			for(var i=0; i<ConstParticleMax; i++) {
 
+				var p = VarParticles[i];
 
+				p.y += Math.cos(VarAngle + p.d) + 1 + p.r / 2;
 
+				p.x += Math.sin(VarAngle) * 2;
 
+				if(p.x > VarWindowWidth + 5 || p.x < -5 || p.y > VarWindowHeight) {
 
+					if(i % 3 > 0) {
 
+						VarParticles[i] = {
 
+							x: Math.random() * VarWindowWidth,
 
+							y: -10,
 
+							r: p.r,
 
+							d: p.d,
 
+						};
 
+					} else {
 
+						if(Math.sin(VarAngle) > 0) {
 
+							VarParticles[i] = {
 
+								x: -5,
 
+								y: Math.random() * VarWindowHeight,
 
+								r: p.r,
 
+								d: p.d,
 
+							};
 
+						} else {
 
+							VarParticles[i] = {
 
+								x: VarWindowWidth + 5,
 
+								y: Math.random() * VarWindowHeight,
 
+								r: p.r,
 
+								d: p.d,
 
+							};
 
+						}
 
+					}
 
+				}
 
+			}
 
+		};
 
+
 
+		function Draw() {
 
+			VarContext.clearRect(0, 0, VarWindowWidth, VarWindowHeight);
 
+			VarContext.fillStyle = 'rgba(' +
 
+				ConstSnowColorR + ', ' +
 
+				ConstSnowColorG + ', ' +
 
+				ConstSnowColorB + ', ' +
 
+				ConstSnowColorA + ')';
 
+			VarContext.beginPath();
 
+			for(var i=0; i<ConstParticleMax; i++) {
 
+				var p = VarParticles[i];
 
+				VarContext.moveTo(p.x, p.y);
 
+				VarContext.arc(p.x, p.y, p.r, 0, Math.PI * 2, true);
 
+			}
 
+			VarContext.fill();
 
+			Update();
 
+		};
 
+
 
+		function Prepare() {
 
+			VarBody = document.getElementsByTagName('body')[0];
 
+			if(VarBody) {
 
+				VarCanvas = document.createElement('canvas');
 
+				VarContext = VarCanvas.getContext('2d');
 
+				VarCanvas.setAttribute('id', ConstCanvasId);
 
+				VarCanvas.setAttribute('style', ConstCanvasStyles);
 
+				VarBody.insertBefore(VarCanvas, VarBody.firstChild);
 
+
 
+				return true;
 
+			}
 
+			return false;
 
+		};
 
+
 
+		function Start() {
 
+			UpdateSize();
 
+			PopulateParticles();
 
+			setInterval(Draw, ConstSpeed);
 
+			VarInited = true;
 
+		};
 
+
 
+		function Initialize() {
 
+			if (Prepare()) {
 
+				Start();
 
+			}
 
+		};
 
+
 
+		function Resize() {
 
+			if(VarInited) {
 
+				UpdateSize();
 
+				PopulateParticles();
 
+			}
 
+		};
 
+
 
+		if(window.addEventListener) {
 
+			window.addEventListener('load', Initialize, false);
 
+			window.addEventListener('resize', Resize, false);
 
+		} else if(window.attachEvent) {
 
+			window.attachEvent('onload', Initialize);
 
+			window.attachEvent('onresize', Resize);
 
+		};
 
+
 
+		return {};
 
+	}(window);
 
+
 
+	window.snow = snow;
 
+}(window));

+ 1 - 0
src/snow.min.js
View File 

@@ -0,0 +1 @@
 
+!function(t){var n,e,r,a,o,i,d,h,s,v,c,f,l,m,x,u,y,M=(e="snow",r="width:100%;height:100%;position:fixed; \t\t\ttop:0px;left:0px;z-index:999999;pointer-events:none; \t\t\t-moz-pointer-events:none;-webkit-pointer-events:none; \t\t\t-o-pointer-events:none; \t\t",a=25,d=i=o=255,h=.8,v=!(s=50),l=f=c=null,u=[],y=x=m=0,(n=t).addEventListener?(n.addEventListener("load",w,!1),n.addEventListener("resize",b,!1)):n.attachEvent&&(n.attachEvent("onload",w),n.attachEvent("onresize",b)),{});function p(){m=n.innerWidth,x=n.innerHeight,f.width=m,f.height=x}function g(){u=[];for(var t=0;t<s;t++)u.push({x:Math.random()*m,y:Math.random()*x,r:4*Math.random()+1,d:Math.random()*s})}function E(){l.clearRect(0,0,m,x),l.fillStyle="rgba("+o+", "+i+", "+d+", "+h+")",l.beginPath();for(var t=0;t<s;t++){var n=u[t];l.moveTo(n.x,n.y),l.arc(n.x,n.y,n.r,0,2*Math.PI,!0)}l.fill(),function(){y+=.01;for(var t=0;t<s;t++){var n=u[t];n.y+=Math.cos(y+n.d)+1+n.r/2,n.x+=2*Math.sin(y),(n.x>m+5||n.x<-5||n.y>x)&&(0<t%3?u[t]={x:Math.random()*m,y:-10,r:n.r,d:n.d}:0<Math.sin(y)?u[t]={x:-5,y:Math.random()*x,r:n.r,d:n.d}:u[t]={x:m+5,y:Math.random()*x,r:n.r,d:n.d})}}()}function w(){(c=document.getElementsByTagName("body")[0])&&(f=document.createElement("canvas"),l=f.getContext("2d"),f.setAttribute("id",e),f.setAttribute("style",r),c.insertBefore(f,c.firstChild),1)&&(p(),g(),setInterval(E,a),v=!0)}function b(){v&&(p(),g())}t.snow=M}(window);