Morph / Morphing (dt. verwandeln/verformen ) (Framework: MooTools)

Ein Morph wird benötigt, um das Layout eines Elementes möglichts "weich" zu verändern. Probiert es am besten selber aus:

HTML Quellcode

<p>
    <input type="submit" value="Morph" id="morphEffect">
    <input type="submit" value="CSS Morph" id="CSSmorphEffect">
    <input type="submit" value="Reset" id="resetEffect1">
</p>
<div class="demoElementHeight">
    <div id="anotherElement" class="demoElement">
        Demo Text
    </div>
</div>

CSS Quellcode

div.demoElement {
    width: 80px;
    height: 80px;
    border: 1px solid black;
    background-color: #f9f9f9;
    font-size: 12px;
    color: #000000;
    padding: 10px;
}

div.demoElementHeight {
    height: 120px;
}

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

Javascript Quellcode

window.addEvent('domready', function(){
    var anotherEl = $('anotherElement');
    var morph = new Fx.Morph('anotherElement');
    $('morphEffect').addEvent('click', function(e){
        e.stop();
        morph.start({
            width: '200px',
            color: '#C6D880'
        });
    });
    $('CSSmorphEffect').addEvent('click', function(e){
        e.stop();
        anotherEl.morph('.myClass');
    });
    
    $('resetEffect1').addEvent('click', function(e){
        e.stop();
        anotherEl.morph('div.demoElement');
    });
});