Добавление небольших деталей может придать Вашему сайту завершенности. jQuery это прекрасная JavaScript библиотека, которая поможет довести мельчайшие детали до совершенства.
Нам понадобится подключить jQuery в шапке документа:
HTML
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>Для начала давайте присвоим специальный класс ссылке, которая ведет на другую страницу.
<a href="otherPage.html" class="transition">LINK</a>
JS
<script type="text/javascript">
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(2000);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>Все готово и Вы уже можете всем пользоваться. Но есть еще несколько маленьких моментов. Данный эффект будет выглядеть лучше, если Вы определите цвет для тега html схожий с цветом фонового изображения сайта.
html {
/*используйте этот цвет, если у Вас фон черный или около того*/
background-color: #000000;
}И еще при работе с разными скриптами не забывайте про иерархию и порядок. Лучше все разложить по папкам, чтобы потом легче было разбираться.
Только не забывайте потом менять пути, если что-то перекладываете в другое место. (Немного не по теме, но очень актуально — мы подготовили новый блог с секретами раскрутки соцсетей, которые теперь доступны каждому. Заходите)
Если хотите, чтобы все ссылки открывали новую страницу с таким эффектом (не только с классом transition), тогда просто замените $("a.transition") на $("a").
