Автор

17 01.2017
Плавная смена страниц с помощью 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").

 

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

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

Здравствуйте, уважаемые читатели! Есть много способов, показать информацию о продукте. В этом уроке я собираюсь рассказать Вам, как можно сделать куб с информацией на гранях. Будет применен эффект, который основан на CSS3 Transform 3D. Эффект корректно работает в FF, Chrome и Safari, Opera и IE пока не поддерживают CSS Transform 3D.


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

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


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

Типографика стала играть большую роль в современном веб-дизайнеры. Создавая сайт, мы стали уделять внимание таким мелочам как шрифт и его правильное отображение, некоторые мастера предпочитают репозитории гиганта google со шрифтами, а другие собственные, подключаемые к документу, но можно пойти другим путем, и создать полную анимацию текста, для этого мы будем использовать js. В данном посте мы рассмотрим один из таких примеров. Основная идея состоит в том, что текст состоит из капель, которые можно двигать, а они будут разлетаться.


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

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close