Блог Андрея Юрченко

Авторский блог с полезными статьями по темам: создание сайта, заработок на сайте, заработок в интернете, работа на дому, работа в интернете, инфобизнес

Выезжающий блок на JQuery без плагинов

Привет друзья! Сегодня хочу поделиться с вами хорошим и нужным скриптом, который позволяет сделать на сайте выезжающий блок. Такой блок порой необходим для того, чтобы разместить на сайте дополнительную информацию или привлечь внимание посетителя к чему-либо.

выезжающий блок jquery, выезжающий блок

Наш блок будет появляться при прокрутке страницы вниз до конца и исчезать при прокрутке в обратном направлении. Такое решение можно реализовать, к примеру на WordPress, при помощи различных плагинов, но мы откажемся от них и сделаем все кодом. Подобным образом мы уже делали фиксированное меню на сайте.

Код можно вставить в любой сайт, будь он на php или html и это довольно удобно, так как он универсален и нам не нужно что-то менять. Мы рассмотрим установку выезжающего блока на WordPress и на обычном сайте html. Ну что, давайте приступим к установке.

Код выезжающего блока для сайта

Данный код полностью рабочий на все 100% и лично мной проверен на различных сайтах- устанавливал его на одностраничники, в шаблоны WordPress и не только…

Для начала нам нужно произвести разметку и организовать сам вывод блока. Для этого откройте файл шаблона footer.php и в самый конец поместите следующий код:

<p id="list"> Любой текст перед блоком... (если не нужно просто удалите текст) 
</p>
<div id="boxslide">
    <a class="close">X</a>
    <p> Любой текст</p>
    <h2>Любой текст</h2>
    <a>Читать далее »</a>
</div>

Для обычного сайта данный код помещаете перед закрывающимся тегом </body>/

Далее откройте файл шаблона header.php или в обычном сайте на html перед тегом </head> нам нужно подключить библиотеку JQuery, скопируйте и вставьте следующий код:

<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 = $(‘#last’).offset().top — $(window).height();

if ($(window).scrollTop() > distanceTop)
$(‘#boxslide’).animate({‘right’:’0px’},300);
else
$(‘#boxslide’).stop(true).animate({‘right’:'-500px’},100);
});

$(‘#boxslide .close’).bind(‘click’,function(){
$(this).parent().remove();
});
});
</script>

В этом коде обратите внимание на цифру 500 в 8-ой строке. При задании стилей для блока это значение должно быть больше размера окна блока, чтобы при прокрутке блок полностью прятался за пределы страницы. Надеюсь понятно, если не совсем, то можете по изменять значение и сами увидите что происходит.

Так же можно настроить появление выезжающего блока слева или справа. Для этого в 6-й и 8-й строке задайте положение командой left или right соответственно.

Ну что, блок мы подключили, осталось задать для него стили, чтобы наш блок выводился и выглядел аккуратно, приблизительно вот так:

выезжающий блок jquery, выезжающий блок

 Для этого откроем таблицу стилей style.css и в самом конце вставим следующий код:

/*Стили блока*/
#boxslide{
width:450px;
height:150px;
padding:10px;
background-color:#efefef;
border:2px solid #E28409;
position:fixed;
bottom:0px;
right:-500px;
-moz-box-shadow:-2px 0px 5px #aaa;
-webkit-box-shadow:-2px 0px 5px #aaa;
box-shadow:-2px 0px 5px #aaa;
}

/*Стили содержимого*/
#boxslide p, a.more{
font-size:12px;
text-transform:uppercase;
font-family: Arial,Helvetica,sans-serif;
letter-spacing:2px;
color:#000;
}
a.more{
cursor:pointer;
color:#0000ff;
}
a.more:hover{text-decoration:underline;}
#boxslide h2{
color:#ff0000;
font-size:28px;
margin:10px 20px 10px 0px;
}

/*Стили кнопки закрыть (крестик)*/
a.close{
background:transparent url(../images/close.gif) no-repeat top left;
width:16px;
height:16px;
position:absolute;
cursor:pointer;
top:5px;
right:5px;
}
a.close:hover { background-position:0px -16px; }

Вот и все. Не забудьте сохранять все изменения. Надеюсь со стилями все понятно. Можете изменить все по своему вкусу или в сочетании со своим сайтом. Теперь можете перезагрузить страницу, проскролить ее вниз и вы увидите свой выезжающий блок.

На этом у меня все. Как Вам статья? Надеюсь была полезна. Если возникнут вопросы- можете написать в комментариях и я с удовольствием на них отвечу.

С уважением, Андрей Юрченко

Поделитесь статьей в социальных сетях!

Подпишись на RSS-рассылку и получай новые статьи на почту!

Введите свой e-mail:

МАГИЧЕСКИЙ ШАБЛОН ПОДПИСНОЙ СТРАНИЦЫ В ПОДАРОК, ЗАБИРАЙТЕ

Оставить комментарий:

  1. Классная статья, пользуюсь случаем и хочу пропиарить свой первый проект, (moderation) Буду рад посещению в группу

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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

Комментарии Вконтакте:

Content Tab Three

Блог Андрея Юрченко © 2016

ВВЕРХ