Главная
Web-дизайн Wordpress
Выезжающий блок с помощью jQuery

Выезжающий блок с помощью jQuery

Выезжающий блок

Доброго времени суток. 🙂

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

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



Пример

Для анимации блок использует jQuery, поэтому у Вас должна быть подключена библиотека, если Вы этого не делали ранее для других скриптов, то сделайте это или в шапке перед закрывающимся head, или в подвале перед закрывающимся body.

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

Если вы используете WordPress, то в ней может быть уже по умолчанию подключена библиотека.

После строки с подключением библиотеки, нужно вставить следующий javascript.

<script type="text/javascript">
jQuery(document).ready(function($) {  
$(window).scroll(function(){
 	if  ($(window).scrollTop() > 300)
		$('#slidebox').animate({'left':'0px'},500);
		else 
		$('#slidebox').stop(true).animate({'left':'-230px'},500);	
	});
	$('#slidebox .close').bind('click',function(){
		$(this).parent().remove();	
	});
	});
</script>

Скрипт можно настроить указав свои параметры. 300 - высота в пикселях, после которой при прокрутке появится блок.500 - время анимации в миллисекундах и равно 0,5 секунды.
'left':'0px' - блок прижмется к левой стороне и зазор от края страницы до блока - 0 пикселей. left':'-230px' - после прокрутки вверх, панель спрячется, сдвинувшись на 230 пикселей влево, то есть станет невидимой.
#slidebox - id блока, к которому будет применяться анимация. .close - класс кнопки, что закрывает блок, чтобы он исчез.

Теперь добавим HTML разметку. Я добавлю готовую разметку для навигации между записями WordPress. Если у Вас сайт не на этой системе управления или у Вас другие планы на это блок, то удалите все лишнее оставив лишь родительский блок - slidebox, и кнопку закрытия - close.

<div id="slidebox">
<a class="close">X</a>
<h4>Навигация</h4>
<p> Предыдущая статья: <?php previous_post_link('&larr; %link') ?></p>
<p>Следующая статья: <?php next_post_link('%link &rarr;') ?></p>
</div>

Теперь добавим стилей. Тут как и с HTML, если не нужна навигация, то оставляем только первые две строки стилей, остальные Вам не нужны

#slidebox{width:180px;height:220px;padding:10px;background:#f9f9f9;position:fixed;bottom:0px;right:-200px;line-height:18px;z-index:1000;box-shadow:-3px 3px 15px #ddd; -moz-box-shadow:-3px 3px 15px #ddd; -webkit-box-shadow:-3px 3px 15px #ddd; -o-box-shadow:-3px 3px 15px #ddd;}
a.close{position:absolute;cursor:pointer;top:5px;right:5px;text-decoration:none;border:none}
#slidebox p{margin:0 0 10px 10px;padding:0px;font-size:13px;color:#666}
#slidebox p a{text-decoration:underline}
#slidebox p a:hover{color:#333;text-decoration:underline}
#slidebox h4{color:#333;font-size:16px;margin:10px 20px 10px 10px}

Если все сделано правильно, можете посмотреть на готовый результат. Как и писал выше, такой всплывающий блок с анимацией, можно использовать для чего угодно, меняя его размеры и внешний вид.

На этом все, спасибо за внимание. 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(6 голосов, в среднем: 5 из 5)

Опубликовано 4 комментария

  • Adil
    Комментариев: 1

    В опере и мозилле не работает!

  • MakeKags
    Комментариев: 1

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

  • Владислав
    Комментариев: 1

    А то что он сразу появляется и резко исчезает как только начать прокручивать, это ничего.? Вон, в примере же даже этот глюк виден.

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

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

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий