Плавная смена страниц с помощью jQuery Плавная смена страниц с помощью jQuery

Добавление небольших деталей может придать Вашему сайту завершенности. jQuery это прекрасная JavaScript библиотека, которая поможет довести мельчайшие детали до совершенства.

 

ДЕМО
ИСХОДНИКИ

 

Нам понадобится подключить jQuery в шапке документа:

 

HTML

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>

Для начала давайте присвоим специальный класс ссылке, которая ведет на другую страницу.

<a href="otherPage.html" class="transition">LINK</a>

 

JS

<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>

Все готово и Вы уже можете всем пользоваться. Но есть еще несколько маленьких моментов. Данный эффект будет выглядеть лучше, если Вы определите цвет для тега html схожий с цветом фонового изображения сайта.

html {
	/*используйте этот цвет, если у Вас фон черный или около того*/
	background-color: #000000;
}

И еще при работе с разными скриптами не забывайте про иерархию и порядок. Лучше все разложить по папкам, чтобы потом легче было разбираться.

Только не забывайте потом менять пути, если что-то перекладываете в другое место.

Если хотите, чтобы все ссылки открывали новую страницу с таким эффектом (не только с классом transition), тогда просто замените $("a.transition") на $("a").

 

Вот и всё готово!


🔖 Выбор по тегам ×

Top