Uitdagend Script!

  • Onderwerp starter Onderwerp starter RuSt
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.

RuSt

Gebruiker
Lid geworden
23 nov 2004
Berichten
21
Ik zoek een script voor mijn website maar ik weet dat er geen allerdaagse oplossing voor is. Wie kan helpen?!
Dit is het probleem:

Ik heb een achtergrondplaatje van vijf schermen breed. Het is de bedoeling dat de website in het middelste stuk opent en dat de gebruiker dan zowel naar links als naar rechts door de 'wereld' kan scrollen. In deze wereld bevinden zich diverse objecten die dienen als navigatie. Alle ontwerpen zijn klaar dus ik kan beginnen met scripten.

Ik heb ervoor gezorgd dat het plaatje in de normale grootte in de achtergrond wordt geladen en dat de horizontale scrollbalk niet zichtbaar is. Twee onzichtbare layers aan de uiterst rechtse kant van het scherm heb ik een scrollscript gegeven zodat het mogelijk is met twee snelheden naar rechts te scrollen waneer de muis over de layers wordt bewogen. Links hetzelfde verhaal.

Waar ik achter kwam is dat als mensen een schermresolutie hebben van 1024 of hoger dat er maar heel weinig gescrollt kan worden. Het totale achtergrondplaatje staat al bijna helemaal op het scherm. Natuurlijk kan ik het achtergrond plaatje een paar schermen breder maken maar dan duurt het zolang voordat het geladen is bij een tragere pc.

Ik zoek hiervoor een script waarmee je zeg maar 'in de rondte' kan kijken met 1 plaatje. Er is dus geen einde van het plaatje, hij herhaalt steeds hetzelfde plaatje maar zonder dat de gebruiker de overgang duidelijk merkt. Een quiktime VR idee.

Dit is het idee:
1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

Ik denk dat dit mogelijk is door het achtergrondplaatje een zelfde voorkant als achterkant te geven en die op een of andere manier door scripten met elkaar te overlappen... Of dat het plaatje steeds in een milliseconde terugspringt naar het begin...

Heeft iemand hier meer verstand van?
 
Style:
body {margin: 0px; padding: 0px; background: fixed #fff url(achtergrond.jgp) top left repeat-x;}

JavaScr*pt:
PHP:
 var timerID, x = 0, direction, max = 1200; // max = breedte achtergrond

 function stopScroll() {
  clearInterval(timerID);
  };

 function moveBackground() {
  x += direction;
  if (x >= max) {x -= max;};
  if (x < 0) {x += max;};
  document.body.style.backgroundPosition = '-' + x + 'px 0px';
  // moveForeground();
  };

 function startScroll(amount) {
  direction = amount * 5;
  stopScroll();
  timerID = setInterval('moveBackground()',200);
  };
Body:
<body scroll="no">
<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="10%" onmouseover="startScroll(-2)" onmouseout="stopScroll()"></td>
<td width="10%" onmouseover="startScroll(-1)" onmouseout="stopScroll()"></td>
<td width="60%"></td>
<td width="10%" onmouseover="startScroll(+1)" onmouseout="stopScroll()"></td>
<td width="10%" onmouseover="startScroll(+2)" onmouseout="stopScroll()"></td>
</tr>
</table>
</body>


Het is de document.body.style.backgroundPosition die de achtergrond in beweging zet. Met een eigen moveForeground() functie kun je andere objecten aansturen.

object01.style.left = afrond(x + ofset01,breedte01);

afrond(x,b) {
if(x + b >= max) { x-= max;};
return x;
};

o.i.d.


Vr.Gr. Egel.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan