Schöne Seitenübergänge beim Navigieren im Browser

Um mit Internet Explorer (und wohl auch Firefox) schöne Seitenübergänge zu machen, reicht es, im HEAD der HTML-Seite folgende Transition-Befehle einzufügen:

<meta http-equiv=“Page-Enter“ content=“blendTrans(Duration=0.02)“ />
<meta http-equiv=“Page-Exit“ content=“blendTrans(Duration=0.02)“ />

Unter Google Chrome/Chromium geht das so nicht. Dort geht es (z.B.) ähnlich mit jQuery, so wie im Artikel „How to Use jQuery to Make Slick Page Transitions„.

Vom Prinzip her fügt er so was ein um beim Laden einzublenden:

<script type=“text/javascript“>
$(document).ready(function() {
$(„body“).css(„display“, „none“);
$(„body“).fadeIn(2000);
});
</script>

Beim Klicken der Links wird dann ausgeblendet. Im Gesamten schaut es dann grob so aus:

<script type=“text/javascript“>
$(document).ready(function() {
$(„body“).css(„display“, „none“);

$(„body“).fadeIn(2000);

$(„a.transition“).click(function(event){
event.preventDefault();
linkLocation = this.href;
$(„body“).fadeOut(1000, redirectPage);
});

function redirectPage() {
window.location = linkLocation;
}
});
</script>

Er empfiehlt dann noch, per CSS den Seitenhintergrund einzufärben, dass die Farbe nicht „flackert“, z.B. schwarz wenn die Seiten primär einen dunklen Hintergrund haben:

html {
/*If you had a black or close to black background*/
background-color: #000000;
}

Nett gemacht insgesamt, bin gespannt ob ich das mal brauche und so dann auch einsetzen kann.

Ankommende Suchanfragen:

  • html seitenübergang
  • css seitenübergang
  • css seitenübergänge
  • html seiten überblenden
  • html5 seitenübergänge
  • jquery seitenübergang
  • schöner seiten übergang html
  • seitenübergänge mit css html