gbAnimate v1.0
Diese JavaScript Klasse ermöglicht es Ihnen beim Seitenaufbau Elemente einzufaden oder bei einem Seitenaufruf Elemente auszufaden. D.h. das beim eintreten in eine Seite die gewünschten Elemente eingeblendet werden und beim verlassen der Seite ausgeblendet werden. Diese ein- ausblend Animation ist sehr effektvoll und wertet Ihre Seite auf ohne Flash verwenden zu müssen.
Demo
Klicken Sie den folgenden Link an und beobachten Sie den ein- ausblend Effekt.
» gbAnimate Demo herunterladen
Einbinden
- Laden Sie die benötigt Daten » hier herunter.
- Binden Sie die JavaScript Dateien in Ihrer Seite ein.<script type="text/javascript" src="js/moo1.3.1_compile.js"></script>
<script type="text/javascript" src="js/gbanimate_compile.js"></script> - Sie können der Klasse noch Optionen (optional) zuweisen, die der Klasse übergeben werden soll.<script type="text/javascript">
var gbAnimateOpt = {
fadeEl: ['content'],
href: 'a',
durationIn: 'short',
transitionIn: Fx.Transitions.Expo.easeIn,
durationOut: 'short',
transitionOut: Fx.Transitions.Expo.easeOut
}
</script> - Die JavaScript Klasse wird automatisch aufgerufen, wenn die Webseite vollständig geladen ist.
Erläuterung
- fadeEl
Geben Sie in diesem Array die IDs der Elemente an, die animiert werden sollen.
Z.B. ['elid1', 'elid2'] - href
Hier stehen die Links, die die Animation zum ausblenden veranlassen.
Z.B. '#nav1 a, #nav2 a, a.class' oder alle Links 'a' - durationIn und durationOut
Einstellung für die Geschwindigkeit der Animation.
Z.B. 'short', 'normal', 'long' oder eine Zahl (1=1ms, 100=100ms) - transitionIn und transitionOut
Diese Einstellung gibt den Ablauf der Animation an.
Mehr dazu finden Sie bei » MooTools
Z.B. Fx.Transitions.Expo.easeIn, Fx.Transitions.Linear.easeIn
Tamber
07.08.2011 17:12:35
Thank you so much for this atrlice, it saved me time!