Визуальный эффект в JavaScript «пузыри» как интересное дополнение к сайту

1. Использование библиотеки
2. Дополнительные параметры, контролирующие эффект
3. Параметры функции управления пузырьковыми эффектами
4. визуальный эффект в JavaScript - Лицензия и установка

Визуальный эффект в JavaScript «пузыри» как интересное дополнение к сайту

4,8 (95%) 4

Оживление сайта с привлекательной привязкой, такой как визуальный эффект в JavaScript, обычно не является хорошей идеей. Однако есть проекты, в которых привлекательный фон может помочь интересам получателя или, возможно, вы просто хотите разориться.

Есть люди, которые думают, что сайт без анимированных элементов или видео - это что-то немодное или даже архаичное. Мы представим интересную библиотеку JavaScript, которая, будучи небольшого размера, по-прежнему дает достаточно эффективные результаты, что может помочь оживить веб-сайт без чрезмерной нагрузки на сервер.

Эта библиотека является bubbly-bg норвежским программистом Дэвидом, который управляет репозиторием github в https://github.com/tipsy , Как следует из названия, благодаря этой небольшой части кода (1,2 кБ) мы добьемся эффекта перемещения пузырьков.

Использование библиотеки

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

& Lt; & тела GT; ... & lt; script src = "https://cdn.jsdelivr.net/npm/ [электронная почта защищена] /dist/bubbly-bg.js"></script> & lt; script & gt; bubbly (); & lt; / script & gt; & lt; / body & gt;

Конечно, вы также можете просто скопировать код на свой сервер (адрес скрипта ниже), вместо того чтобы использовать CDN, но тогда вам нужно будет самостоятельно обновить его. Эффект активируется после вызова одной функции bubbly (); и это все. Эта функция создает элемент canvas, который покрывает всю видимую область.

Дополнительные параметры, контролирующие эффект

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

Черный / красный с красными пузырьками

bubbly ({colorStart: "# 111", colorStop: "# 422", bubbleFunc: () = & ht; `hsla (0, 100%, 50%, $ {Math.random () * 0.25})`});

Фиолетовый с разноцветными пузырьками

bubbly ({colorStart: "# 4c004c", colorStop: "# 1a001a", bubbleFunc: () = & gt; `hsla ($ {Math.random () * 360}, 100%, 50%, $ {Math.random ( ) * 0.25}) `});

Желтые / розовые и красные / оранжевые и желтые пузырьки

bubbly ({colorStart: "# fff4e6", colorStop: "# ffe9e4", blur: 1, compose: "source-over", bubbleFunc: () = & gt; `hsla ($ {Math.random () * 50}, 100%, 50%, .3) `});

Параметры функции управления пузырьковыми эффектами

Как видите, достижение желаемых эффектов ограничивается указанием параметра для функции bubble () в форме правильно подготовленной конфигурации в формациях JSON. Параметры конфигурации могут быть указаны выборочно, и полный список выглядит следующим образом:

bubbly ({animate: false, // по умолчанию true размытие: 1, // по умолчанию 4 bubbleFunc: () = & gt; `hsla ($ {Math.random () * 360}, 100%, 50%, $ { Math.random () * 0.25}) `, // по умолчанию is () = >> hsla (0, 0%, 100%, $ {r () * 0.1})`) пузырьков: 100, // по умолчанию Math.floor ((canvas.width + canvas.height) * 0,02); canvas: document.querySelector ("# background"), // по умолчанию создается и присоединяется colorStart: "# 4c004c", // по умолчанию используется blue-ish colorStop: "# 1a001a", // по умолчанию используется blue-ish compose: " светлее ", // по умолчанию" светлее "shadowColor:" # 0ff ", // по умолчанию #fff});

визуальный эффект в JavaScript - Лицензия и установка

Библиотека распространяется под лицензией «Apache License 2.0» и поэтому довольно либеральна. Вы можете использовать его также в коммерческих проектах. Установка, как уже упоминалось, проста и просто прикрепите скрипт к вашему сайту. Вы можете сделать это через cdn, установить пакет NPM или просто скачать скрипт и разместить его на своем сайте.

CDN: https://cdn.jsdelivr.net/npm/ [электронная почта защищена] /dist/bubbly-bg.js
узел: npm установить bubbly-bg
скачать: https://raw.githubusercontent.com/tipsy/bubbly-bg/master/dist/bubbly-bg.js

ссылки по теме:
https://github.com/tipsy/bubbly-bg
https://github.com/tipsy/bubbly-bg/blob/master/LICENSE
https://www.noupe.com/design/bubbly-backgrounds-moving-backgrounds-website.html

Похожие

Комментарии