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

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

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

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

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

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