Лого SiteHere.ru

Сообщение в конце страницы с помощью jQuery

Сообщение в конце страницы с помощью jQuery

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

Примеры работы плагина можно увидеть здесь:

Посмотреть примерСкачать



Как пользоваться?

Для начала вам необходимо скачать и подключить библиотеку jQuery(она находится здесь) и jquery.endpage-box.js(ее можно скачать здесь):

1
2
3
4
5
6
7
8
$(window).load( function() {
  $("#endpage-box").endpage_box({
    animation: "fade",
    from: "50%",
    to: "110%",
    content: "Добавьте свое сообщение сюда."
  });
});

Рассмотрим эти свойства и какие значения они могут принимать:

  • animation — данное свойство отвечает за анимацию сообщения, т.е. с какой стороны и как оно будет появляться. Значения могут быть следующие: “fade”, “slide”, “flyInUp”, “flyInDown”, “flyInLeft”, “flyInRight”.
  • from — задает в место с которого будет показываться сообщение. Значение можно задавать как в процентах так и в пикселях.
  • to — до какого места страницы показывать сообщение. Также можно задавать в пикселях и процентах.
  • content — с помощью данного свойства вы можете добавить произвольное содержимое сообщения.


Вывод

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


Успехов!

Источник: www.onextrapixel.com

4 комментария к записи
  • Константин

    Юрий, спасибо за статью! Мне понравилась данная тема. Попробую сделать то же самое.

     
    • Юрий

      Константин, если будут какие-то вопросы — пишите. 😉

       
  • ZeroXor

    Параметры from и to очень удобная штука. Надо будет расковырять плагин, посмотреть, как это реализовано. А то приходится вручную высчитывать дальность прокрутки еще и в пикселях… хотя догадываюсь вообще-то как эту реализацию сделали.

     
  • Вячеслав

    Беру….как раз думал каким образом вывести сообщение внизу сайта.Спасибо.

     

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

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