WEBIK

#Мем

WEBIK | @gki_webik_ru

#Тест

WEBIK | @gki_webik_ru

#РецептКода

Profile Card Hover Effect

Наведение на карточку с возможностью перехода на соцсети. Реализовано с помощью CSS.

WEBIK | @gki_webik_ru

#Мем

WEBIK | @gki_webik_ru

#Мем

WEBIK | @gki_webik_ru

#РецептКода

hover effect

Кубическая заливка кнопки при наведении на неё курсора мыши. Реализовано с помощью CSS.

WEBIK | @gki_webik_ru

View Transitions API 🤩

Новинка, которая позволяет легко анимировать переходы между состояниями страницы.

Теперь не нужно вручную прописывать сложные CSS- или JS-анимации — браузер сам создаёт плавный переход между старым и новым состоянием. Это экономит время и делает интерфейсы заметно приятнее.

Простейший пример:

document.startViewTransition(() => updateTheDOMSomehow());

Вызывается метод document.startViewTransition(), внутрь которого передаётся функция с изменениями в DOM. Всё остальное — на стороне браузера.

Как это работает?
Браузер "сохраняет" текущее состояние, выполняет изменения, сравнивает старую и новую версию и сам анимирует переход.

Особый интерес вызывает возможность подключить CSS-анимации через псевдоэлементы ::view-transition-old и ::view-transition-new. Это даёт больше гибкости: можно, например, задать эффект затухания для "старого" состояния и масштабирования для "нового".

💡 Небольшое демо с CSS-анимацией перехода: CodePen
📚 Документация на MDN и классная статья в блоге Chrome

WEBIK | @gki_webik_ru

В видео вспоминаем прошлое проекта WEBIK, говорим о настоящем, и показываем его будущее. Вот как всё начиналось, и вот, как все продолжится...

WEBIK | @gki_webik_ru

36 абстрактных 3D элементов, которые сгенерировала нейросеть. Доступны вам бесплатно в высоком качестве.

WEBIK | @gki_webik_ru

#Мем

WEBIK | @gki_webik_ru