Bild morphen mootools

[chefprolet]

Servus allerseits,

folgendes möchte ich umsetzen:

Auf der Startseite soll ein grosses Bild über dem Inhalt liegen.
Wenn ich das Bild anklicke, soll es auf eine Grösse von 1 x 1 Pixel gemorpht werden.

Auf der Mootools-Seite gibt es ja diese Funktion in der Demo.

Ich denke ich muss das ganze in einen DIV packen und diesen dann morphen.

Leider komme ich aber gerade dar nicht weiter, und weiss nicht genau, wie ich das in Contao umsetzen soll.

Danke für Hilfe und Tipps.

Gruss
Sven

[chefprolet]

Habe das jetzt mal hinbekommen.....jetzt nur noch ein kleines Problem:

Wie kann ich hier noch eine Dauer (duration) für den Effekt einbauen?
Ich weiss nicht wo die Anweisung rein muss.

<script type="text/javascript">
					
window.addEvent('domready', function() {

    $$('.simple-fx LI').addEvent('click', function(){

        var property = $(this).get('data-property');
        var to = $(this).get('data-value');

        $('element').tween(property, to);

    });


    $('morph-1').addEvent('click', function(){
        $('element').morph({
            'opacity': '0',           
            'z-index': '100'
        });
    });


    $('reset').addEvent('click', function(){
        $('element').erase('style');
    });

});
				</script>

[schman]

Wahrscheinlich dort wo du die opacity und z-index angiebst so in etwa

<script type="text/javascript">
					
window.addEvent('domready', function() {

    $$('.simple-fx LI').addEvent('click', function(){

        var property = $(this).get('data-property');
        var to = $(this).get('data-value');

        $('element').tween(property, to);

    });


    $('morph-1').addEvent('click', function(){
        $('element').morph({
            'opacity': '0',  
            'duration': 'long',
            'z-index': '100'
        });
    });


    $('reset').addEvent('click', function(){
        $('element').erase('style');
    });

});
				</script>

[chefprolet]

Nee.....das sind ja nur meine CSS-Anweisung, zu denen gemorpht wird.
Duration sollte irgendwo mit einem Wert in Milisekunden eingefügt werden.
Aber wo und wie....das ist die Frage

[webster]

Ich glaube, Du musst Dein JS ein wenig umbauen.
Siehe dazu auch http://mootorial.com/wiki/mootorial/06-fx/02-fx.morph:

$('morph-1'').set('morph', {
	duration: 1000,
	transition: Fx.Transitions.Bounce.easeOut
});
$('morph-1'').morph({
            'opacity': '0',  
            'z-index': '100'
});

Ich bin mir allerdings nicht ganz klar darüber, was Du hier machst:

    $$('.simple-fx LI').addEvent('click', function(){

        var property = $(this).get('data-property');
        var to = $(this).get('data-value');

        $('element').tween(property, to);

    });