Создаем эффект плавного перехода на сайте.
Чтобы сделать плавные переходы по сайту, как на этом блоге, я написал простенький JS файлик. Так как про него спрашивают, то выкладываю, хотя его спокойно вырвать можно из кода страниц. Раз уж выкладываю то и написал комментарии чтобы было ясно что происходит.
// Плавные переходы по сайту.
$(document).ready(function () {
// После загрузки страницы сразу делаем её прозрачной.
$('html, body').css({'opacity': '0'});
// И сразуже плавно делаем её видимой.
// Тем самым делаем эффект появляения страницы.
$("html, body").animate({
opacity: 1
}, 500);
// При нажатии на любую ссылку.
$('a').click(function (event) {
// Проверяем что за ссылка. В данном случае анимация перехода сработает
// когда у ссылки не будет:
// - аттрибута target, чтобы при нажатии на внешнии ссылки сайт не
// становился прозрачным.
// - окончания png и jpg, иначе сайт опять же затемнится и ничего не видно.
// - # и admin/ чтобы работали Drupal админка в overlay, а также
// контекстуальные ссылки.
if (!$(this).attr('target') && $(this).attr('href').search('png') == -1 && $(this).attr('href').search('jpg') == -1 && $(this).attr('href') != "#" && $(this).attr('href').search('admin/') == -1) {
// Отключаем для браузера событие о необходимости перехода по ссылке.
event.preventDefault();
// Берем адрес ссылки куда должны были перейти.
var url = $(this).attr('href')
// Выполняем затухание.
$("html, body").animate({
opacity: 0
}, 500, function () {
// После окончания затухания переадресовываем на тот адрес.
window.location.href = url;
})
}
})
})
Комментарии
Возможно, но раз просят и не могут из исходного кода вырывать, то пусть будет так.
Спасибо за комментарии! Отличные эффекты)))
Бутстраповскую карусель прячет при клике и больше не показывает.
Спасибо большое за скрипт. А можно ли сделать чтобы не такими рывками?
ужасный эффект