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

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

Оставайся на связи

Будь всегда в курсе новых материалов! Подписывайся на каналы\паблики\рассылки чтобы получать оперативные оповещения.

Комментарии

Ответ на от Гость (не проверено)

N
Niklan 21.05.2013 - 18:05

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

Г
Гость 18.02.2014 - 08:02

Спасибо за комментарии! Отличные эффекты)))

B
BOOTSTRAP 15.04.2015 - 12:04

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

S
SilentStrom 14.09.2015 - 00:09

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

Добавить комментарий

Содержимое данного поля является приватным и не предназначено для показа.