Change CSS3 animation using the JavaScript CSSOM

animation.js

/* See blog post for details: http://www.suburban-glory.com/blog?page=171 */

var ANDY = window.ANDY || {};

ANDY.ANIMATION = (function (window) {

    'use strict';

    var _private, doc = document;

    _private = {
        // save all stylesheets to memory
        styleSheets: null,
        // save targeted stylesheet to memory
        styleSheetExtra: null,
        dom: null,
        set: function (val) {
            this.styleSheets = val.style;
            _private.findStyleSheet();
            _private.onHover();
        },
        randomOne: function () { /* 70 to -70 */

            return Math.floor(Math.random() * 141) - 70;

        },
        randomTwo: function () { /* 2 to 6 */

            /* recursive function. Only return numbers from 2 to 6 */
            var random = Math.floor(Math.random() * 7);

            if (random < 2) {
                return this.randomTwo();
            } else {
                return random;
            }

        },
        randomThree: function () { /* -11 to -13 */

            var numbers = [-11, -12, -13];

            return numbers[Math.floor(Math.random() * numbers.length)];

        },
        randomFour: function () { /* 128 to 255 */

            // I'm sure there must be a better way of generating a
            // random number between 128 and 255 without using
            // a recursive function but i'm too tired of this experiment to refactor    

            var random = Math.floor(Math.random() * 256);

            if (random < 128) {
                return this.randomFour();
            } else {
                return random;
            }

        },
        randomFive: function () { /* 0 or 1 */

            return Math.floor(Math.random() * 2);

        },
        setNumbers: function () {
            
            /* create 66 different values for the style 
          sheet like so: -50px 40px 2px -13px rgba(255, 255, 255, 0) */
            var x, l, finalArray = [];

            x = 0;
            l = 66;

            do {

                finalArray.push(this.randomOne() + 'px ' + this.randomOne() + 'px ' + this.randomTwo() + 'px ' + this.randomThree() + 'px ' + 'rgba(' + this.randomFour() + ',' + this.randomFour() + ',' + this.randomFour() + ',' + this.randomFive() + ')');

                x += 1;

            } while (x < l);

            return finalArray.toString();

        },
        findStyleSheet: function () {

            /* find the 768.css stylesheet */

            var x, l;

            for (x = 0, l = this.styleSheets.length; x < l; x += 1) {

                if (this.styleSheets[x].href) {

                    if (this.styleSheets[x].href.indexOf('768') !== -1) {

                        this.styleSheetExtra = this.styleSheets[x];
                        break;

                    }

                } // end if

            } // end for loop

        },
        findKeyframesRule: function (rule) {

            /* in the 768.css stylesheet find the animation*/

            var ruleList = this.styleSheetExtra.cssRules,
                i, key, l;

            // loop through the cssRules object 

            for (i = 0, l = ruleList.length; i < l; i += 1) {

                for (key in ruleList[i].cssRules) {

                    // loop through ruleList object literals
                    if (ruleList[i].cssRules.hasOwnProperty(key)) {

                        // find the keyframe animation
                        if (ruleList[i].cssRules[key].type === window.CSSRule.WEBKIT_KEYFRAMES_RULE && ruleList[i].cssRules[key].name === rule) {

                            return ruleList[i].cssRules[key];

                        } // end if

                    } // end if

                } // end for object

            } // end for ruleList 

            return null;
        },

        changeRule: function () {

            var keyframes = this.findKeyframesRule("dazzle"),
                cloneBlock, parentBlock, domNode;

            if (keyframes !== null) {

                // change the CSS3 animation here

                keyframes.deleteRule("0%");
                keyframes.deleteRule("100%");
                keyframes.insertRule("0% { box-shadow:" + this.setNumbers() + "; }");
                keyframes.insertRule("100% { box-shadow:" + this.setNumbers() + "; }");

                /* it is necessary to redraw the block for the new animation to work */

                domNode = doc.querySelector('div[role=banner] h1');

                cloneBlock = domNode.cloneNode(true);
                parentBlock = domNode.parentNode;
                parentBlock.removeChild(domNode);
                parentBlock.appendChild(cloneBlock);

            }

        },

        onHover: function () {

            var wrapper = doc.querySelector('div[role=main]');

            wrapper.addEventListener('mouseover', _private.onHoverEvent, false);

        },

        findUpId: function (elem) {

            while (elem.parentNode) {
                elem = elem.parentNode;
                // only use the right node type and that which has an id attribute
                if (elem.nodeType === 1 && elem.hasAttribute('id')) {
                    // only if the id attribute value contains block
                    if (elem.getAttribute('id').indexOf('block') !== -1) {
                        return elem.getAttribute('id');
                    }
                }
            }
            return null;

        },

        onHoverEvent: function (event) {

            // check again to make sure the correct id is choose
            var domResult, idArray = ['block-1', 'block-2', 'block-3', 'block-4', 'block-5', 'block-6', 'block-7', 'block-8', 'block-9'];

            domResult = _private.findUpId(event.target);
            
            // check again to make sure that the right id block is used 
            if (domResult !== null && idArray.indexOf(domResult) !== -1) {

                // place chosen id into object memory
                if (_private.dom === null || _private.dom !== domResult) {

                    _private.changeRule();
                    _private.dom = domResult;

                } // end if

            } // end if
            

        }

    };
    return {
        init: function (args) {

            if (window.matchMedia("(min-width: 768px)").matches) {
                // do not run code for mobiles as this CSS3 animation is not used on that platform
                _private.set(args);
            }

        }
    };
}(window));

window.onload = function() {
    
	// test for css csstransforms
	if (Modernizr.csstransforms && typeof window.matchMedia !== 'undefined' && window.CSSRule.WEBKIT_KEYFRAMES_RULE) {

		ANDY.ANIMATION.init({
			style: document.styleSheets
		});

	}
};