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


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

4710
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 2110
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • LeKcUs написал:
  • В самый конец просто добавьте вот такие теги... И у Вас не будет больше возникать вопросов! cry

    <!-- </popup> -->$POWERED_BY$<!-- <popup> -->
  • invitesystem написал:
  • Скачал архив, залил сайт, но проблема с кодом для вставки в конструктор шаблонов. Какие-то в нём знаки вопроса и без обязательного $POWERED_BY$
  • Marishka написал:
  • Можно, включите фантазию. Бесплатно никто ничего делать не будет.... Данный скрипт то написали так как попросили happy
  • BLAzER написал:
  • А на условных операторах это не сделать?
  • Вовчик написал:
  • Кто-то недавно об этом спрашивал
    Последние темы
    Опрос
    423
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 6
    Гостей: 6
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: