Анимация с помощью CSS

[Nnear]

Возможности CSS намного больше, чем кажутся.
Роман Кортес, используя только CSS1 и CSS2 (!) сделал анимацию, которая, на первый взгляд, создана с помощью более сложных методов.
Она состоит в том, что при передвижении скролла банка колы перекатывается, будто это видеоролик.

Посмотреть эффект можно тут: Pure CSS Coke Can.

Как это сделано...

На самом деле тут всего 2 картинки.
Png с прозрачной областью в виде контура банки (плюс полупрозрачные тени и блики):

и развертка этикетки банки:

HTML-код выглядит так (всего 6 строк):

<div id="coke">
   <div id="y">
      <p id="x1"></p><p id="x2">...<p id="x55"></p>
      <img src="coke-can.png">
   </div>
</div>

Этикетка лежит под картинкой банки и зафиксирована с помощью параметра background-attachment: fixed. Поэтому при передвижении скролла банка уходит влево, а этикетка остается на месте. За счет теней и бликов создается объем.
Но Кортес придумал, как сделать так, чтобы этикетка у краев банки искажалась, будто действительно «уходит в объем» (рисунок заметно становится уже у краев банки).
Достаточно было разделить картинку на мелкие по 1px в ширину, и для каждой дать смещение относительно бекграунда.

Более подробно расписано в Блоге о вкусном и здоровом вебе в теме Анимация с помощью CSS.

© Roman Cortes.

P.S. Предусмотрительный человек. Вставил банку в фрейм, чтобы репостеры могли вставлять этот фрейм в свои блоги для примера.

Правда, на дайрях тег iframe неразрешен.

@темы: web

Comments

[FriedlicherFuchs]

Интересный эффект, можно попробовать что-нибудь в этом роде сделать... (хотя а) уже не оригинально, б) пока не вижу, где бы это могло пригодиться лично мне), но в качестве тренировки можно =)
Сделать так же Пепси, чтоб ей не было обидно

[Nnear]

FriedlicherFuchs, да, просто этот эффект можно взять на вооружение, чтобы делать интересные дизайны и фишки для сайта.
Например, если написать небольшой код на js, можно отдать управление передвижением курсору: курсор слева от центра — картинка движется влево, курсор справа — картинка движется вправо. Но это уже DOM пошел ))) Так-то все уже придумано. Были бы идеи, а воплотить их можно разными способами... )