Рубрика «animations»

Думаю, все уже знают, что современные браузеры умеют рисовать некоторые части страницы на GPU. Особенно это заметно на анимациях. Например, анимация, сделанная с помощью CSS-свойства transform выглядит гораздо приятнее и плавнее, чем анимация, сделанная через top/left. Однако на вопрос «как правильно делать анимации на GPU?» обычно отвечают что-то вроде «используй transform: translateZ(0) или will-change: transform». Эти свойства уже стали чем-то вроде zoom: 1 для IE6 (если вы понимаете, о чём я ;) для подготовки слоя для анимации на GPU или композиции (compositing), как это предпочитают называть разработчики браузеров.

Однако очень часто анимации, которые красиво и плавно работали на простых демках, вдруг неожиданно начинают тормозить на готовом сайте, вызывают различные визуальные артефакты или, того хуже, приводят к крэшу браузера. Почему так происходит? Как с этим бороться? Давайте попробуем разобраться в этой статье.

Читать полностью »


Shen Chauhan и Andy Wigley рассказывают об обновлении Windows и новом SDK

Пару недель назад мы выпустили новую версию Windows 10 SDK (можно ставить параллельно с предыдущей версией). SDK включает более 200 новых типов и дополнительных методов и свойств для существующих типов.

В этой статье мы расскажем подробнее о некоторых улучшениях в универсальной Windows-платформе (UWP), включенных в SDK:

  • Визуальная композиция, эффекты и анимация
  • SQLite
  • Работа с вводом и пером
  • Более эффективная и гибкая установка AppX
  • UI и обновления XAML
  • Bluetooth и работа по сети
  • Работа с сенсорами
  • Хранилище устройства
  • Windows App Certification Kit (Windows ACK)
  • Набор для дизайна (Photoshop)

Читать полностью »

image

The Rolling Scopes — минское сообщество фронтенд/javascript разработчиков. Мы занимаемся проведением митапов, воркшопов и Q&A сессий. А в этом году доросли до уровня, не побоюсь сказать этого слова, международной конференции. Наше 20-е мероприятие получилось помасштабнее остальных. В связи с этим непременно хочется поделиться деталями проведения, атмосферой и, конечно же, материалами.
Читать полностью »

Анимация в вебе была одна из областей JavaScript, но сейчас, когда мир пересел на мобильные устройства, анимация переместилась на CSS. Это позволило нам использовать декларативный синтаксис при описании анимации, а браузеру производить оптимизацию. В погоне за 60fps (60 кадров в секунду) на ваших мобильных устройствах, вам будет полезно знать все тонкости и нововведения, касающиеся механизмов эффективного отображения анимации в ваших браузерах.
Читать полностью »

Вступление

Читать полностью »

Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.

Дайджест интересных материалов из мира веб разработки и IT за последнюю неделю №72 (24 — 31 августа 2013)
Читать полностью »

Привет, коллеги.

Сегодня я хотел рассказать, как можно создать нестандартный менеджер разметки (layout manager) и вдохнуть в него жизнь при помощи анимаций.
В качестве примера решил реализовать аналог часто встречающейся в социальных сетях выплывающей снизу панели. Обычно этот прием используется при необходимости показать контент, например, фото, и добавить возможность комментировать на дополнительной панельке, которую пользователь может вытянуть снизу. При этом основной контент обычно тоже уплывает наверх, но немного медленнее, чем основная панель. Это называется «параллаксный скроллинг».
Специально для этой статьи я решил с нуля реализовать подобный компонент. Сразу хочу заметить, что это не полноценный, стабильный и готовый для продакшен код, а всего лишь демонстрация, написанная за пару часов, чтобы показать основные приемы.

Читать полностью »

image
Сегодня мы поговорим о том, как Chrome Dev Tools помогают нам бороться с лишней перерисовкой страницы.

Прошлые части:
«Workspace» и «Сниппеты»
«Поддержка Sass»

Читать полностью »

Если Вы используете экспериментальный CSS на своих сайтах, в демках, статьях или инструментах, то это требует определенного рода поддержки. В связи с некоторыми недавними изменениями в мире браузеров, настало время пересмотреть и обновить Ваш код. Эта статья поможет Вам понять, что же начать обновлять уже сейчас.
Всем, всем, всем: время обновлять свой CSS3
Читать полностью »

Доброго времени суток уважаемые читатели Хабра. Существуют замечательные CSS свойства с помощью которых можно задать реверсивное движение анимации — animation-direction: alternate и animation-direction: alternate-reverse (не путать со свойством animation-direction: reverse, которое задает реверсивное направление), но на сегодняшний день их не поддерживает большинство современных браузеров. Я хочу рассказать о том как сделать кроссбраузерную реверсивную анимацию фона.

netcribe

Пример на Jsfiddle


Читать полностью »