MooToolified Screencasts Button (ART)

MooToolified Screencasts Button (ART)

by Oski Krawczyk

HTML

<a id="icons-container" href="#"></a>

CSS

body {
    background: #ccc; 
    margin: 100px;
}

a {
    display: block;
    position: relative;
    height: 41px;
    width: 41px;
    
}

a strong {
    background: red;
    position: absolute;
    top: 7px;
    left: 7px;
    display: block;
    height: 14px;
    width: 14px;
}

a span {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 27px;
    width: 27px;
    -webkit-border-radius: 20px;
    background: #484D61;
    -webkit-box-shadow: 0 1px 0 #fff;
    -webkit-transition: all 0.3s ease;
}

a:hover span {
    -webkit-transform: scale(1.4);
}

svg {
    border: solid 1px red;
}

JavaScript

// See "Manage Resources" tab for the JS file with SVG paths

var icons = ['M5,23.989c-5.794-4.692-6.69-13.19-2.002-18.979c4.689-5.79,13.187-6.68,18.98-1.988c5.795,4.693,6.691,13.19,2.002,18.98 C19.293,27.791,10.795,28.682,5,23.989z'];

var i = 'M16,5.333c-7.732,0-14,4.701-14,10.5c0,1.982,0.741,3.833,2.016,5.414L2,25.667l5.613-1.441c2.339,1.317,5.237,2.107,8.387,2.107c7.732,0,14-4.701,14-10.5C30,10.034,23.732,5.333,16,5.333z';

var createIcon = function(icon, index){
    var art = new ART(41, 41);
    var group = new ART.Group;

    // cache the path
    var iconPath = new ART.Path(icon);
    var iPath = new ART.Path(i);
    var pico = new ART.Shape(iPath);
    // create the white shadow
    var iconShadow = new ART.Shape(iconPath);
    iconShadow.fill('#fff');
    pico.fill('#fff');
    iconShadow.translate(0, 1);
    
    // create an icon with the gradient
    var icon = new ART.Shape(iconPath);
    icon.fill('#484D61', '#63687E');
    
    group.grab(iconShadow, icon);    
    group.inject(art);
    pico.inject(art);
    group.translate(7, 7);
    
    art.inject($('icons-container'));

    // add some extra funkyness
    var fx = new Fx({
        duration: 300,
        transition: 'back:out'
    });

    fx.set = function(i){
        group.scale(i);
        var size = icon.measure();
        var x = 7 - (size.width * i - size.width) / 2;
        group.translate(x,x);
        
        //group.translate((27 / 2) - (groupSize.width / 2), 0);
    };
        
    group.listen({
        mouseover: function(){
            //fx.start(1.0, 1.4);
        },
        
        mouseout: function(){
            //fx.start(1.4, 1.0);
        }
    });
    
    art.listen({
        mouseover: function(){
            fx.start(1.0, 1.4);
        },
        
        mouseout: function(){
            fx.start(1.4, 1.0);
        }
    });
};

icons.each(function(icon, index){
    createIcon(icon, index);
});