Макет для практики — сайт агенції нерухомості 😮

Складність: висока

Посилання

webguild 🇺🇦 › #uiux #figma

Card animations NO JS — анімація для карток, реалізовано на чистому CSS 🤗

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

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

webguild 🇺🇦 › #projects

Підпис придумайте самі 🤡

webguild 🇺🇦 › #memes

Synthwave Motion — та сама моушн-анімація на чистому CSS ❤️

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

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

webguild 🇺🇦 › #projects

Обмін даними за допомогою Web Share API 🤸

API Web Share надає можливість поділитися текстом, посиланнями та файлами з іншими програмами, що встановлені на пристрої користувача. Це робить процес обміну контентом більш зручним і ефективним.

Приклад коду, що демонструє роботу API:

const button = document.querySelector('button');

if (navigator.share && button) {
  button.addEventListener('click', () => {
    navigator.share({
      title: 'Web Share API',
      text: 'Check this out!',
      url: 'https://example.com'
    })
    .catch(error => console.error('Error sharing content:', error));
  });
} else {
  console.log('Web Share API is not supported or button element is not found.');
}

Детальніше

webguild 🇺🇦 › #learnJS

Particles Cursor — анімація для курсора 🫢

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

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

webguild 🇺🇦 › #projects

😵 5G Інтернет вперше в Україні: Vodafone запустив його в тестовому режимі, - Федоров
"Офіс Vodafone у Києві, а також офіс Nokia в Гельсінкі зідзвонились за допомогою 5G і перевірили якість звʼязку. Все працює 🤘"

Зараз 5G працює в понад 90 країнах світу. Європейський Союз планує покрити 5G територію всіх міст та основних шляхів до 2025 року.

webguild 🇺🇦 › #news

Login/signup form animation — анімована форма реєстрації/входу 🥰

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

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

webguild 🇺🇦 › #projects

Невелика підбірка анімацій для кнопок 😍

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

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

webguild 🇺🇦 › #projects

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