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

4845
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
Мини-чат
Последние комментарии
  • Marishka написал:
  • Upd 1.4 Кому лень https://jsfiddle.net/7js6tfp1/5/
  • Marishka написал:
  • Мы обновили код и упростили его установку:
    Что нового:
    1. Новый легкий js код.
    2. Отправка по Enter если есть или нет Aa цвета.
    3. Простая установка.

    Принцип работы:
    Используется родное поле ввода текста с выбором цвета, родная кнопка отправки скрывается позволяя отправить форму по Enter.

    Демо: https://jsfiddle.net/7js6tfp1/4/
  • Marishka написал:
  • Радио не стоит на месте новая версия вам 1.5:
    Что нового:
    1. Media Session - позволит вам переключать из бара браузера радио, а также на блоке экрана.
    2. Новые радиостанции.
    3. Новый API код.

    Демо: fiddle
    Реальная полная версия: woobl
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
    Последние темы
    Опрос
    261
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: