snater Mar 22 2012 at 20:58

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

7 min

5.5K

Website development*

From sandbox

+29

Comments 29

Silaev Mar 22 2012 at 21:09

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

snater Mar 22 2012 at 23:26

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

Nico_izo Mar 22 2012 at 21:21

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

snater Mar 22 2012 at 23:22

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

Nico_izo Mar 22 2012 at 23:29

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

-2

UFO just landed and posted this here

snater Mar 23 2012 at 21:25

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

SlavikF Mar 22 2012 at 21:29

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

UFO just landed and posted this here

ilzheev Mar 23 2012 at 00:14

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

dadon Mar 22 2012 at 21:29

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

snater Mar 22 2012 at 23:39

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

CyberAP Mar 23 2012 at 00:43

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

metya Mar 22 2012 at 21:35

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

termi Mar 23 2012 at 10:27

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

shimapa23 Mar 22 2012 at 21:37

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

snater Mar 22 2012 at 23:30

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

Coffin Mar 22 2012 at 21:46

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

MAXH0 Mar 22 2012 at 23:05

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

Alexufo Mar 22 2012 at 23:38

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

slik Mar 23 2012 at 00:02

Просто так :)

Coffin Mar 23 2012 at 00:08

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

evgsd Mar 23 2012 at 07:07

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

vaxXxa Mar 23 2012 at 01:22

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

snater Mar 23 2012 at 01:39

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