Плагин скользящей панели с иконками социальных сетей

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

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

Я уже встречал подобные панели на других сайтах, но поискав готовые плагины ничего подходящего для себя не нашел. Ну признаться честно не особо то и хотел найти. Поэтому решил создать свой первый плагин на jQuery.

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

Тем самым, когда пользователь ознакомился с материалом на сайте и ему он понравился, ему плавно показывается панель со ссылками на аккаунты социальных сетей. При наведении мыши на ссылку она становится не прозрачной и смещается в сторону на 10px.



В результате появился на свет плагин jquery.socializer.js, который имеет гибкие настройки и подойдет для любого сайта.

Для того чтобы создать у себя на сайте подобную панель с закладками в социальные сети, необходимо подключить библиотеку jQuery и собственно сам плагин.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.socializer.js"></script>


Далее необходимо создать сам плавающий блок со ссылками. У меня он выглядит так:


<div class="soc_buttons" id="soc_buttons">

    <a title="Следите за мной на twitter" target="_blank" href="http://twitter.com/ivanshamshur"><img src="/images/icons/twitter_new.png" ></a>

    <a title="Следите за мной на facebook" target="_blank" href="http://www.facebook.com/ivan.shamshur"><img src="/images/icons/facebook_new.png"></a>

    <a title="Следите за мной по RSS" target="_blank" href="http://feeds.feedburner.com/biznesguide"><img src="/images/icons/rss_new.png"></a>  

</div>


Его необходимо разместить непосредственно перед закрывающим тегом .

Кстати говоря, в этом блоке можно разместить все что угодно!

Можно прописать стили:


.soc_buttons {
    position: absolute;
    right: 0;
    top: 152px;
    width: 70px;
}

.soc_buttons a {
    display: block;
    position: relative;
}


Далее идет вызов самого плагина:


<script type="text/javascript">
$(function(){
    $('#soc_buttons').socializer();
})
</script>


Данная строчка вызовет плагин с параметрами по умолчанию. Полный список параметров смотрите ниже:

  • type — sliding — Тип плавающей панели. Sliding — плавающая, fixed — фиксированная. т. е. при прокрутке страницы положение панели либо закрепляется на определенной высоте, либо постоянно сползает вниз.
  • position — right — Расположение плавающей панели. right — справа, left — слева.
  • opacity — 0.1 — Начальная прозрачность панели при загрузке страницы. Доступны значения от 0 и до 1
  • container — document — Блок, относительно которого будет изменяться прозрачность плавающей панели. т. е. при прокрутке страницы до нижней границы этого блока прозрачность будет равна 1.
  • inittop — 150 — Начальное расстояние от верхнего края экрана в пикселях
  • scrolltop — 20 — Расстояние от верхнего края экрана при прокрутке страницы
  • speed — 300 — Длительность анимации в мс
  • hoverdistance — 15 — Расстояние в пикселях, на которое смещаются иконки соц.сетей при наведении курсора
  • scrollend — false — Пользовательская функция, которая будет вызвана при достижении нижней границы контейнера (container). В качесте параметра передается объект п
  • fx — linear — Функция управления эффектом анимации


Для придания больших эффектов необходимо испльзовать плагин — jquery.easing.js

Несколько примеров использования:


$(function(){
    $('#soc_buttons').socializer({
        position: 'left',
        type: 'fixed',
        scrolltop: 50,
        opacity: 1        
    });
});


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

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


$(function(){
    $('#soc_buttons').socializer({
        container: '#id_blocka'    
    });
});


т. е. указываем ID блока и впереди ставим знак решетки.

Плагин очень простой, при желании Вы можете переделать его под свои нужды.

Скачать исходники можно по этой ссылке

Посмотреть демо страницу можно здесь

Это мой первый плагин, так что не судите строго. Буду признателен, если поможете сделать этот плагин лучше!
Поделиться публикацией
Ой, у вас баннер убежал!

Ну. И что?
Реклама
Комментарии 14
    0
    Хоть бы ссылку на демо оставили.
      0
      в начале же есть biznesguide.ru/demo/socializer/
        +2
        Извиняюсь, просто привык уже, что ссылки на исходники и демо в конце поста.
          0
          Перенес ссылку на демо в конец статьи
        0
          –2
          Я буду обновлять комменты перед постингом, я буду обновлять комменты перед постингом…
        +4
        Не нравится, что панель постоянно мельтешит сбоку при каждом прокручивании страницы. Имхо, лучше делать ее фиксированной и прилепленной к краю окна.
          0
          Там можно настроить. Нужно передать в качестве параметра type значение 'fixed', Тогда панель не будет скользить, а будет фиксированной. Положение тоже можно настроить
            0
            кстати, во втором примере это есть biznesguide.ru/demo/socializer/index2.html. Там только начальная прозрачность задана — 0. Поэтому сразу не видно панель.
          +1
          На тот случай, если кто-нибудь напишет jQuery.easing.def = 'easeInOutQuad' (или что-нибудь другое подобное напишет) после подключения плагина jQuery Easing, я всё же рекомендовал бы в случае не указанного параметра fx использовать не жёстко установленное значение 'linear', а всякий раз брать и использовать текущее значение jQuery.easing.def.
            0
            Иными словами, что-то вроде этого кода:

            fx = options.fx || jQuery.easing.def || 'linear';
            
              0
              Спасибо. Поправлю
            +2
            Чаще всего на сайтах устанавливают этот скрипт share42.com
            Там есть все, кроме смещения на 10 пикселей при наведении мышки
              0
              Да, я видел этот скрипт. Но он мне не подошел, так как я хотел сделать ссылки на аккаунты в соц.сетях, а не постинг в них. К тому же хотелось написать свой первый плагин на jQuery, который бы имел много настроек.

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

            Самое читаемое