Плавные переходы (с затуханием) на сайте.

Создаем эффект плавного перехода на сайте.

21.05.2013
5 комментариев
2 мин.

Чтобы сделать плавные переходы по сайту, как на этом блоге, я написал простенький 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;
      })
    }
  })
})
JavaScript

Комментарии

Niklan   вт, 21/05/2013 - 18:17

Возможно, но раз просят и не могут из исходного кода вырывать, то пусть будет так.

BOOTSTRAP   ср, 15/04/2015 - 12:33

Бутстраповскую карусель прячет при клике и больше не показывает.

SilentStrom   пн, 14/09/2015 - 00:17

Спасибо большое за скрипт. А можно ли сделать чтобы не такими рывками?