JSFiddle - React, Tailwind, and code Playground
HTML
<a id="homeLogo"><span>Home</span></a>
CSS
a#homeLogo {
width:300px;
height:233px;
text-indent:-3000px;
background:url(http://funcook.com/css/../nImg/logoFuncook.png) 0 0 no-repeat;
display:block;
z-index:2;
}
a#homeLogo span {
float:left;
display:block;
background-image:url(http://funcook.com/css/../nImg/logoFuncook.png);
background-repeat:no-repeat;
}
.clear { clear:both; }
JavaScript
Number.random = function(min, max){
return Math.floor(Math.random() * (max - min + 1) + min);
};
var zeros = {x:0, y:0, z:0};
jQuery.extend(jQuery.fn, {
scatter: function(){
return this.translate({
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)
});
},
unscatter: function(){
return this.translate(zeros).rotate(zeros);
},
frighten: function(d){
var self = this;
this.setTransition('timing-function', 'ease-out').scatter();
setTimeout(function(){
self.setTransition('timing-function', 'ease-in-out').unscatter();
}, 500);
return this;
},
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);
return this;
},
makeSlider: function(){
return this.each(function(){
var $this = $(this),
open = false,
next = $this.next(),
height = next.attr('scrollHeight'),
transition = {
property: 'height',
duration: '500ms',
transition: 'ease-out'
};
next.setTransition(transition);
$this.bind('click', function(){
next.css('height', open ? 0 : height);
open = !open;
});
})
},
fromChaos: (function(){
var delay = 0;
return function(){
return this.each(function(){
var element = $(this);
console.log(element);
//element.scatter();
setTimeout(function(){
element.setTransition({
property: 'transform',
duration: '500ms',
'timing-function': 'ease-out'
});
setTimeout(function(){
element.unscatter();
element.bind({
mouseenter: jQuery.proxy(element.frighten, element),
touchstart:...