delay pagina overgang

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jordy R

Jordy R

18/03/2015 07:47:43
Quote Anchor link
hey allemaal.

ik wil een intro en een ending in mijn pagina maken.(gordijnen die openschuiven bij onload en weer dicht gaan bij verlaten van de pagina)

intro is gelukt maar hoe maak ik de ending ?

ik moet een vertraging op me paginawissel hebben zo dat de animatie niet alleen verschijnt maar ook compleet word af gespeeld.

ik heb nu deze code
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
function start(){  
     $('#gordijn3').hide();
setTimeout(function(){ open() }, 5000);
}
function open(){  
$('#gordijn2').hide();
}
window.onbeforeunload=close;
function close(){
 
$('#gordijn3').show();
}
 
PHP hulp

PHP hulp

03/03/2025 08:02:50
 
- wes -

- wes -

18/03/2015 14:10:07
Quote Anchor link
Misschien een stomme vraag, maar waarom wil je dit? Als ik van een pagina wil zit ik er niet op te wachten dat er eerst gordijnen dicht gaan of whatever.
 
Eschwin Moerkerken

Eschwin Moerkerken

18/03/2015 14:34:57
Quote Anchor link
Hallo Jordy R,

Ik ben het met -wes- eens dat er niemand op zit te wachten, maar mocht je er toch voor kiezen om layout te kiezen boven gebruiksvriendelijkheid heb ik het volgende stukje code voor je geschreven uit de losse hand (dit heb ik niet getest).

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// wanneer je op een anchor klikt moet jquery de volgende functie uitvoeren.
$('a').on('click', function(e) {
    // zorgt ervoor dat het standaard gedrag van een anchor niet werkt
    e.preventDefault();
    
    // sla je href locatie op voor latere gebruik
    var href = $(this).attr('href');

    // speel hier je animatie af
    animatie();
    
    // set timeout met een delay welke overeenkomt met je animatie
    setTimeout(function() {
        // zorg ervoor dat de browser naar de juiste pagina gaat na de timeout (animatie)
        window.location.href = href;
    }, 400);
})
 
Thomas van den Heuvel

Thomas van den Heuvel

18/03/2015 14:41:14
Quote Anchor link
Animaties hebben toch ook een callback die uitgevoerd wordt als de animatie klaar is? Is bovenstaande constructie een soort van failsafe oplossing (mocht de animatie op een of andere manier niet eindigen, verhuis je toch)?
 
Eschwin Moerkerken

Eschwin Moerkerken

18/03/2015 14:45:43
Quote Anchor link
Thomas van den Heuvel op 18/03/2015 14:41:14:
Animaties hebben toch ook een callback die uitgevoerd wordt als de animatie klaar is? Is bovenstaande constructie een soort van failsafe oplossing (mocht de animatie op een of andere manier niet eindigen, verhuis je toch)?


Daar had ik zo snel inderdaad nog niet aan gedacht, maar mocht een animatie om één of andere reden niet uitvoerbaar zijn, kun je toch door de website heen navigeren op deze manier. :)
 
Jordy R

Jordy R

18/03/2015 16:41:56
Quote Anchor link
dankje Eschwin Moerkerken dit scriptje werkt.
 
Eeyk Vd noot

Eeyk Vd noot

18/03/2015 23:03:20
Quote Anchor link
Mag ik misschien je website zien ben benieuwd hoe het er uit ziet.
 
Phpnuke r

phpnuke r

18/03/2015 23:15:04
Quote Anchor link
Ik ben het op zich met Eschwin eens, maar wel met als standpunt dat een animatie ook echt fancy moet zijn wil hij indruk op mij maken. Elders lijkt mij een flat responsive design(welke je in veelvoud bijvoorbeeld op dribbble kan vinden) een betere optie.
 
Eschwin Moerkerken

Eschwin Moerkerken

19/03/2015 15:49:32
Quote Anchor link
Jordy R op 18/03/2015 16:41:56:
dankje Eschwin Moerkerken dit scriptje werkt.


Ben blij dit te horen, veel succes verder met je website!


Eeyk Vd noot op 18/03/2015 23:03:20:
Mag ik misschien je website zien ben benieuwd hoe het er uit ziet.


Ik ben ook wel erg benieuwd naar je website, zou je misschien in dit topic je website willen posten (indien deze online staat uiteraard). :)
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.