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

1. Laden Sie die benötigt Daten » hier herunter.
2. Binden Sie die JavaScript Dateien in Ihrer Seite ein.
   <script type="text/javascript" src="moo1.2.js"></script>
<script type="text/javascript" src="gbanimate.js"></script>
3. Sie können der Klasse noch Optionen (optional) zuweisen, die der Klasse übergeben werden soll.
   <script type="text/javascript">
var gbAnimateOpt = {
fadeEl: ['gbinhalt'],
href: '#gbnav a',
durationIn: 'short',
transitionIn: Fx.Transitions.Expo.easeIn,
durationOut: 'short',
transitionOut: Fx.Transitions.Expo.easeOut
}
</script>
4. 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