Efekt wizualny w JavaScript „bąbelki” jako ciekawy dodatek do strony

Ożywienie strony internetowej za pomocą atrakcyjnej oprawy, jak np. efekt wizualny w JavaScript, to nie jest zazwyczaj dobry pomysł. Są jednak projekty, gdzie atrakcyjne tło może pomóc w zainteresowaniu odbiorcy lub może po prostu chcesz zaszaleć.

Są osoby, które uważają, że strona internetowa bez elementów animowanych lub video, to coś niemodnego lub wręcz archaicznego. Zaprezentujemy więc ciekawą bibliotekę JavaScript, która będąc niewielkich rozmiarów, wciąż daje na tyle efektowne rezultaty, że może pomóc w ożywieniu strony bez większego obciążania serwera.

Biblioteka ta, to bubbly-bg autorstwa norweskiego programisty Davida, prowadzącego repozytorium github pod adresem https://github.com/tipsy. Jak sama nazwa wskazuje, dzięki tej niewielkiej partii kodu (1,2 kB), osiągniemy efekt poruszających się bąbelków.

Użycie biblioteki

Użycie biblioteki jest bardzo proste. Zakładając, że przykład ma zawierać tylko samo tło z bąbelkami, wystarczy użyć kodu:

<body>
...
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bubbly-bg.js"></script>
<script>bubbly()></script>
</body>

Oczywiście możesz również po prostu skopiować kod na swój serwer (adres skryptów poniżej), zamiast korzystać z CDN, jednak wówczas będziesz konieczne samodzielne zadbanie o jego aktualizację. Uruchomienie efektu następuje po wywołaniu jednej funkcji bubbly(); i to wszystko. Funkcja ta tworzy element canvas, który obejmuje cały obszar widzialny.

Dodatkowe parametry sterujące efektem

Jednakże, jeśli skorzystasz z domyślnej funkcji, jedyne co uzyskasz to bąbelki na niebieskim tle. Na ratunek przychodzą parametry, które możesz wykorzystać do zmiany domyślnego wyglądu, czy wręcz samodzielnej kreacji ciekawego efektu. Autor podaje kilka przykładów na stronie demo.

Czarno/czerwony z czerwonymi bąbelkami

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

Fioletowy z wielokolorowymi bąbelkami

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

Żółto/różowy i czerwonymi/pomarańczowymi i żółtymi bąbelkami

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

Parametry funkcji do sterowania efektami bąbelków

Jak widać uzyskanie odpowiednich efektów ogranicza się do podania parametru dla funkcji bubble() w postaci odpowiednio przygotowanej konfiguracji w formacje JSON. Opcje konfiguracyjne można podawać wybiórczo, a pełna ich lista wygląda tak:

bubbly({
animate: false, // default is true
blur: 1, // default is 4
bubbleFunc: () => `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.25})`, // default is () => `hsla(0, 0%, 100%, ${r() * 0.1})`)
bubbles: 100, // default is Math.floor((canvas.width + canvas.height) * 0.02);
canvas: document.querySelector("#background"), // default is created and attached
colorStart: "#4c004c", // default is blue-ish
colorStop: "#1a001a",// default is blue-ish
compose: "lighter", // default is "lighter"
shadowColor: "#0ff", // default is #fff
});

efekt wizualny w JavaScript - Licencja i instalacja

Biblioteka rozpowszechniana jest na licencji "Apache License 2.0", a zatem dość liberalnej. Można dzięki temu użyć jej również w komercyjnych projektach. Instalacja jest, jak już wspomniano prosta i wystarczy dołączyć skrypt do swojej strony. Można to zrobić poprzez cdn, instalację pakietu NPM lub po prostu pobranie skryptu i umieszczenie na swojej stronie.

cdn: https://cdn.jsdelivr.net/npm/[email protected]/dist/bubbly-bg.js node: npm install bubbly-bg download: https://raw.githubusercontent.com/tipsy/bubbly-bg/master/dist/bubbly-bg.js

Linki: 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