snater 22 мар 2012 в 16:58

Flipboard-анимация средствами CSS3 и JavaScript

7 мин

Веб-разработка *

Из песочницы

+29

Комментарии 29

Silaev 22 мар 2012 в 17:09

Очень хорошо. Только нужно сделать запрет на нажатие кнопки «flip» пока картинка не перевернулась.

snater 22 мар 2012 в 19:26

Да, этому моменту не уделил внимания, т.к. в продакшене запускаю анимацию по таймеру.

Nico_izo 22 мар 2012 в 17:21

Пожалуйста, прекратите использовать только свойства с префиксом -webkit- (не указывая их аналоги для других браузеров). Есть ещё -moz-, -ms- и -o- (Правда в ней ещё нет анимаций и 3D transforms, но это не значит, что этого не будет в будущем). Зато есть в Firefox 5+ и IE10+.
И в примерах тут же уместно использовать свойства без префиксов.
Что же до transform3d, то он поддерживается в Firefox 10+ и IE10+.

snater 22 мар 2012 в 19:22

Во втором абзаце я написал, что сознательно ограничил данный пример только префиксом -webkit-. Не смотря на заявленную поддержку transform3d в Firefox 11, 12beta и Aurora это свойство в связке с анимацией работает весьма некорректно. IE10 упустил из виду, испытаю.
Согласен, что получился пример в вакууме, за это прошу прощения. Вероятно стоило описать проверку поддержки transform3d браузером.

Nico_izo 22 мар 2012 в 19:29

Тем не менее, примеры стоило давать с возможностью проверить под всеми возможными браузерами. А в тексте приводить код без префиксов: Он проще для понимания и статья не потеряет актуальности со временем, ибо префиксы (рано или поздно) уйдут в прошлое.

НЛО прилетело и опубликовало эту надпись здесь

snater 23 мар 2012 в 17:25

Добавил в пример префиксы -moz-, -ms- и -o-. Пост обновил.

SlavikF 22 мар 2012 в 17:29

Смотрю ДЕМО:
FireFox 11.0: Видно только верхнюю часть картинки

НЛО прилетело и опубликовало эту надпись здесь

ilzheev 22 мар 2012 в 20:14

Safari 5.1.4 Mac OS X — аналогично.

dadon 22 мар 2012 в 17:29

Крутецкий эффект! Небольшой баг — при нажатии на Flip сначала картинка мигает, а потом проигрывается анимация, последний chrome mac os.

snater 22 мар 2012 в 19:39

Несколько раз ловил это мигание, однозначно пропадает, когда картинки кешируются. Постараюсь исправить.

CyberAP 22 мар 2012 в 20:43

Проверил с кэшированными — всё равно есть баг. Хром последний на win7.

metya 22 мар 2012 в 17:35

В опере не работает. Видно только верхнюю часть. Опера последняя.

termi 23 мар 2012 в 06:27

www.opera.com/docs/specs/presto2.10/#m210-278
Поддержка анимации только планируется. Возможно сегодня вечером.

shimapa23 22 мар 2012 в 17:37

Симпатичный эффект, но на мой взгляд этот еще симпатичнее.

snater 22 мар 2012 в 19:30

Спасибо, выглядит действительно круто, поизучаю.

Coffin 22 мар 2012 в 17:46

у меня вобще плохо работает
Верхняя половина от одной картинки, а нижняя от другой.
Mac os, safari 5.1.4

MAXH0 22 мар 2012 в 19:05

Глючит в Ubuntu (FF и Chrome)

Alexufo 22 мар 2012 в 19:38

вторичный отскок нужно уменьшить и будет кул.

slik 22 мар 2012 в 20:02

Просто так :)

Coffin 22 мар 2012 в 20:08

Жалко нет фреймрейта, что бы узнать насколько сильно лагает на мобильнике :)
На глаз раза в 3 ниже фреймрейт.

evgsd 23 мар 2012 в 03:07

на HTC Sensation с ICS визуально все очень плавно, но отображает только верхнюю часть картинки

vaxXxa 22 мар 2012 в 21:22

developer.mozilla.org/en-US/demos/detail/3d-image-transitions/launch and click «Turn»

snater 22 мар 2012 в 21:39

Спасибо, действительно работает, и в Firefox в том числе, но анимация попроще desandro.github.com/3dtransforms/examples/card-01.html отображается с существенными багами, в chrome же все в порядке.