Pedanto
ENG

Плавный переход между страницами

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

Больше всего это заметно при первой загрузке страницы, когда еще текстуры фона и изображения еще не кэшируются браузером посетителя. Чтобы "сгладить углы" Pedanto рекомендует использовать простой метод, который подойдет для владельца любого сайта. Он позволит реализовать плавный переход между страницами и плавную загрузку новых страниц.

CSS для эффекта растворения страниц

Первым делом нам понадобиться скрыть HTML тег body используя CSS стиль opacity. Это позволит сделать невидимым весь контент вашего сайта, для последующего плавного его появления при переходе со страницы на страницу. Параметр transition задаст скорость изменения стиля, при его смене. В нашем случае страница станет видимой через пол секунды.

<body style="opacity:0;transition:.5s;">
Важный момент: Если фон вашего сайта не белого цвета, то данный стиль лучше использовать на блоке внутри основного фона сайта, чтобы при смене страницы всегда оставался базовый цвет основного фона.

Плавное появление содержимого с помощью Jquery

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

Для этого перед закрывающим тегом </body> следует разместить следующий код:

<script>
  $(document).ready(function() {    
    $("body").css("opacity", "1");
  });
</script>

Как только страница будет сформирована, наш код изменит opacity тега <body> сделав его видимым, а transition предаст плавности. Вот и все. Таким образом можно легко реализовать плавный переход между страницами сайта, и скрыть дефекты подгрузки страницы.

Посмотреть пример работы этого скрипта, можно просто перейдя на любую страницу нашего сайта.