Toggled Radial Buttons — анімоване кругове меню з соціальними мережами 😎

Технології: 👩‍💻 👩‍💻 👩‍💻

👇Код доступний за кнопкою 👇

webguild 🇺🇦 › #projects

😐 API Screen Wake Lock офіційно доступний у всіх основних браузерах — Chrome, Safari та Firefox.
Screen Wake Lock дозволяє веб-додаткам запобігати вимкненню (затемнення/блокування) екрану пристрою. Це корисно для сайтів, де потрібно постійно бачити екран, наприклад, під час використання навігаційних систем.


Браузерна підтримка (тиць): 👩‍💻 - 84, 👩‍💻 - 126, 👩‍💻 - 16.4, 👩‍💻 - 90


Використання API дуже просте. Ось приклад коду:

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a screen wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request();
    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock released:', wakeLock.released);
    });
    console.log('Screen Wake Lock released:', wakeLock.released);
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Request a screen wake lock…
await requestWakeLock();
// …and release it again after 5s.
window.setTimeout(() => {
  wakeLock.release();
  wakeLock = null;
}, 5000);

Детальніше: W3 | MDN | Chrome for Developers



webguild 🇺🇦 › #learnJS

Не баг, а фіча 🚽

webguild 🇺🇦 › #memes

Анімована карусель зображень (GSAP Draggable & Inertia Snap) 😎

Технології: 👩‍💻 👩‍💻 👩‍💻

👇Код доступний за кнопкою 👇

webguild 🇺🇦 › #projects

The earth... is a lamp! — лампа у вигляді земної кулі, реалізована на ThreeJS 🌎

Технології: 👩‍💻 👩‍💻 👩‍💻

👇Код доступний за кнопкою 👇

webguild 🇺🇦 › #projects

😁

webguild 🇺🇦 › #memes

Neuro Noise (GLSL Shader) — інтерактивний фон 😍

Технології: 👩‍💻 👩‍💻 👩‍💻

👇Код доступний за кнопкою 👇

webguild 🇺🇦 › #projects

Interactive Image Gallery — галерея зображень, створена за допомогою GSAP 👾

Технології: 👩‍💻 👩‍💻 👩‍💻

👇Код доступний за кнопкою 👇

webguild 🇺🇦 › #projects

Кнопки соціальних мереж на чистому CSS

Технології: 👩‍💻 👩‍💻

👇Код доступний за кнопкою 👇

webguild 🇺🇦 › #projects