Create a gist now

Instantly share code, notes, and snippets.

Mr Frown (and family)
.mk-blog-demo-frown-family { padding: 0.5em 0; font-size: 5em;}
.mk-blog-demo-frown-family p { margin: 0; padding: 0.4em; text-align: center;}
.mk-blog-demo-frown-family p span { color: #bbb; margin-left: 1em;}
.mk-blog-demo-frown-family p.uncle-O { font-size: 6em; display: none; padding: 0.5em 0;}
.mk-blog-demo-frown-family p.uncle-O span { margin: 0;}
/* rotate ftw */
span[frown] { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); display:inline-block; }
span[rt-15] { transform: rotate(15deg); -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); display:inline-block; }
span[rt-30] { transform: rotate(30deg); -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); display:inline-block; }
span[rt-45] { transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); display:inline-block; }
span[rt-90] { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); display:inline-block; }
span[rt-135] { transform: rotate(135deg); -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); display:inline-block; }
span[rt-180] { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); display:inline-block; }
span[rt-225] { transform: rotate(225deg); -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); display:inline-block; }
span[rt-270] { transform: rotate(270deg); -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); display:inline-block; }
span[rt-315] { transform: rotate(315deg); -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); display:inline-block; }
span[rt-335] { transform: rotate(335deg); -webkit-transform: rotate(335deg); -moz-transform: rotate(335deg); display:inline-block; }
span[rt-345] { transform: rotate(345deg); -webkit-transform: rotate(345deg); -moz-transform: rotate(345deg); display:inline-block; }
span[rt-360] { transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); display:inline-block; }
<div class="mk-blog-demo-frown-family">
<p><a href="#do-you-frawn"><span frown>:( </span></a></p>
<p><span rt-0>*_*</span><span rt-0>o_O</span></p>
<p><span rt-90>:)</span><span rt-90>;)</span><span rt-90>X)</span></p>
<p><span rt-90>:D</span><span rt-90>:P</span><span rt-90>;p </span><span rt-90>:s</span></p>
<p><span rt-90>:(</span><span rt-90>:'(</span><span rt-90>:(</span><span rt-90>=/</span><span rt-0>>_<</span></p>
<p class="uncle-O"><span rt-90>:O</span></p>
</div>
/* Easter Egg part */
// Plugin part
(function($) {
$.fn.harmony = $.fn.harmony ||
function() {
return this;
};
var r = $.fn.harmony.randomize = function(range) {
var rMe = function() {
return Math.floor(Math.random() * 255);
};
return [rMe(), rMe(), rMe()];
};
var rt = function() {
var rdom = Math.floor(Math.random() * 360);
var transform = 'rotate(' + rdom + 'deg)';
return {
'transform': transform,
'-moz-transform': transform,
'-webkit-transform': transform
}
return transform + '; -webkit-' + transform + '; -moz-' + transform + ';';
};
// For the frown family
(function() {
var intervalId, isInCrazyParty;
$.fn.goToFiesta = function(interval, action) {
console.log('goToFiesta', interval);
var isRgba = $('body').is('.rgba'), callUncleO = function(elem) {
elem.find('p').hide();
elem.find('.uncle-O').show();
return elem;
};
var rts = ['15', '30'];
interval = interval || 1000;
action = action || 'none';
return this.each(function() {
log('make it frown?');
var t = $(this), spans = t.find('span:not(":last")'), frowning = t.data('frowning'), crazy = t.data('crazyparty');
if (action === 'crazy') {
isInCrazyParty = true;
t.data('crazyparty', true);
} else
if (action === 'stop') {
log('stop!');
clearInterval(intervalId);
t.data('frowning', false);
// And call Uncle O
callUncleO(t);
}
if (!frowning) {
log('!frowning');
intervalId = setInterval(function() {
spans.each(function() {
var color = 'rgb' + (isRgba ? 'a' : '') + '( ' + r().join(',') + (isRgba ? ', 0.5' : '') + ')';
var css = {
color: 'rgba( ' + r().join(',') + ', 0.5)'
};
if (isInCrazyParty) {
$.extend(css, rt());
}
$(this).css(css);
});
}, interval);
t.data('frowning', true);
}
});
};
})();
})(window.jQuery);
$(function() {
$(".mk-blog-demo-frown-family").find('a').bind('click', function() {
var frownFamily = $(this).closest('div');
var frowning = frownFamily.data('frowning');
var crazy = frownFamily.data('crazyparty');
if (crazy) {
frownFamily.goToFiesta(0, 'stop');
return;
}
if (frowning) {
frownFamily.goToFiesta(0, 'crazy');
return;
}
frownFamily.goToFiesta(300);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment