moofx tmp demos

HTML

<script src="http://home.kamicane.net/prime.js"></script>
<div id="wrapper">
<div id="element">MooTools</div>

<div id="actions">

    <h2>Simple Fx</h2>
    <ul class="simple-fx">
        <li data-property="transform" data-value="rotate(360deg)">rotate 360 degrees</li>
        <li data-property="transform" data-value="rotate(0deg)">rotate 0 degrees</li>
        <li data-property="transform" data-value="scale(2)">grow</li>
        <li data-property="transform" data-value="scale(1)">shrink</li>
        <li data-property="transform" data-value="rotateY(180deg)">flip horizontal</li>
        <li data-property="transform" data-value="rotateY(0deg)">reset flip horizontal</li>
        <li data-property="transform" data-value="rotateX(180deg)">flip vertical</li>
        <li data-property="transform" data-value="rotateX(0deg)">reset flip vertical</li>
        <li data-property="opacity" data-value="0">Fade opacity to 0</li>
        <li data-property="opacity" data-value="0.3">Fade opacity to 0.3</li>
        <li data-property="opacity" data-value="1">Fade opacity to 1</li>

        <li data-property="background-color" data-value="#78BA91">Animate background color</li>

        <li data-property="border-width" data-value="10px">Animate border</li>
    </ul>

    <h2>More Fx</h2>
    <ul class="more-fx">
        <li id="morph-1">First example!</li>
        <li id="morph-2">Second example!</li>
    </ul>

</div>
</div>

CSS

body {
font: 14px Helvetica, Arial;        
}

#element {
    text-align: center;
    border-radius: 6px;
    background-color: #F9F9F9;
    border: 2px solid #6B7B95;
    color: #000;
    float: left;
    margin: 50px;
    padding: 10px;
    width: 60px;
}

.myClass {
    background-color: #C6D880;
    border: 3px dashed #000;
    font-size: 20px;
    height: 60px;
    padding: 20px;
    width: 300px;
}


#actions {
    float: right;
    width: 190px;
}
    #actions LI, #reset {
        color: #6B7B95;
        cursor: pointer;
        line-height: 18px;
        text-decoration: underline;
    }
    #actions LI:HOVER, #reset:HOVER {
        color: #E79D35;
        text-decoration: none;
    }
    
#reset {
    font-size: 10px;
    margin: 30px 0 0;
}

JavaScript

$.use(slick)

$.ready(function() {

    $("#wrapper").style({
        "perspective": "800px"
    });
    $("#element").style({
        "transform-style": "preserve-3d"
    });

    $('.simple-fx LI').on('click', function() {
        var property = $(this).getAttribute('data-property');
        var to = $(this).getAttribute('data-value');

        var obj = {};
        obj[property] = to;

        $('#element').animate(obj);
    });

    $('#morph-1').on('click', function() {
        $('#element').animate({
            'transform': "rotateY(180deg)",
            'background-color': '#F9F9F9',
            'color': '#78BA91',
            "border-width": "2px",
            'width': '200px'
        });
    });

    $('#morph-2').on('click', function() {
        $('#element').animate({
            'transform': "rotateY(0deg)",
            'background-color': '#E79D35',
            'border-width': '1px',
            'border-style': 'solid',
            'border-color': '#000000',
            'color': '#fff',
            'opacity': '0.6',
            "width": "60px"
        });
    });

});