Главная » 2012 » Ноябрь » 2 » Выезжающий блок при прокрутке страницы вниз (Скрипты для ucoz)
02.11.2012, 22:03

Выезжающий блок при прокрутке страницы вниз




Очень интересный эффект: когда пользователь доходит до конца страницы, справа плавно появляется блок с контентом. В этом блоке содержится ссылка на похожую статью, полагаю, это может быть интересно для любого блога или веб-сайта.
Суть в том, что на странице присутствует элемент (например, последний параграф), который служит катализатором для выдвигаемого блока. Вы можете использовать выдвигаемый блок, например, для вывода ссылок на похожие статьи или для вывода информации, на которую, по вашему мнению, пользователю следует акцентировать внимание.

Итак, давайте перейдем к делу.

Для начала,где-нибудь в конце статьи нам понадобится параграф с идентификатором last.

Code
<p id="last">
  Какой-нибудь параграф
</p>


Затем нам потребуется составить html-код для выдвигаемого блока.

Code
<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 дает пользователю возможность спрятать блок, при этом показываться блок больше не будет.

Теперь давайте стилизуем наш выдвигаемый блок.

Code
#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://webo4ka.ru/Ucoz6/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

Code
#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-файл):

Code
<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>


На этом все. Надеюсь, Вам пригодится.
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: http://tympanus.net
Категория: Скрипты uCoz | Просмотров: 2015 | Добавил: sold93 | Рейтинг: 5.0/1 |
Теги: При, Блок, выезжающий, Вниз, прокрутке, страницы
Всего комментариев: 3
0  
1 skazis   (04.11.2012 23:39) [Материал]
Аватар пользователя
А корзину интернет магазина можно вставить, чтобы вылазила после прокручивания Header'a?

0  
2 katy78   (21.11.2012 21:43) [Материал]
Аватар пользователя
А я вот за первый код не поняла (параграф). Можно поподробнее ?

0  
3 sold93 -Infoscript Team-  (21.11.2012 21:50) [Материал]
Аватар пользователя
Ну в тексте один азбац делаете так: <p id="last">
текст абаца
</p>
(<p> - тег, обоначающий абац)
и когда польователь долистает до этого абзаца - появится окошечко с текстом

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]