Результаты поиска для: анимации

Номера записей: 48

Анимации: ищем общий язык

Перевод статьи Communicating Animation с сайта alistapart.com для css-live.ru. Автор — Рэйчел Нейборс.

Анимации в едином стиле крайне важны как для рекламы, так и для хорошего впечатления от продукта. Интерфейсы подчиняются законам «физики дизайна»: если анимации всё время выдержаны в одном стиле, то  пользователей охватывает иллюзия естественности, реальности. Анимации, выбивающиеся из ряда, нарушают это ощущение и кажутся неряшливыми, а то и просто раздражают. Но поскольку анимация «сидит» аккурат на пересечении дизайна, разработки и прикладной психологии, на пути к такому единообразию встают особые преграды:

  • Из-за трудностей коммуникации в больших разнородных командах нелегко понимать и решать вопросы анимаций сообща.
  • Из-за недостаточных вводных разработчикам бывает трудно к чему-то продвигаться.
  • Из-за недостатка внимания или уважения к другим членам команды выходят однобокие реализации, где учтены голоса одних ценой других. Когда речь заходит об анимации, важно, чтобы каждый был услышан.

(далее…)

Руководство по Web Animations API — часть 3: множественные анимации

Перевод статьи Web Animations API Tutorial Part 3: Multiple Animations с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это третья часть из серии учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

После обсуждения AnimationPlayer и шкалы времени в Web Animations API давайте поговорим о проигрывании сразу нескольких анимаций.

(далее…)

Руководство по Web Animations API — часть 1: создание базовой анимации

Перевод статьи Web Animations API Tutorial Part 1: Creating a Basic Animation с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это первая часть из серии вводных/учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

Мы окинули беглым взглядом Web Animations API, но так и не добрались до какой-либо конкретики… так что давайте приступим к этому прямо сейчас.

(далее…)

Часы (на CSS-анимации и JavaScript)

Перевод статьи Clocks с сайта cssanimation.rocks.

Время пришло. В этой статье мы попробуем решить задачу по созданию и анимированию настенных часов, используя простые CSS-анимации и JavaScript для их запуска.

Перед вами часы, которые мы создадим с помощью HTML, CSS, SVG-фона и небольшого количества JavaScript. Мы будем использовать CSS-анимации или переходы для любых типов движений, а с помощью JavaScript мы будем задавать исходное время и добавим базовые CSS-трансформации.

(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #53

Подборка свежих эффектов, интересных идей и полезных наработок.

Анимация с велосипедом

Эта анимация — интерактивная. Нужно кликнуть по любом ее месту, и дальше вы сможете управлять облаком. Стрелками «влево»-«вправо» на клавиатуре вы двигаете облако, а пробелом вызываете дождик. Велосипедист реагирует на всё это, когда проезжает под облаком.
Технологии: CSS, bodymovin.js, anime,js.
Автор: Мариуш Дабровски (@MarioD)

Анимация с велосипедом Посмотреть живой пример


(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #52

Подборка свежих эффектов, интересных идей и полезных наработок.

Слайдер на react

Технологии: CSS, react.js.
Автор: Николай Таланов (@suez)

Слайдер на react Посмотреть живой пример


(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #48

Подборка свежих эффектов, интересных идей и полезных наработок.

Анимация с мармеладкой

Удерживая курсор, можно перемещать мармеладку. (Для работы анимации требуется высота окна браузера не менее 500px.)
Технологии: canvas, JS: matter, p5
Автор: Мариуш Дабровски (@MarioD)

Анимация с мармеладкой Посмотреть живой пример


(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #47

Подборка свежих эффектов, интересных идей и полезных наработок.

Слайдер с эффектом размытия при смене изображений

Технологии: CSS анимация, трансформации, SVG фильтры, JS
Автор: Дамиан Мути (@damianmuti)

Слайдер с эффектом размытия при смене изображений Посмотреть живой пример


(далее…)

Свойства для выравнивания всего и новинки Display «повзрослели» на релиз

2modules

На прошлой неделе рабочая группа CSS опубликовала обновленные версии двух важных модулей CSS 3 уровня — Box Alignment и CSS Display. Статус у них пока прежний (черновик), но по планам редакторов следующая версия должна стать кандидатом в рекомендации — в общем, «почти готово». А буквально через день обновился еще один черновик — CSS Motion Path 1 уровня.

(далее…)

Первый черновик CSS 5 уровня

css5

Если к модулям CSS 4 уровня мы уже привыкли, то 5 уровень (так и хочется назвать его «CSS5», хоть это и неправильно) — еще новинка. Но один такой модуль уже есть! Пока только в виде редакторского черновика, но всё же. Им стал модуль медиавыражений 5 уровня.

По сравнению с модулем медиавыражений 4 уровня (тоже еще не утвержден, но текущая опубликованная редакция выглядит достаточно зрелой) новинка позволит проверять из CSS, доступны ли скрипты (причем отдельно для момента загрузки страницы и для произвольного момента, что не по силам обычному <noscript>), узнавать уровень внешней освещенности, если устройство имеет соответсвующий датчик (напр. чтобы сделать интерфейс на экране мобильника максимально контрастным на ярком солнце и «приглушить» его в темноте), а также узнавать, надо ли показывать все анимации или лучше по возможности их убрать (напр. для читалок на электронных чернилах). Возможно, этот список еще будет расширяться.

Так что с очередным «левел-апом», CSS!

Трюк: раздельные функции CSS-трансформации

Перевод статьи  A Trick: Individual CSS Transform Functions с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона.

Одно лишь свойство transform в CSS дает нам массу возможностей — можно вращать, сдвигать, масштабировать и не только, и всё это сразу. Но в том, что эти разные функции трансформации входят в одно свойство, таится ловушка.

(далее…)

Еще раз про border-image

Хотя свойство border-image уже поддерживают более 96% браузеров (с оговорками, но всё же), популярным пока его не назовешь. Пожалуй, поначалу оно кажется неоправданно сложным: объединяет в себе 5 отдельных свойств, каждое с несколькими значениями, да еще неочевидные правила взаимодействия с обычным border — легко запутаться. Даже многие неплохие руководства (типа статьи Дадли Стори, которую мы переводили в прошлом году) грешат тем, что даже после них ощущение сложности не проходит.

Есть мнение, что его сложность преувеличена, а возможности недооценены. Попробуем исправить это упущение.

(далее…)

Игры на чистом CSS со свойством counter-increment

Перевод статьи Pure CSS Games with Counter-Increment с сайта una.im, опубликовано на css-live.ru с разрешения автора — Юны Кравец.

Обожаю 1) умные хаки и 2) раздвигать границы CSS. Многие недооценивают его мощь (особенно в сочетании с мастерством препроцессинга Sass). В этой статье сочетаются обе эти тяги. Даже если это не понадобится в очередном проекте для клиента, однозначно стоит экспериментировать и раздвигать границы, чтобы как следует понять сам язык. Вы тоже можете делать игры на чистом CSS!

(далее…)

Создание системы SVG-иконок с помощью React

Перевод статьи Creating an SVG Icon System with React с сайта css-tricks.com для css-live.ru. Автор — Сара Дрэснер.

Недавно я прошла обучение ReactJS у Майкла Джексона и Райана Флоренса. И мне очень понравилось, частично потому, что я нашла ответы на множество вопросов про SVG и React. В том, что касается работы с Реактом и SVG, есть много мелочей, которые еще не совсем поддерживаются. Одной из главных загадок для меня был элемент <use>, поскольку большинство систем SVG-иконок строятся именно на нём.

Я спросила Майкла, станет ли в будущем поддержка этих фич лучше, на что он показал мне отличный способ работы с ними, полностью обходя этот метод. Рассмотрим эту технику, чтобы вы смогли начать писать масштарибуемые системы SVG-иконок, и некоторые хитрости, которые также пригодились бы в работе.

(далее…)

На освоение React мне потребовалась всего неделя, а чем вы хуже?

Перевод статьи I Learned How to be Productive in React in a Week and You Can, Too с сайта css-tricks.com для css-live.ru. Автор — Сара Дрэснер.

Эта статья предназнаена не для бывалых React-профи, а скорее для тех, кто зарабатывает разработкой сайтов и кому любопытно, что Реакт может нам подсказать насчет осовременивания пользовательских интерфейсов. React уже давно занимает меня, и поскольку теперь он завоевал определённое положение и хорошие отзывы в сообществе, не жалко потратить время на его изучение. Во фронтенд-разработке постоянно  появляется так много новых технологий, что порой даже трудно понять, стоит ли тратить силы на их изучение. В этой статье я собираюсь рассмотреть самые ценные на мой взгляд, практические соображения, чтобы вы смогли начать работать с React.

(далее…)