Создадим эффект перехода внутри сайта имитирующий подгрузку контента ajax’ом, как будто без перезагрузки. Принцип эффекта: при переходе по ссылке плавно скрываем изменяемую часть контента, и при загрузке новой плавно ее показываем. Не меняющаяся шапка и появляющийся значок загрузки создают эффект плавной загрузки.
Скрипт имитации
Скрипт имитирует подгрузку контента средствами ajax
<script type="text/javascript">
$(document).ready(function() {
$("#main-content").css("display", "none");
$("#main-content").fadeIn(1000);
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#main-content").fadeOut(500, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>
А для того чтоб сайт не «прыгал» при появлении/исчезновении полосы прокрутки к body добавить свойство
body {overflow-y:scroll;}
Стили скроллинга
/* ScrolBar */
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-thumb {background: #ddd; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}
::-webkit-scrollbar-thumb:hover {background: #B9B9B9;}
::-webkit-scrollbar-thumb:window-inactive {background: #999;}
Сделать также имитацию загрузки loader.gif
Иногда на сайтах в навигационном меню есть ссылки, которые не должны перезагружать сайта. Специально для них скрипт с некоторыми добавлениями и изменениями
+ добавлен еще один стиль для воздействия #landing — это для страницы лендинга, т.к. там может отсутствовать #main-content
+ локализация скрипта только на пунктах меню (читать ниже)
// Имитация загрузки контента Ajax'ом
//добавка для call-item и search-item
$(".call-item > a").addClass("call-item");
$(".search-item > a").addClass("search-item");
$("#main-content, #landing").css("display", "none");
$("#main-content, #landing").fadeIn(1000);
$(".menu-item a").not('.call-item, .search-item').click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#main-content, #landing").fadeOut(500, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
Данный скрипт может частенько вступать в противоречие с другими элементами и модулями сайта, т.к. воздействует на ключевой элемент a (ссылку). Для предотвращения этого можно сократить область действия скрипта, прописав вместо a, например: .menu-item a, .title-post > a
Локализация активации скрипта
Решение противоречий с другими скриптами и ссылками сайта — локализация активации скрипта:
$(".menu-item a, .title_posit > a, .title > a").not('.call-item, .search-item').click(function(event){
Усиление эффекта
Получается более плавно, если строку скрипта
$("#main-content, #landing").css("display", "none");
заменить добавлением данным элементам стиля display: none;
Анимация загрузки при переходе
Прикольные spinner’ы на CSS
http://projects.lukehaas.me/css-loaders/
