java gordijn pagina intro

[GiZ]

beste mensen, ik ben al een tijdje iets aan het proberen maar het lukt me maar niet :shocked:

wat ik wil is dit script gebruiken KLIK maar dan inplaats van het blauwe vlak bijvoorbeeld deze afbeelding KLIK

ik weet niet of het zowiezo wel mogelijk is met dit script, of dat ik een geheel ander script nodig heb.

hoe dan ook, ik hoop dat iemand mij kan helpen

Groeten,
Tjappie078

 

[nosoupforyou]

hoi,

je moet eerst voor elkaar krijgen dat je dat gordijn in 2en knipt en half je browserscherm het ene plaatje zet en de andere helft het andere. (zijn vast wel aantal manieren voor)

dan zet je de position van dat plaatje op absolute en de z-index gewoon hoog

css:

.curtain {
  position: absolute;
  z-index: 999;
}

html:

<div id="curtainLeft" class="curtain"><img ... /></div>
<div id="curtainRight" class="curtain"><img .../></div>

of je maakt van die plaatjes achtergronden.. ik weet niet, je moet ze denk ook resizen aan de hand van de browserwidth en height... denk dat je wel ergens een scriptje kan vinden over browsersizes..

dan moet je alleen de left van die objects langzaam veranderen dat kan je met interval doen

zie setInterval(); van javascript

function curtainInterVal() {
  leftCurtain = document.getElementById(curtainLeft);
  leftCurtain.style.left = leftCurtain.style.left - 10 +'px';
  //de regel hierboven gaat niet werken omdat leftCurtain.style.left een string is waaruit je eerst het nummer moet vissen (veel plezier)
}

dat doe je dan ook voor rightCurtain alleen dan doe je +10 steeds of een getal waardoor het smooth gaat in ieder geval

dit is in ieder geval een beetje het idee, hopelijk heb ik je zon beetje op weg geholpen..

Greets NoSoupForYou