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

4789
7.6 из 10
Проголосовало: 12






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

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

Для начала,где-нибудь в конце статьи нам понадобится параграф с идентификатором 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-файл):

Доступно только для пользователей

На этом все. Надеюсь, Вам пригодится.
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://tympanus.net
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
  • waak написал:
  • Почему у меня он перелистывает в верх а не вниз и если это первая песня на стр то он её по кругу гоняет а не переходит к последней
    и как сделать стоп по клику на трек который играет?
  • Acht написал:
  • Тест
    Мда, у меня тоже не работает. Или нужно ждать обновление?
    Добрый вечер.Подскажите,пожалуйста: как сделать, чтобы второй или третий набор смайлов заменить своими.
    Последние темы
    Опрос
    461
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: