Как можно реализовать плавный переход между страницами?

Question

[Александр Кудряшов]

Здравствуйте.

Как можно реализовать анимированные плавные переходы между страницами сайта? Пример реализован тут: www.audreyazoura.fr
Какие плагины использованы? Для анимации страницы какой плагин вы посоветуете?

Спасибо.

Answer 1

[timfcsm]

там просто аяксом подгружается полностью страница, вырезается из неё кусок с контентом и вставляется в body
вот сам запрос и с коллбэком

$("a.nav-ajax").live("click", function(){
		$this = $(this);
		var link = $this.attr('href');
		if( link != current_url && link != '#' ) { // On lance l'ajax uniquement si l'url destination est differente de l'actuelle
			$.ajax({
				url:link,
				processData:true, // Resultat sous forme d'objet
				dataType:'html', // Type HTML
				success:function(data){
					document.title = $(data).filter('title').text(); // On change le titre
					current_url = link;
					if (typeof history.pushState != 'undefined') history.pushState( data, 'Page', link );  // On change l'URL via l'API History
					var content_to_display = "#content-ajax";
					var current_container = $( content_to_display );
					
					// Si le sous-menu est ouvert, on le referme avant de fermer les volets
					delay = 0;
					if( $('footer').hasClass('open-submenu') ) {
						delay = 800;
						footerSubmenuSwitch();
					}
					
					// On ferme les volets et on charge le contenu
					setTimeout(function(){
						closeWebsite();
						setTimeout(function(){
							$('html, body').animate({ scrollTop:  0  },0);
							$("body").attr("class", /body([^>]*)class=(["']+)([^"']*)(["']+)/gi.exec(data.substring(data.indexOf("<body"), data.indexOf("</body>") + 7))[3]); // On récupère les class body de la nouvelle page
							current_container.html(' ');
							current_container.html( $(data).find( content_to_display ).html() );
							unbind(); // Désactive les écouteurs inutiles
							initialisation();	
							// On vide le loader, et on le recharge
							var current = 100;
							var my_interval = setInterval(function () {
								current = current - 3;
								changeImageLoader( current );
								// Lorsque le loader est totalement déchargé
								if( current <= 0 ) {
									clearInterval( my_interval );
									// On réouvre le site lorsque toutes les images sont chargées
									$('body').waitForImages({
										finished: function() {
											openWebsite();
											launchEffect();
											_gaq.push(['_trackPageview'], '/'+current_url); 
										},
										each: function( loaded, count, success ) {
											var my_pourcentage = loaded * 100 / count;
											// On update le loader
											changeImageLoader( my_pourcentage );
										},
										waitForAll: true
									});
								}
							}, 6);
						},1200);
					},delay);
				}
			});
		}
		return false;
	});

остальные функции , котрые внутри коллбэка вызываются тут www.audreyazoura.fr/js/main.js