Генератор форм

Для веб-мастера

Реклама


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

Рейтинг:
Дата: 15 сентября 2011 Просмотры 20394 Комментарии 66
Socializer - Плагин скользящей панели с иконками социальных сетей

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

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

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

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

Тем самым, когда пользователь ознакомился с материалом на сайте и ему он понравился, ему плавно показывается панель со ссылками на аккаунты социальных сетей. При наведении мыши на ссылку она становится не прозрачной и смещается в сторону на 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>

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

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

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

.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 блока и впереди ставим знак решетки.

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

В общем жду от Вас комментариев с замечаниями и пожеланиями!

Оцените эту статью:



Похожие статьи
Интересно почитать

    Получать новые материалы этого сайта на свой email адрес?

    Отправлять мне комментарии по эл. почте?

Реклама

Топ комментаторы

  • Иван (1)

Нашли ошибку в тексте

Система Orphus
https://biznesguide.ru/coding/145.html
4,31 из 5 на основе 32 оценок.
Твиттер Facebook Google plus RSS