// Simulates a swinging sign in recent webkits. // This example depends on mootools, but it's trivial to remove it. var swinger = $('swing'); // Move the origin to the top of the div so it appears to hang swinger.setStyle('-webkit-transform-origin', '50% 0 0'); // Set initial gradient var gradient = "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(100%,#2756a5))"; swinger.setStyle('background', gradient) var framerate = 50, timeout = 1000 / framerate; swinger.addEvent('click', function(evt){ if(swinger.retrieve('swinging')) return; var start = 0, scale = 60, rot = 0, step = .30, transform, stopHeight, gradient, shadowLen, shadowColor, shadow; var swing = function(){ rot = Math.sin(start) * scale; start += step; scale *= .93; // handle '3d' rotation var transform = 'rotate3D(1, 0 , 0, ' + rot +'deg)'; swinger.setStyle('-webkit-transform', transform); // add face shadow var stopHeight = 100 - Math.abs(rot), gradient = "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(" + stopHeight.toFixed(2) + "%, #254493))"; swinger.setStyle('background', gradient) // add drop shadow var shadowLen = rot / 2 + 'px', shadowColor = '#aaa'; shadow = ["0px", shadowLen, shadowLen, shadowColor].join(' '); swinger.setStyle('-webkit-box-shadow', shadow); if(scale > 1){ swinger.store('swinging', true); setTimeout(swing, 50); } else{ swinger.store('swinging', false); } }; var timer = setTimeout(swing, timeout); });
<div id="swing"> Click to Swing </div>
#swing{ padding:100px 0; text-align:center; color:#fff; font-weight:bold; font-size:36px; border: 1px solid #ddd; font-family:sans-serif; }