gbMoveBox v1.1
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 die rechts Spalte zu bewegen.
» gbMoveBox 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/gbmovebox_compile.js"></script> - Legen Sie einen Div Container an, der sich bewegen soll und vergeben Sie diesen eine ID (z.B. id="gbbox").
- Sie können der Klasse noch Optionen (optional) zuweisen, die übergeben werden soll.<script type="text/javascript">
left = $('content').getSize().x+20;
var gbMoveBoxOpt = {
boxEl : 'marginal',
parentEl : 'site',
startTop: 146,
startLeft: left,
startTopIE: 0,
startLeftIE : 0,
duration : 'long',
transition : Fx.Transitions.Quad.easeInOut,
direction : 'vertical'
}
</script> - 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 - direction
Mit direction können Sie festlegen welche Richtung das Element bewegt werden soll.
Z.B. 'vertical' (Standard) oder 'horizontal'
