gbMoveBox v1.0

Mit gbMoveBox können Sie einen Div Container an einer absoluten Stelle positionieren. Beim scrollen bewegt sich dieser Div Container zur eingestellten Position. Diese Klasse eignet sich besonders für Werbung oder für Informationen, die immer präsent sein sollen.

Demo

Scrollen Sie die Seite um den Div Container zu bewegen.

» gbMoveBox 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="gbmovebox.js"></script>
3. Legen Sie einen Div Container an, der sich bewegen soll und vergeben Sie diesen eine ID (z.B. id="gbbox").
4. Sie können der Klasse noch Optionen (optional) zuweisen, die übergeben werden soll.
   <script type="text/javascript">
var gbMoveBoxOpt = {
boxEl : 'gbbox',
parentEl : 'site',
startTop : 48,
startLeft : 16,
startTopIE : 0,
startLeftIE : 0,
duration : 'long',
transition : Fx.Transitions.Quad.easeInOut
}
</script>
5. Die JavaScript Klasse wird automatisch aufgerufen, wenn die Webseite vollständig geladen ist.

Erläuterung

• boxEl
  Tragen Sie hier die ID für das Div Element ein, das bewegt werden soll.
  Z.B. 'gbbox'
• parentEl
  Die meisten Webseiten werden im Browser zentriert dargestellt. Um Ihren Div Container an Ihre Webseite ausrichten zu können, tragen Sie hier die ID Ihres Hauptcontainers ein. Die Abstände (startTop und startLeft) hängen von der Position des Hauptcontainers ab.
  Z.B. 'site'
• startTop
  Dieser Wert bestimmt den oberen Abstand.
  Z.B. 48
• startLeft
  Dieser Wert bestimmt den linken Abstand.
  Z.B. 16
• startTopIE
  Wenn der Internet Explorer ggf. Ihrer Webseite anderes darstellt, kann hier die Toleranz angegeben werden. Der Wert den Sie hier eintragen, wird bei startTop hinzugefügt oder abgezogen.
  Z.B. 10 (startTop+10=58) oder -10 (startTop-10=38)
• startLeftIE
  Hier wird wie bei startTopIE die Toleranz vom linken Abstand eingetragen.
  Z.B. Z.B. 10 (startLeft+10=26) oder -6 (startLeft-6=10)
• duration
  Einstellung für die Geschwindigkeit der Animation.
  Z.B. 'short', 'normal', 'long' oder eine Zahl (1=1ms, 100=100ms)
• transition
  Diese Einstellung gibt den Ablauf der Animation an.
  Mehr dazu finden Sie bei » MooTools
  Z.B. Fx.Transitions.Expo.easeIn, Fx.Transitions.Linear.easeIn