[mootools] Fx.Slide ausfahren

campari · 25. Dezember 2012

Moin,

nutze Fx.Slide, möchte aber einen anderen Effekt des Slidens:

Es soll zu Beginn des Effekts der obere Teil des Elements sichtbar sein. Dann die Mitte, bis zum Schluss des Effekts auch der unterste Bereich sichtbar ist. Also quasi wie wenn man ein Pergament entrollt.
Bei Fx.Slide ist es ja genau umgekehrt: das Div fährt von dem unteren Bereich her aus dem Nirvana aus, bis man zum Ende des Effekts auch den oberen Bereich des Elements sieht.
Sorry für die dämliche Umschreibung, ich kenn einfach den Terminus nicht.

Javascript:

var oVS = new Fx.Slide(sEl + this.options.sPostfix,{
   duration:this.options.iDuration,
   onStart:function(){
      $(sEl).toggleClass('active')
    }
}).hide();

Quaese · 9. Januar 2013

Hi,

ich weiss nicht, ob ich dein Problem richtig verstanden habe - aber vielleicht hilft dir eine Kombination aus CSS und der Fx.Morph.

Beispiel:

Code:

<!DOCTYPE html>
<head>
<title>mootools - morph</title>
<meta name="author" content="Quaese" />
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
  $$('.slider').addEvent('click', function(){
    $(this).morph({
      'height': '300px'
    });
  });
});
</script>
<style type="text/css">
  <!--
.wrapper{
  position: relative;
  height: 300px;
  background: #efefef;
}
.slider{
  position: absolute;
  width: 400px;
  height: 0;
  bottom: 0;
  overflow: hidden;
  border: 1px solid #000;
}
 //-->
</style>
</head>
<body>
<div class="wrapper">
	<div class="slider">
		<p>Lorem ipsum</p>
		<p>Für Designer, Schriftsetzer, Layouter, <br>
    Grafikenthusiasten und alle anderen.</p>

		<p>Ein Projekt startet und doch es gibt noch <br>
    keinen Text, allerdings sollte das Layout schon <br>
    bald präsentiert werden ... was tun?</p>

		<p>Damit das Projekt gleich starten kann benutze einfach <br>
    etwas Lorem ipsum - Blind-, Füll-, Dummy-, Nachahmungs-, Platzhaltertext.</p>

		<p>Generiere einfach soviel Lorem Ipsum Text wie du brauchst, <br>
    kopiere und füge ihn in dein Layout als vorübergehenden Platzhalter <br>
    ein. Somit sieht das Projekt ein Stückchen vollständiger aus als zuvor. Viel Spaß dabei.</p>
  </div>
</div>
</body>
</html>

Ciao
Quaese

[mootools] Fx.Slide ausfahren

campari

Erfahrenes Mitglied

Quaese

Moderator

Neue Beiträge