Transitions de pages sur des sites Web?

Je me demandais simplement s'il existait des méthodes pour créer des effets de transition sympas et fluides lors de la navigation entre les pages? Des choses comme des effets aveugles, des effets de glissement, etc. Je suppose que je cherche quelque chose comme ce que jQuery peut faire avec des images - mais pour des pages web réelles. Je sais qu'il y a des effets de fondu et tout ça, mais je me demandais s'il y avait quelque chose de plus «moderne» là-bas. Alors que je me rends compte que Flash serait un bon choix pour cela, ce n'est pas une option.Transitions de pages sur des sites Web?

Source

2009-04-23 ryeguy

Est-ce que les gens aiment vraiment les effets ringards dans les transitions de pages? –

Non, je ne le crois pas. – KyleFarris

Je ne sais pas. C'était la demande d'un client. J'espérais prendre la voie facile et le dissuader en disant que ce n'était pas possible; sinon je pourrais juste montrer à quel point les effets Javascript sont ringards et spécifiques au navigateur que j'ai * trouvé *. – ryeguy

Vous pouvez faire des effets sympas si vous utilisez jQuery UI. Ils iront beaucoup plus en douceur si vous chargez tout en utilisant AJAX ... mais, voici un exemple pour le faire fonctionner avec des charges de pleine page.

Tout d'abord, vous devez inclure en plus jQuery UI (je viens built my own et seulement les effets que je saisis au besoin):

<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>

Et voici le javascript dont vous aurez besoin pour le faire fonctionner.

$(function() { 
    $('body').hide(); 
    $('a').bind('click', function() { 
     var newPage = $(this).attr('href'); 
     $('body').hide('blind',{},500, function() { 
      newPageParts = newPage.split('?'); 
      newPageURL = newPageParts[0]; 
      newPageParams = newPageParts[1]; 
      newPage = newPageURL+"?transition=true"+(newPageParams != undefined ? "&"+newPageParams : ''); 
      window.location=newPage; 
     }); 
     return false; 
    }); 
    if(getURLParam('transition') != '') { 
     $('body').show('blind',{},500,null); 
    } 
}); 

function getURLParam(strParamName){ 
    var strReturn = ""; 
    var strHref = window.location.href; 
    if (strHref.indexOf("?") > -1){ 
     var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase(); 
     var aQueryString = strQueryString.split("&"); 
     for (var iParam = 0; iParam < aQueryString.length; iParam++){ 
      if (aQueryString[iParam].indexOf(strParamName + "=") > -1){ 
       var aParam = aQueryString[iParam].split("="); 
       strReturn = aParam[1]; 
       break; 
      } 
     } 
    } 
    return strReturn; 
}

Bien sûr, la décoloration est uniquement d'aller travailler sur les pages qui ont ce script là-dessus ...

Juste une remarque: je ne juste faire un peu cela en quelques minutes donc il pourrait être vraiment ghetto. Mais, ça marche ... alors ... ouais ...

Source

2009-04-23 14:25:01 KyleFarris

Ceci est si complètement rad .../sarcasme – KyleFarris

IE a une implémentation très simple de page transition effects, mais je ne pense pas qu'ils fonctionneront sur d'autres navigateurs comme Mozilla et Safari.

Source

2009-04-23 14:42:25

Transitions de pages sur des sites Web?

Répondre

Questions connexes