?
Path : /home/admin/public_html/cherryblossom/ |
Current File : /home/admin/public_html/cherryblossom/jquery-sakura.js |
(function ($) { // requestAnimationFrame Polyfill (function () { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function (callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function () { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (id) { clearTimeout(id); }; }()); // Sakura function. $.fn.sakura = function (options) { // We rely on these random values a lot, so define a helper function for it. function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } // Helper function to attach cross-browser events to an element. var prefixes = ['moz', 'ms', 'o', 'webkit', '']; var prefCount = prefixes.length; function prefixedEvent(element, type, callback) { for (var i = 0; i < prefCount; i++) { if (!prefixes[i]) { type = type.toLowerCase(); } element.get(0).addEventListener(prefixes[i] + type, callback, false); } } // Defaults for the option object, which gets extended below. var defaults = { blowAnimations: ['blow-soft-left', 'blow-medium-left', 'blow-hard-left', 'blow-soft-right', 'blow-medium-right', 'blow-hard-right'], className: 'sakura', fallSpeed: 1, maxSize: 14, minSize: 9, newOn: 300, swayAnimations: ['sway-0', 'sway-1', 'sway-2', 'sway-3', 'sway-4', 'sway-5', 'sway-6', 'sway-7', 'sway-8'] }; var options = $.extend({}, defaults, options); // Declarations. var documentHeight = $(document).height(); var documentWidth = $(document).width(); var sakura = $('<div class="' + options.className + '" />'); // Set the overflow-x CSS property on the body to prevent horizontal scrollbars. $('body').css({ 'overflow-x': 'hidden' }); // Function that inserts new petals into the document. var petalCreator = function () { setTimeout(function () { requestAnimationFrame(petalCreator); }, options.newOn); // Get one random animation of each type and randomize fall time of the petals. var blowAnimation = options.blowAnimations[Math.floor(Math.random() * options.blowAnimations.length)]; var swayAnimation = options.swayAnimations[Math.floor(Math.random() * options.swayAnimations.length)]; var fallTime = (Math.round(documentHeight * 0.007) + Math.random() * 5) * options.fallSpeed; var animations = 'fall ' + fallTime + 's linear 0s 1' + ', ' + blowAnimation + ' ' + (((fallTime > 30 ? fallTime : 30) - 20) + getRandomInt(0, 20)) + 's linear 0s infinite' + ', ' + swayAnimation + ' ' + getRandomInt(2, 4) + 's linear 0s infinite'; var petal = sakura.clone(); var size = getRandomInt(options.minSize, options.maxSize); var startPosLeft = Math.random() * documentWidth - 100; var startPosTop = -((Math.random() * 20) + 15); // Apply Event Listener to remove petals that reach the bottom of the page. prefixedEvent(petal, 'AnimationEnd', function () { $(this).remove(); }); // Apply Event Listener to remove petals that finish their horizontal float animation. prefixedEvent(petal, 'AnimationIteration', function (ev) { if ($.inArray(ev.animationName, options.blowAnimations) != -1) { $(this).remove(); } }); petal .css({ '-webkit-animation': animations, '-o-animation': animations, '-ms-animation': animations, '-moz-animation': animations, animation: animations, height: size, left: startPosLeft, 'margin-top': startPosTop, width: size }) .appendTo('body'); }; // Recalculate documentHeight and documentWidth on browser resize. $(window).resize(function () { documentHeight = $(document).height(); documentWidth = $(document).width(); }); // Finally: Start adding petals. requestAnimationFrame(petalCreator); }; }(jQuery));