Эффект мерцающих звезд при наведении мыши

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

Эффект реализован в плагине jQuery-canvas-sparkles.

Внедрение эффекта на сайт в PIXLI


Сначала создадим новый сайт на основании шаблона. Для наших целей подойдет шаблон TEHNOM. Эффект будем привязывать к блокам в центре. Это ссылки на статьи.

Дадим нашему сайту имя

Эффект требует версии JQuery 1.9 и выше. В редакторе уже подключена JQuery 1.11.3.

Чтобы проверить это, выполните следующие действия:
  • Зайдите в режим редактирования сайта.
  • Нажмите правую кнопку мыши.
  • Выберите пункт «Просмотр кода фрейма».
В новой вкладке появится код вашего сайта. Убедитесь, что JQuery подключен. Если вы не нашли эту строчку, подключите библиотеку в заголовке сайта. Для этого перейдите в режим настроек.

И укажите на вкладке «Добавить код в корень» код:

Следующим шагом мы должны внедрить код функции, запускающей плагин. В начало сайта следует внедрить код плагина, а для каждого из блоков функцию запуска. Можно все делать в одном блоке html-кода, но так будет сложно ориентироваться в нем в дальнейшем.
В настройках на вкладке «Добавить код в корень» вставьте код скачанного плагина.

Напоминаем, что первая строка необходима, если только эффект не работает, а в коде сайта отсутствует ссылка на JQuery.
Далее откроем сайт в режиме редактирования и выделим блок статьи. Добавим в него html-код и в окно вставим функцию.
<script>
$(document).ready(function() {
            $("#id970faf21-e60b-6fd0-d8e1-a9140266e3ab").sparkle({ 
             "minSize": 2 , 
                "maxSize": 10 ,
                "overlap": 20 ,
                "direction": "up" ,
                "speed": 0.4
            });
        });
</script>
#id970faf21-e60b-6fd0-d8e1-a9140266e3ab – это ID блока. Чтобы его узнать, необходимо щелкнуть по нему правой кнопкой мыши и выбрать «Копировать селектор в буфер».

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

Настройки плагина


Плагин имеет несколько параметров:

Цвет.


Можно указать один цвет для звезд, несколько или ключевое слово «rainbow».
$(".element").sparkle({
  "color": "#FFFFFF"
});

$(".element2").sparkle({
  "color": ["#FFFFFF","#FF0000","#00FFFF"]
});

$(".element3").sparkle({
  "color": "rainbow"
});

Количество.


Вы можете регулировать количество звезд, которые появляются одновременно. После нескольких сотен начинает тормозить.
$(".element").sparkle({
  count: 200
});

Выход за пределы холста.


Если указать значение 0, звезды будут появляться в пределах блока. Чем больше число вы указываете, тем шире будет охват вокруг блока. Смещение происходит влево и вверх.
$(".element").sparkle({
  overlap: 20
});

Скорость.


Указывается числом с плавающей точкой и определяет скорость движения звезд.
$(".element").sparkle({
  speed: 1.2
});

Размер.


Указывая максимальное и минимальное значение, вы получаете звезды в этих пределах. Их можно сделать совсем маленькими, а можно увеличить.
$(".element").sparkle({
  minSize: 2,
  maxSize: 6
});

Направление.


Звезды могут двигаться вверх («up»), вниз («down») или в обоих направлениях («both»).
$(".element").sparkle({
  direction: "both"
});

$(".element2").sparkle({
  direction: "up"
});

$(".element3").sparkle({
  direction: "down"
});

Попробуйте поменять параметры и вы подберете идеальные звезды для вашего сайта.
03 2017, 17:58    Ivan Web-дизайн 1    8 +1

comments (0)

    ticket_comment_err_no_auth