Анимация на сайте HTML

(function(window) { 
	'use strict'; 
 
	window.Sakura = (function() { 
		var NUM_FLOWER = 25, // 譯懊�譛螟ｧ謨ｰ 
			NUM_MAX_SIZE_FLOWER = 3, // 譛螟ｧ繧ｵ繧､繧ｺ縺ｮ譯懈焚 
 
			NUM_KIND_FLOWER = 6, // 譯懊�遞ｮ鬘� 
			SIZE_FLOWER = [20, 50, 120], // 譯懊�螟ｧ縺阪＆ 
 
			SPRITE_NUM = 7, // 繧ｹ繝励Λ繧､繝医�譫壽焚 
			SPRITE_SPEED = 500, // 繧ｹ繝励Λ繧､繝医�騾溘＆(ms) 
 
			FALLING_SPEED = 25000, // 關ｽ荳矩溷ｺｦ��ms�� 
			FALLING_SPEED_FLUCTUATION = .8; // 關ｽ荳矩溷ｺｦ�域昭繧峨℃�� 
 
		var numMaxSizeFlower = NUM_MAX_SIZE_FLOWER; 
 
		function Sakura() { 
			this.init(); 
		} 
 
		Sakura.prototype.init = function() { 
			this.createField(); 
			this.cacheElements(); 
			this.adjustFeild(); 
			this.createFlower(); 
		}; 
 
		Sakura.prototype.createField = function() { 
			if( document.getElementById('fallFlowerWrap') !== 'null' ) { 
				$('#fallFlowerWrap').remove(); 
			} 
 
			$( document.getElementsByTagName('head') ).append(' <link rel="stylesheet" href="/assets/css/sakura.css" /> '); 
			$( document.body ).append('<div id="fallFlowerWrap"><div id="fallFlowerField"></div></div>'); 
		}; 
 
		Sakura.prototype.cacheElements = function() { 
			this.$wrap = $('#fallFlowerWrap'); 
			this.$field = $('#fallFlowerField'); 
		}; 
 
		Sakura.prototype.adjustFeild = function() { 
			this.winWidth = $(window).width(), 
			this.winHeight = $(window).height(); 
 
			this.$field.css({ 
				width: this.winWidth, 
				height: this.winHeight 
			}); 
		}; 
 
		Sakura.prototype.createFlower = function() { 
			var _this = this, 
				frag = document.createDocumentFragment(); 
 
			for( var i = 0, len = NUM_FLOWER; i < len; ++i ) { 
				var $elem = $('<div></div>', {'class': 'sakura'}), 
					type = r(NUM_KIND_FLOWER), 
					size; 
 
				if( numMaxSizeFlower >= 1 ) { 
					size = r(SIZE_FLOWER.length); 
 
					if( size === SIZE_FLOWER.length ) { 
						$elem.addClass('blur'); 
						-- numMaxSizeFlower; 
					} 
				} else { 
					size = r(NUM_MAX_SIZE_FLOWER - 1); 
				} 
 
				$elem.css({ 
					'z-index': size, 
					'background-image': 'url(/assets/img/common/flower/sakura' + type + '.png)', 
					'width': SIZE_FLOWER[size - 1], 
					'height': SIZE_FLOWER[size - 1], 
				}); 
 
				frag.appendChild( $elem[0] ); 
			} 
 
			this.$field.append(frag); 
 
			$('.sakura').each(function() { 
				_this.initFlower( $(this) ); 
			}); 
		}; 
 
		Sakura.prototype.initFlower = function($elem) { 
			var _this = this, 
				options, 
				startX = r( this.winWidth ) + (this.winWidth / 3), 
				endX = r( startX - 100 ); 
 
			options = { 
				start: startX, 
				end: endX, 
				speed: FALLING_SPEED * ( 1 - r(100 - FALLING_SPEED_FLUCTUATION * 100) / 100 ), 
				delay: r(FALLING_SPEED / 2), 
				size: $elem.css('zIndex') 
			} 
 
			switch( options.size ) { 
				case 1: 
					options.speed *= 1.25; 
					break; 
				case SIZE_FLOWER.length: 
					options.speed *= .5; 
					break; 
				default: 
			} 
 
			_this.fallingFlower($elem, options); 
			_this.spriteFlower($elem, options); 
		}; 
 
		Sakura.prototype.fallingFlower = function($elem, options) { 
			var _this = this; 
 
			$elem.velocity({ 
				// translateX: [ - r(_this.winWidth), 0 ], 
				// translateY: [ _this.winHeight, 0 ], 
				left: [ options.end, options.start ], 
				top: [ _this.winHeight, -200 ], 
				rotateZ: [ 10, -10 ] 
			}, { 
				duration: options.speed, 
				delay: options.delay, 
				easing: 'easeOutSine', 
				complete: function() { 
					_this.initFlower( $elem ); 
				} 
			}); 
		}; 
 
		Sakura.prototype.spriteFlower = function($elem, options) { 
			var _this = this; 
 
			$elem.velocity({ 
				backgroundPositionX: [SIZE_FLOWER[options.size - 1] * SPRITE_NUM, 0] 
			}, { 
				duration: SPRITE_SPEED, 
				easing: [ SPRITE_NUM ], 
				queue: false, 
				complete: function() { 
					_this.spriteFlower($elem, options); 
				} 
			}); 
		}; 
 
		return Sakura; 
	}()); 
 
	$(function() { 
		if( Modernizr.backgroundsize ) { 
			$(window).on({ 
				load: function() { 
					initAnimation(); 
				}, 
				resize: function() { 
					initAnimation(); 
				} 
			}) 
		} 
 
		function initAnimation() { 
			var Sakura = new window.Sakura(); 
		} 
	}); 
}(this)); 
 
// Utility Function 
function r(n) { 
	return Math.floor( Math.random() * n + 1, 10 ); 
}