Toka
Threadersteller
Dabei seit: 04.10.2011
Ort: Berlin
Alter: -
Geschlecht: 
|
Verfasst Di 04.10.2011 16:35
Titel "scroll.toElement" mit "chain" in Reihe |
  |
|
Hallo.
Ich bin in Sachen JavaScript im moment noch recht neu. Genauso auch in Mootools.
(Aus diesem Grund, hab ich mir eben auch zwei Bücher bestellt, mit denen ich hoffentlich schnell in diesem Bereich weiter komme)
Aber nun zum Thema:
Ich habe eine Seite auf der durch klicken der einzelnen Navielemente, der Content mit Hilfe von "scroll.toElement" entsprechend zum angegebenen Div hin und herswitched. Das script dafür habe ich bereits auch schon fertig (basierend auf mootools). Insgesamt sind es ca 6 Contentbereiche, die alle in einer Reihe nebeneinander angeordnet sind.
Nun habe ich allerdings das Problem wenn ich beispielsweise vom ersten Element zum Letzten scrollen möchte, dass natürlich (wie solls auch anders sein) alle anderen Contents zwischendrin zu sehen sind. Das sieht kacke aus. 
Eleganter wäre es in dem Fall wenn der aktuelle Content aus dem Sichtfeld scrollt und der angewählte Content direkt als nächstes wieder reinscrollt.
Wie ich das umsetzen kann weiß ich bereits, jedoch fehlt mir das nötige Wissen, es mit javascript/mmootools zu programmieren.
Der HTML code sieht folgendermaßen aus:
| Code: |
<div id="content1" class="scrolling-content">
<div id="space-content1"></div>
<div id="content2" class="scrolling-content">
<div id="space-content2"></div>
<div id="content3" class="scrolling-content">
<div id="space-content3"></div>
<div id="content4" class="scrolling-content">
<div id="space-content4"></div>
<div id="content5" class="scrolling-content">
<div id="space-content5"></div>
<div id="content6" class="scrolling-content">
<div id="space-content6"></div>
|
JavaScript dazu:
| Code: |
var scroll = new Fx.Scroll('main_container', {
wait: false,
duration: 1500,
offset: {'x': 0, 'y': 0},
transition: Fx.Transitions.Sine.easeInOut
});
$('slideout').addEvent('mouseover', function(e){
e = new Event(e);
mySlide.slideOut();
scroll.toElement('content1');
e.stop();
});
$('slideout').addEvent('mouseover', function(event) {
event = new Event(event).stop();
scroll.toElement('content1');
});
$('link2').addEvent('mouseover', function(event) {
event = new Event(event).stop();
scroll.toElement('content2');
});
$('link3').addEvent('mouseover', function(event) {
event = new Event(event).stop();
scroll.toElement('content3');
});
$('link4').addEvent('mouseover', function(event) {
event = new Event(event).stop();
scroll.toElement('content4');
});
$('link5').addEvent('mouseover', function(event) {
event = new Event(event).stop();
scroll.toElement('content5');
});
$('link6').addEvent('mouseover', function(event) {
event = new Event(event).stop();
scroll.toElement('content6');
});
// Slide About
var mySlide = new Fx.Slide('home');
mySlide.hide();
$('slidein').addEvent('mouseover', function(e){
e = new Event(e);
mySlide.slideIn();
scroll.toElement('content1');
e.stop();
}); |
der "spacecontent" dient lediglich dazu, ein leeres Feld anzuzeigen.
Meine Überlegung ist nun so:
Ich bin in Content 1 und möchte nun zu Content 6, dann müssten die effekte so in der art ablaufen
scroll to element "space-content1" (mit einer duration von ca 1500, zum ausfaden des contents)
anschließend
scroll to element "space-content 5" (mit einer duration von 0, um die restlichen, dazwischenliegenden contentbereiche zu "überspringen")
und zuletzt dann wieder
scroll to element "content6" (mit einer duration von ca 1500, zum einfaden des angewählten contents)
ich müsste also 3 Aktionen in hintereinander setzen (das geht wohl mit dem befehl "chain") und die drei aktionen müssen alle eine unterschiedliche duration haben.
Ich hoffe ich habe mich nicht zu kompliziert ausgedrückt und mich versteht jemand.
Bin auf jeden Fall für jede Hilfe dankbar, denn mit Google konnte ich nix konkretes dazu finden.
|
|
Willkommen auf dem Portal für Mediengestalter
