/*
Demo created by David Walsh
http://davidwalsh.name
Uses CSS Animation library by Ryan Florence
http://ryanflorence.com
*/
(function(global) {
// console.log(global);
// Outputs window
var getSupportedStyle = function(element, supported){
for (var i = supported.length - 1; i >= 0; i--){
if (element.style[supported[i]] !== undefined){
return supported[i];
}
};
};
var Transform = global.Transform = function(element, supported){
this.element = element;
this.style = getSupportedStyle(element, supported || [ 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform' ]);
}; global.Transform.prototype = {
translate: function(axis, value){
return this.setter(axis, value, 'translate');
},
rotate: function(axis, value){
if (typeof axis === 'number') return this.add('rotate', axis);
return this.setter(axis, value, 'rotate');
},
skew: function(axis, value){
return this.setter(axis, value, 'skew');
},
scale: function(axis, value){
if (typeof axis === 'number') return this.add('scale', axis);
this.setter(axis, value, 'scale');
return this;
},
matrix: function(){
var transform = this.element.style[this.style],
match = new RegExp(this.rules.matrix.regex).test(transform),
shared = 'matrix(' + Array.prototype.slice.call(arguments, 0).join(',') + ')';
if (transform === 'none') transform = '';
return match
? this.set(transform.replace(this.rules[rule].regex, shared))
: this.set(transform + ' ' + shared);
},
clear: function(){
return this.set('');
},
set: function(def){
this.element.style[this.style] = def;
return this;
},
// not "public", feel free to use, but the rest of these methods
// are not guaranteed to have backward compatibility in future releases
setter: function(a, b, method){
if (typeof a === 'string') return this.add(method + a.toUpperCase(), b);
for (i in a) if (a.hasOwnProperty(i)) this[method](i, a[i])
return this;
},
add: function(rule, value){
var transform = this.element.style[this.style],
rule = rule === 'rotateZ' ? 'rotate' : rule,
match = new RegExp(this.rules[rule].regex).test(transform),
unit = this.rules[rule].unit,
shared = rule + '(' + value + unit + ')';
if (transform === 'none') transform = '';
return match
? this.set(transform.replace(this.rules[rule].regex, shared))
: this.set(transform + ' ' + shared);
},
remove: function(rule){
return this.set(this.element.style[this.style].replace(this.rules[rule].regex, ''));
},
// this is admittadly verbose, but if an API changes,
// this is easy to override and (sortof) future-proof the script
// I'm still not sold it's the right way :\ ... but I'm more interested in
// creating something useful first, then clean it up :D
rules: {
'rotateX':{
regex: /rotateX\((-?[0-9]+deg)\)/,
unit: 'deg'
},
'rotateY': {
regex: /rotateY\((-?[0-9]+deg)\)/,
unit: 'deg'
},
'rotateZ': {
regex: /rotateZ\((-?[0-9]+deg)\)/,
unit: 'deg'
},
'rotate': {
regex: /rotate\((-?[0-9]+deg)\)/,
unit: 'deg'
},
'translateX': {
regex: /translateX\((-?[0-9]+%)\)/,
unit: '%'
},
'translateY': {
regex: /translateY\((-?[0-9]+%)\)/,
unit: '%'
},
'translateZ': {
regex: /translateZ\((-?[0-9]+px)\)/,
unit: 'px'
},
'scale': {
regex: /scale\((-?[0-9]+)\)/,
unit: ''
},
'scaleX': {
regex: /scaleX\((-?[0-9]+)\)/,
unit: ''
},
'scaleY': {
regex: /scaleY\((-?[0-9]+)\)/,
unit: ''
},
'skewX': {
regex: /skewX\((-?[0-9]+deg)\)/,
unit: 'deg'
},
'skewY': {
regex: /skewY\((-?[0-9]+deg)\)/,
unit: 'deg'
},
'scale': {
regex: /scale\((-?[0-9]+\.?[0-9]+?)\)/,
unit: ''
},
'scaleX': {
regex: /scaleX\((-?[0-9]+\.?[0-9]+?)\)/,
unit: ''
},
'scaleY': {
regex: /scaleY\((-?[0-9]+\.?[0-9]+?)\)/,
unit: ''
},
'matrix': {
regex: /matrix(.+)/,
unit: ''
}
}
};
var Transition = global.Transition = function(element, supported){
this.element = element;
this.supported = supported || {
prefixes: ['WebkitTransition', 'MozTransition', 'OTransition', 'msTransition' ],
transformPrefixes: ['-webkit-' , '-moz-' , '-o-' , '-ms-']
};
this.style = getSupportedStyle(element, this.supported.prefixes);
this.supported.index = this.supported.prefixes.indexOf(this.style);
}; global.Transition.prototype = {
map: {
'duration': 'Duration',
'property': 'Property',
'timing-function': 'TimingFunction'
},
set: function(property, value){
if (typeof property === 'string') {
if (value === 'transform') value = this.supported.transformPrefixes[this.supported.index] + 'transform';
this.element.style[this.style + this.map[property]] = value;
return this;
}
for (i in property) if (property.hasOwnProperty(i)) this.set(i, property[i]);
return this;
},
clear: function(rule){
if (!rule) {
return this.set({
duration: '',
property: '',
'timing-function': ''
});
}
return this.set(rule, '');
}
}
})(window); // change window to whatever global object you want to hand these constructors from
/*
---
name: Transform.MooTools
license: MIT-style license.
author: Ryan Florence <http://ryanflorence.com>
requires:
- Core/Element
- CSSAnimation
provides: [MooTools]
...
*/
Element.Properties.transform = {
set: function(supported){
return this.store('transform', new Transform(this, supported));
},
get: function(){
var instance = this.retrieve('transform');
return instance || this.set('transform').get('transform');
}
};
Element.Properties.transition = {
set: function(supported){
return this.store('transition', new Transition(this, supported));
},
get: function(){
var instance = this.retrieve('transition');
return instance || this.set('transition').get('transition');
}
};
(function(){
var obj = {};
['translate', 'rotate', 'scale', 'skew', 'matrix'].each(function(method){
obj[method] = function(){
var instance = this.get('transform');
instance[method].apply(instance, Array.slice(arguments, 0));
return this;
};
});
obj.trans = obj.translate;
obj.clearTransform = function(){
this.get('transform').clear();
return this;
};
['set', 'clear'].each(function(method){
obj[method + 'Transition'] = function(){
var instance = this.get('transition');
instance[method].apply(instance, Array.slice(arguments, 0));
return this;
}
});
Element.implement(obj);
}());
// reset transforms to this
var zeros = {x:0, y:0, z:0};
// Implement animation methods on the element prototype
Element.implement({
// Scatter elements all over the place
scatter: function(){
return $(this).trans({
x: Number.random(-1000, 1000),
y: Number.random(-1000, 1000),
z: Number.random(-500, 500)
}).rotate({
x: Number.random(-720, 720),
y: Number.random(-720, 720),
z: Number.random(-720, 720)
});
},
// Return them to their original state
unscatter: function(){
return $(this).trans(zeros).rotate(zeros);
},
// Frighten the image! AHHHHHHHH!
frighten: function(d){
this.setTransition('timing-function', 'ease-out').scatter();
setTimeout(function(){
this.setTransition('timing-function', 'ease-in-out').unscatter();
}.bind(this), 500);
return this;
},
// Zoooooom into me
zoom: function(delay){
var self = this;
this.scale(0.01);
setTimeout(function(){
self.setTransition({
property: 'transform',
duration: '250ms',
'timing-function': 'ease-out'
}).scale(1.2);
setTimeout(function(){
self.setTransition('duration', '100ms').scale(1);
}, 250)
}, delay);
},
// Create a slider
makeSlider: function(){
var open = false,
next = this.getNext(),
height = next.getScrollSize().y,
transition = {
property: 'height',
duration: '500ms',
transition: 'ease-out'
};
next.setTransition(transition);
this.addEvent('click', function(){
next.setStyle('height', open ? 0 : height);
open = !open;
});
},
// Scatter, come back
fromChaos: (function(x){
var delay = 0;
return function(){
var element = this;
//element.scatter();
setTimeout(function(){
element.setTransition({
property: 'transform',
duration: '500ms',
'timing-function': 'ease-out'
});
setTimeout(function(){
element.unscatter();
element.addEvents({
mouseenter: element.frighten.bind(element),
touchstart: element.frighten.bind(element)
});
}, delay += x);
}, x);
}
}())
});
// Get the proper CSS prefix from the page
var cssPrefix = false;
switch(Browser.name) { // Implement only for Chrome, Firefox, and Safari
case "safari":
case "chrome":
cssPrefix = "webkit";
break;
case "firefox":
cssPrefix = "moz";
break;
}
// If we support this browser....
if(cssPrefix) {
// 300 x 233
var cols = 20; // Desired columns
var rows = 16; // Desired rows
var totalWidth = 300; // Logo width
var totalHeight = 233; // Logo height
var singleWidth = Math.ceil(totalWidth / cols); // Shard width
var singleHeight = Math.ceil(totalHeight / rows); // Shard height
var shards = []; // Array of SPANs
// Remove the text and background image from the logo
var logo = document.id("logo").set("html","").setStyles({ backgroundImage: "none" });
// For every desired row
rows.times(function(rowIndex) {
// For every desired column
cols.times(function(colIndex) {
// Create a SPAN element with the proper CSS settings
// Width, height, browser-specific CSS
var element = new Element("span",{
style: "width:" + (singleWidth) + "px;height:" + (singleHeight) + "px;background-position:-" + (singleHeight * colIndex) + "px -" + (singleWidth * rowIndex) + "px;-" + cssPrefix + "-transition-property: -" + cssPrefix + "-transform; -" + cssPrefix + "-transition-duration: 200ms; -" + cssPrefix + "-transition-timing-function: ease-out; -" + cssPrefix + "-transform: translateX(0%) translateY(0%) translateZ(0px) rotateX(0deg) rotateY(0deg) rotate(0deg);"
}).inject(logo);
// Save it
shards.push(element);
});
});
// Chaos!
$$(shards).fromChaos(1000);
// console.log($$(shards).fromChaos(1000));
// Didn't know what this was with domready
}
!
