BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Эффекты для сайта » Выдвигающаяся панель при прокрутке страницы

Выдвигающаяся панель при прокрутке страницы

2016-04-21 / Вр:23:49 / просмотров: 4537

Всем привет!
Суть этого эффекта: когда пользователь прокручивает страницу до определенного момента, ему снизу показывается дополнительная панель, в которую можно вставить что угодно, начиная с кнопок социальных сетей и заканчивая рекламой.
Наверно, тяжело представить все эти действия на словах? Вот по этой причине предлагаю посмотреть демонстрацию эффекта.

[демонстрация эффекта]

Ну как вам?

Панель будет выдвигаться только после того, как будет достигнут определенный элемент при прокрутке страницы. Определенным элементом у нас будет:

<div id="show"></div>

Переходим к коду.

В CSS пишем вот такой код:

#slidebox{
width: 728px;
height: 90px;
margin-left: 50%;
left: -369px;
background-color: #fff;
border-top: 1px solid #E28409;
border-right: 1px solid #E28409;
border-left: 1px solid #E28409;
position: fixed;
bottom: -105px;
box-shadow: 0 0 10px #aaa;
-moz-box-shadow: 0 0 10px #aaa;
-webkit-box-shadow: 0 0 10px #aaa;
}
a.close{
background: transparent url(close.gif) no-repeat top left;
width: 13px;
height: 13px;
position: absolute;
cursor: pointer;
top: 10px;
right: 10px;
z-index: 10;
}
a.close:hover{
background-position: 0px -13px;
}

Заливаем на хостинг вот эту картинку (close.gif): Выдвигающаяся панель при прокрутке страницы

Подключаем библиотеку jQuery:

<script ENGINE="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Вставляем перед закрывающим тегом </head> javascript:

<script type="text/javascript">
$(function() {
$(window).scroll(function(){
var distanceTop = $('#show').offset().top - $(window).height();
if ($(window).scrollTop() >distanceTop)
$('#slidebox').animate({'bottom':'0px'},300);
else
$('#slidebox').stop(true).animate({'bottom':'-105px'},200);
});
$('#slidebox .close').bind('click',function(){
$(this).parent().remove();
});
});
</script>

Далее вставляем между тегами <body></body> этот код в том месте, где нужно, чтобы при прокрутке веб-страницы выплывал блок:

<div id="show"></div>
<div id="slidebox">
<a class="close"></a>
<p>ВАШ супер-пупер текст</p>
<p>BlogGood.ru</p>
</div>

Ну, вот такое получилось:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Выдвигающаяся при прокрутке страницы панель - BlogGood.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
#slidebox{
width: 728px;
height: 90px;
margin-left: 50%;
left: -369px;
background-color: #fff;
border-top: 1px solid #E28409;
border-right: 1px solid #E28409;
border-left: 1px solid #E28409;
position: fixed;
bottom: -105px;
box-shadow: 0 0 10px #aaa;
-moz-box-shadow: 0 0 10px #aaa;
-webkit-box-shadow: 0 0 10px #aaa;
}
a.close{
background: transparent url(close.gif) no-repeat top left;
width: 13px;
height: 13px;
position: absolute;
cursor: pointer;
top: 10px;
right: 10px;
z-index: 10;
}
a.close:hover{
background-position: 0px -13px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function(){
var distanceTop = $('#show').offset().top - $(window).height();
if ($(window).scrollTop() > distanceTop)
$('#slidebox').animate({'bottom':'0px'},300);
else
$('#slidebox').stop(true).animate({'bottom':'-105px'},200);
});
$('#slidebox .close').bind('click',function(){
$(this).parent().remove();
});
});
</script>
</head>
<body>

Мука в кадке не истощалась, и масло в кувшине не убывало, по слову Господа, которое Он изрек чрез Илию. [3-я Царств 17:16A]<br><br>
Во время голода избавит тебя от смерти, и на войне--от руки меча. [Иов 5:20]<br><br>
И будет Господь прибежищем угнетенному, прибежищем во времена скорби; и будут уповать на Тебя знающие имя Твое, потому что Ты не оставляешь ищущих Тебя, Господи. [Псалом 9:9, 10]<br><br>
Господь знает дни непорочных, и достояние их пребудет вовек: не будут они постыжены во время лютое и во дни голода будут сыты; [Псалом 37:18, 19B]<br><br>
Я был молод и состарился, и не видал праведника оставленным и потомков его просящими хлеба: [Псалом 37:25]<br><br>
Бог нам прибежище и сила, скорый помощник в бедах, посему не убоимся, хотя бы поколебалась земля, и горы двинулись в сердце морей. Пусть шумят, вздымаются воды их, трясутся горы от волнения их [Псалом 46:1-3]<br><br>
Народ! надейтесь на Него во всякое время; изливайте пред Ним сердце ваше: Бог нам прибежище. [Псалом 62:8]<br><br>
говорит Господу: `прибежище мое и защита моя, Бог мой, на Которого я уповаю!' [Псалом 91:2]<br><br>
Простер облако в покров (им) и огонь, чтобы светить (им) ночью. Просили, и Он послал перепелов, и хлебом небесным насыщал их. Разверз камень, и потекли воды, потекли рекою по местам сухим, [Псалом 105:39-41]<br><br>
ибо Я изолью воды на жаждущее и потоки на иссохшее; излию дух Мой на племя твое и благословение Мое на потомков твоих [Исаия 44:3]<br><br>
если же траву полевую, которая сегодня есть, а завтра будет брошена в печь, Бог так одевает, кольми паче вас, маловеры! Итак не заботьтесь и не говорите: что нам есть? или что пить? или во что одеться? [Матфея 6:30, 31]<br><br>
Кто отлучит нас от любви Божией: скорбь, или теснота, или гонение, или голод, или нагота, или опасность, или меч? как написано: за Тебя умерщвляют нас всякий день, считают нас за овец, (обреченных) на заклание. Но все сие преодолеваем силою Возлюбившего нас. Ибо я уверен, что ни смерть, ни жизнь, ни Ангелы, ни Начала, ни Силы, ни настоящее, ни будущее, ни высота, ни глубина, ни другая какая тварь не может отлучить нас от любви Божией во Христе Иисусе, Господе нашем. [Римлянам 8:35-39]<br><br>
Мы отовсюду притесняемы, но не стеснены; мы в отчаянных обстоятельствах, но не отчаиваемся; мы гонимы, но не оставлены; низлагаемы, но не погибаем. [2-е Коринфянам 4:8, 9]<br><br>
А жена убежала в пустыню, где приготовлено было для нее место от Бога, чтобы питали ее там тысячу двести шестьдесят дней. [Откровение Иоанна 12:6]<br><br>
Он заключает воды в облаках Своих, и облако не расседается под ними. Он поставил престол Свой, распростер над ним облако Свое. Черту провел над поверхностью воды, до границ света со тьмою. [Иов 26:8-10]<br><br>
Бог нам прибежище и сила, скорый помощник в бедах, посему не убоимся, хотя бы поколебалась земля, и горы двинулись в сердце морей. Пусть шумят, вздымаются воды их, трясутся горы от волнения их [Псалом 46:1-3]<br><br>
Ты владычествуешь над яростью моря: когда воздымаются волны его, Ты укрощаешь их. [Псалом 89:9]<br><br>
<div id="show"></div>
<div id="slidebox">
<a class="close"></a>
<p style="margin: 0 auto; font-size: 74px; color: #E28409; width: 99%; text-align: center; text-shadow: 0 0 10px #aaa;">BLOGGOOD.RU!</p>
</div>
Но паче шума вод многих, сильных волн морских, силен в вышних Господь. [Псалом 93:4]<br><br>
Он превращает бурю в тишину, и волны умолкают. [Псалом 107: 29]<br><br>
И будет шатер для осенения днем от зноя и для убежища и защиты от непогод и дождя. [Исаия 4:6]<br><br>
ибо Ты был убежищем бедного, убежищем нищего в тесное для него время, защитою от бури, тенью от зноя; ибо гневное дыхание тиранов было подобно буре против стены. [Исаия 25:4]<br><br>
Будешь ли переходить через воды, Я с тобою, --через реки ли, они не потопят тебя; пойдешь ли через огонь, не обожжешься, и пламя не опалит тебя. [Исаия 43:2]<br><br>
Благ Господь, убежище в день скорби, и знает надеющихся на Него. [Наум 1:7]<br><br>
И говорит им: что вы (так) боязливы, маловерные? Потом, встав, запретил ветрам и морю, и сделалась великая тишина. Люди же, удивляясь, говорили: кто это, что и ветры и море повинуются Ему? [Матфея 8:26, 27]<br><br>
се, даю вам власть наступать на змей и скорпионов и на всю силу вражью, и ничто не повредит вам; [Луки 10:19]<br><br>
</body>
</html>

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

2 Ответов на комментарий - Выдвигающаяся панель при прокрутке страницы

  1. inna

    Думаю пугаться будут все, думая, что это лезет реклама.

  2. Avatar photo Степан => автор блога

    не успеют :smile:

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716