Очень интересный эффект: когда пользователь доходит до конца страницы, справа плавно появляется блок с контентом. В этом блоке содержится ссылка на похожую статью, полагаю, это может быть интересно для любого блога или веб-сайта.
Суть в том, что на странице присутствует элемент (например, последний параграф), который служит катализатором для выдвигаемого блока. Вы можете использовать выдвигаемый блок, например, для вывода ссылок на похожие статьи или для вывода информации, на которую, по вашему мнению, пользователю следует акцентировать внимание.
Итак, давайте перейдем к делу.
Для начала,где-нибудь в конце статьи нам понадобится параграф с идентификатором last.
Код
<p id="last">
Какой-нибудь параграф
</p>
Затем нам потребуется составить html-код для выдвигаемого блока.
Код
<div id="slidebox">
<a class="close"></a>
<p>Integer in purus in ante. (4 of 23 articles)</p>
<h2>Etiam quis quam eu risus congue malesuada. </h2>
<a class="more">Read More »</a>
</div>
Элемент с классом close дает пользователю возможность спрятать блок, при этом показываться блок больше не будет.
Теперь давайте стилизуем наш выдвигаемый блок.
Код
#slidebox{
width:400px;
height:100px;
padding:10px;
background-color:#fff;
border-top:3px solid #E28409;
position:fixed;
bottom:0px;
right:-430px;
-moz-box-shadow:-2px 0px 5px #aaa;
-webkit-box-shadow:-2px 0px 5px #aaa;
box-shadow:-2px 0px 5px #aaa;
}
a.close {
background: url("http://www.4ucoz.net/ucoz/1/vidvigauchai_panel_close.gif") no-repeat transparent;
cursor: pointer;
height: 13px;
position: absolute;
right: 10px;
top: 10px;
width: 13px;
}
a.close:hover {
background-position: 0px -13px;
}
Блоку задано фиксированное позиционирование, таким образом, блок не меняет своего положения при скроллинге веб-страницы.
Изначально блок спрятан (у свойства right задано отрицательное значение, соответствующее совокупной ширине блока); выдвигать блок будем при помощи jQuery.
Текстовые элементы и ссылки имеют следующие стили:
CSS
Код
#slidebox p, a.more{
font-size:11px;
text-transform:uppercase;
font-family: Arial,Helvetica,sans-serif;
letter-spacing:1px;
color:#555;
}
a.more{
cursor:pointer;
color:#E28409;
}
a.more:hover{
text-decoration:underline;
}
#slidebox h2{
color:#E28409;
font-size:18px;
margin:10px 20px 10px 0px;
}
Оформим ссылку, которая позволит пользователю закрыть данный блок. Не забывайте, что вы можете оформить блок в соответствии с дизайном вашего сайта.
Нам потребуется добавить две функции. Роль первой функции: если пользователь при прокрутке страницы достиг элемента-катализатора, показываем скрытый ранее блок. Вторая функция: когда пользователь жмет по маленькому крестику, блок исчезает. Эти две функции добавьте после подключенной библиотеки jQuery перед закрывающим тегом body или вставьте скрипт в тег head (или создайте и подключите отдельный js-файл):
Код
<script type="text/javascript">
$(function() {
// функцию скролла привязать к окну браузера
$(window).scroll(function(){
// distanceTop = (высота: от начала страницы до эл-та #last) -
//- высота окна браузера
var distanceTop = $('#last').offset().top - $(window).height();
// если величина прокрутки больше distanceTop
if ($(window).scrollTop() > distanceTop)
$('#slidebox').animate({'right':'0px'},300);
else
$('#slidebox').stop(true).animate({'right':'-430px'},100);
});
//связываем function() с событием click для эл-та .close
$('#slidebox .close').bind('click',function(){
$(this).parent().remove();
});
});
</script>
Готово.
