webguild - українська IT-спільнота 🇺🇦

The earth... is a lamp! — лампа у вигляді земної кулі, реалізована на ThreeJS 😎 Технології: HTML, CSS, JS 👇Код доступний за кнопкою 👇 webguild 🇺🇦 › #projects

Ефект у стилі бруталізм у Figma ❤️ @poFigme webguild 🇺🇦 › #uiux #figma

Анімована карусель зображень (GSAP Draggable & Inertia Snap) 😎 Технології: HTML, CSS, JS 👇Код доступний за кнопкою 👇 webguild 🇺🇦 › #projects

Не баг, а фіча 🚽 webguild 🇺🇦 › #memes

😐 API Screen Wake Lock офіційно доступний у всіх основних браузерах — Chrome, Safari та Firefox. API 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

Toggled Radial Buttons — анімоване кругове меню з соціальними мережами 😎 Технології: HTML, CSS, JS 👇Код доступний за кнопкою 👇 webguild 🇺🇦 › #projects

Невелика підбірка анімацій для кнопок 😍 Технології: HTML, CSS, JS 👇Код доступний за кнопкою 👇 webguild 🇺🇦 › #projects

Login/signup form animation — анімована форма реєстрації/входу 🥰 Технології: HTML, CSS, JS 👇Код доступний за кнопкою 👇 webguild 🇺🇦 › #projects

😵 5G Інтернет вперше в Україні: Vodafone запустив його в тестовому режимі, - Федоров "Офіс Vodafone у Києві, а також офіс Nokia в Гельсінкі зідзвонились за допомогою 5G і перевірили якість звʼязку. Все працює 🤘" Зараз 5G працює в понад 90 країнах світу. Європейський Союз планує покрити 5G територію всіх міст та основних шляхів до 2025 року. webguild 🇺🇦 › #news

Particles Cursor — анімація для курсора 🫢 Технології: HTML, CSS, JS 👇Код доступний за кнопкою 👇 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

Synthwave Motion — та сама моушн-анімація на чистому CSS 😎 Технології: HTML, CSS 👇Код доступний за кнопкою 👇 webguild 🇺🇦 › #projects

Підпис придумайте самі 🤡 webguild 🇺🇦 › #memes

👩‍💻 👩‍💻 🤗

Card animations NO JS — анімація для карток, реалізовано на чистому CSS Технології: HTML, CSS 👇Код доступний за кнопкою 👇 webguild 🇺🇦 › #projects

Макет для практики — сайт агенції нерухомості 😮 Складність: висока Посилання webguild 🇺🇦 › #uiux #figma

Гра Stick Hero with Canvas Технології: HTML, CSS, JS 👇Код доступний за кнопкою 👇 webguild 🇺🇦 › #projects

Мій перший калькулятор на Python. Як вам? 😐 webguild 🇺🇦 › #memes

ScrollTrigger Image Zoom — анімація при скролі, реалізовано за допомогою GSAP Технології: HTML, CSS, JS 👇Код доступний за кнопкою 👇 webguild 🇺🇦 › #projects

CSS Only 3D Image Carousel — карусель зображень, на чистому CSS Технології: HTML, CSS 👇Код доступний за кнопкою 👇 webguild 🇺🇦 › #projects