Анимационные элементы в веб дизайне

Все началось с Flash анимации. Именно она позволила нам показывать на страницах гораздо большее, чем обычные картинки и текст. Также, Флеш давал разработчикам возможность добавлять различные анимации и другие эффекты на веб-страницы, что позволяло разнообразить пользовательский опыт. Тем не менее, он обладает рядом серьезных недостатков: проблемами с безопасностью, долгим временем загрузки на медленных каналах и т. п. На смену Флешу пришли различные JavaScript-библиотеки: jQuery, Prototype и Mootools, которые могли и могут делать очень много вещей, которые может и Флеш. Плюс ко всему, эти библиотеки работают в среде браузера и более просты для использования обычными разработчиками. Пару лет назад мы получили различные анимационные возможности в CSS3 — что потенциально круто изменило отношение к анимации, так как теперь все обрабатывается напрямую браузером и мы получаем значительный прирост в скорости.

Flash До сих пор используется для:

При разработке рекламных баннеров, поскольку анимация в формате Flash всегда компактнее, чем в формате GIF, а динамика необходима при подаче рекламной информации.

При разработке информационных баннеров, поскольку акцентирование внимания пользователя на интересной информации является правильным подходом.

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

При создании специального эффекта на сайте, но при условии, что сайт будет корректно отображаться у посетителей, не имеющих установленного Flash-плейера.

При создании специальных web-сервисов.

Для чего используется JS и JQuery.

JavaScript — это инструмент, предназначенный для придания динамичности HTML-страницам.

JavaScript позволяет модифицировать HTML-страницы «на лету», сразу после загрузки в браузер и перед демонстрацией посетителю. Например, в HTML-код страницы можно встроить какие-то индивидуальные элементы оформления. При этом, HTML-код может быть изменён программой JavaScript.

Эти возможности JavaScript широко используются разнообразными счётчиками посещений страниц, собирающими дополнительную информацию о параметрах пользовательской системы. (Например, информацию о разрешении экрана.).

Более того, именно JavaScript позволяет создавать на web-страницах столь удобные каскадные меню и кнопки, подсвечиваемые при наведении курсора мыши. Также, JavaScript позволяет порадовать глаз посетителя страниц красивыми информационными «окнами», раскрываемыми поверх основного содержимого страницы (например, такие окна могут содержать форму для ввода логина и пароля).

Чаще всего JavaScript используют для:

Организация всплывающих окон;

проверки данных форм до их отправки на сервер (форма контакты);

небольших интерактивных элементов страницы, типа простеньких расчетов, выполняемых на стороне клиента;

разных «красявостей» типа эффекта падающего снега, шлейфа за указателем мыши и т. п.

JQueryэто JavaScript-фреймворк.

+ кроссбраузерность. Вы знаете сколько разных синтаксисов у JS? Во всех браузерах работа с JS организована по-разному. С jQuery все единообразно. флеш разработчик анимация покадровый.

+ большое количество плагинов, работающих с jQuery.(фотогалереия).

+ быстродейственность и бесплатное распространение.

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

Для чего используется анимация в CSS3.

Появился ряд широких возможностей создавать анимацию с помощью цсс, обычно её используют для создания слайдеров, различных ховеров — изменение состояния по наведению мыши. Так же появилась возможность создавать покадровую анимацию.

Но остается вопрос, не проще ли вернутся в jQuery, какие существуют плюсы от использование цсс3.

+браузер тратить меньше времени и действий для осуществление подобной анимации с использование цсс.

+меньшие затрат памяти.

+ большая адаптивность.

+ процессор CSS3 в браузере написан на C++ и машинный код выполняется несомненно быстрее, чем интерпретация JavaScript.

— не реализуется в IE 9 а так же приходится прописывать дополнительные префиксы к свойствам для реализации анимации в разных браузерах.

ПРИМЕРЫ Теперь зададим высоту, ширину, цвет фона (чтобы видеть, что происходит) и свойство перехода (transition):

body > div.

{.

width:483px;

height:298px;

background:#676 470;

transition:all 0.3s ease;

}.

Свойство transition имеет три параметра: свойство к которому применяется (в нашем случае все), скорость перехода (у нас — 0.3 сек) и применяемый эффект (ease). Все это означает, что все изменения, происходящие с нашим элементом будут выполняться плавно (в течение 0.3 сек).

1. Fade in

Fade эффекты очень популярны, это хороший способ привлечь внимание к чему-либо. Этот эффект реализуется в два этапа: первое, устанавливается начальное значение прозрачности; далее — изменение состояния, например, при наведении курсора:

.fade.

{.

opacity:0.5;

}.

.fade:hover.

{.

opacity:1;

}.

2. Изменение цвета

Изменение цвета раньше было непростой задачей, с применением сложных математических хитростей для вычисления отдельных RGB значений и их комбинаций. Сейчас, достаточно задать соответствующий цвет с помощью CSS и плавная анимация будет сделана за нас:

.color:hover.

{.

background:#53a7ea;

}.

3. Расширение и сужение

Для расширения элемента раньше нужно было изменять ширину (width), высоту (height) или отступы (padding), но сейчас мы можем использовать CSS свойство transform для увеличения.

Примените класс «grow» к вашему элементу и добавьте следующий код к вашим стилям:

.grow:hover.

{.

— webkit-transform: scale (1.3);

— ms-transform: scale (1.3);

transform: scale (1.3);

}.

Уменьшить элемент можно так же просто как и увеличить. Для увеличения используйте значение параметра больше 1, для уменьшения — меньше 1:

4. Вращение

CSS свойство transform имеет множество вариантов применений, один из лучших — вращение элемента. Класс «rotate»:

.rotate:hover.

{.

— webkit-transform: rotateZ (-30deg);

— ms-transform: rotateZ (-30deg);

transform: rotateZ (-30deg);

}.

5. Сглаживание углов

Очень популярный эффект анимации — переход от квадратного элемента к круглому и наоборот. Этот эффект очень легко реализовать с помощью CSS: надо всего-лишь изменить свойство border-radius.Класс «circle»:

.circle:hover.

{.

border-radius:50%;

}.

6. 3D тень

Этот эффект достигается с помощью добавления свойства box-shadow и перемещения элемента вдоль оси x с помощью свойствtransform и translate. Таким образом создается эффект поднятия элемента. Класс «threed»:

.threed:hover.

{.

box-shadow:

1px 1px #53a7ea,.

2px 2px #53a7ea,.

3px 3px #53a7ea;

— webkit-transform: translateX (-3px);

transform: translateX (-3px);

}.

7. Покачивание

Не все эффекты создаются с помощью свойства transition. Мы также можем создавать сложные эффекты анимации с помощью свойств @keyframes, animation и animation-iteration.

Для этого сначала надо создать анимацию в ваших стилях. Обратите внимание, что для совместимости необходимо использовать@-webkit-keyframes одновременно с @keyframes:

@-webkit-keyframes swing.

{.

15%.

{.

— webkit-transform: translateX (5px);

transform: translateX (5px);

}.

30%.

{.

— webkit-transform: translateX (-5px);

transform: translateX (-5px);

}.

50%.

{.

— webkit-transform: translateX (3px);

transform: translateX (3px);

}.

65%.

{.

— webkit-transform: translateX (-3px);

transform: translateX (-3px);

}.

80%.

{.

— webkit-transform: translateX (2px);

transform: translateX (2px);

}.

100%.

{.

— webkit-transform: translateX (0);

transform: translateX (0);

}.

}.

@keyframes swing.

{.

15%.

{.

— webkit-transform: translateX (5px);

transform: translateX (5px);

}.

30%.

{.

— webkit-transform: translateX (-5px);

transform: translateX (-5px);

}.

50%.

{.

— webkit-transform: translateX (3px);

transform: translateX (3px);

}.

65%.

{.

— webkit-transform: translateX (-3px);

transform: translateX (-3px);

}.

80%.

{.

— webkit-transform: translateX (2px);

transform: translateX (2px);

}.

100%.

{.

— webkit-transform: translateX (0);

transform: translateX (0);

}.

}.

.swing:hover.

{.

— webkit-animation: swing 1s ease;

animation: swing 1s ease;

— webkit-animation-iteration-count: 1;

animation-iteration-count: 1;

}.

8. Inset border

Один из популярных видов кнопок — кнопки без фона, но с массивными рамками. Конечно, рамки можно реализовать просто добавив свойство border, но это изменит размеры самого элемента. Это можно исправить с помощью свойства box-sizing, но легче использовать для анимации рамок свойство box-shadow.

Класс «border»:

.border:hover.

{.

box-shadow: inset 0 0 0 25px #53a7ea;

}.

Описание свойств анимации:

Свойствоwebkit-transform применяет трансформацию к элементу (можно применить несколько трансформаций, задавая значения через пробел).

Элемент можно передвигать, масштабировать, поворачивать и наклонять.

none — элемент не трансформируется.

— элемент трансформируется согласно одной из следующих функций:

matrix (,, ,, ,) — определяет матрицу, на которую будет умножена матрица, составленная из исходных координат элемента для получения новых координат.

matrix3d (,, ,, ,, ,, ,, ,, ,, ,) — определяет 3d матрицу, на которую будет умножена матрица, составленная из исходных координат элемента для получения новых координат.

translate () — определяет сдвиг элемента. Можно задать два сдвига, через запятую: первый по оси x, второй по оси y. Если задано только одно значение, сдвиг по оси y будет равен 0.

translate3d (, ,) — определяет сдвиг элемента по оси x, по оси y и по оси z.

translateX () — определяет сдвиг элемента по оси x.

translateY () — определяет сдвиг элемента по оси y.

translateZ () — определяет сдвиг элемента по оси z.

scale () — определяет масштабирование элемента. Можно задать два числа через запятую: первый по оси x, второй по оси y. Если задано только одно значение, масштаб по оси y будет равен масштабу по оси x.

scale3d (, ,) — определяет масштаб элемента по оси x, по оси y и по оси z.

scaleX () — определяет масштаб элемента по оси x.

scaleY () — определяет масштаб элемента по оси y.

scaleZ () — определяет масштаб элемента по оси z.

rotate () — определяет поворот элемента на заданный угол относительно центра поворота, заданного свойствомwebkit-transform-origin.

rotate3d (,, ,) — определяет поворот элемента на заданный угол по направлению вектора, заданного первыми тремя параметрами. Элемент поворачивается относительно точки, заданной свойствомwebkit-transform-origin.

rotateX () — определяет угол поворота элемента по оси x.

rotateY () — определяет угол поворота элемента по оси y.

rotateZ () — определяет угол поворота элемента по оси z.

skew () — определяет наклон элемента. Можно задать два числа через запятую: первый по оси x, второй по оси y. Если задано только одно значение, наклон по оси y будет равен 0.

skewX () — определяет угол наклона элемента по оси x.

skewY () — определяет угол наклона элемента по оси y.

perspective () — расстояние в пикселях от зрителя до плоскости z = 0.

Правило @keyframes — позволяет пользователю описать анимацию CSS свойств в виде перечня ключевых кадров.

@keyframes {.

{.

:;

:;

}.

{.

:;

:;

}.

{.

:;

:;

}.

}.

— задает имя анимации в виде строки в одинарных кавычках (это имя потом используется при вызове анимации в качестве значения свойства animation-name).

— задает селекторы которые определяют ключевые кадры. Они могут принимать значения:

from — внутри этого селектора описывается значения анимированных свойств в начальный момент анимации (также можно описать начальный кадр анимации, используя эквивалентный селектор 0%).

to — внутри этого селектора описывается значения анимированных свойств в конечный момент анимации (также можно описать конечный кадр анимации, используя эквивалентный селектор 100%).

— описывает значения анимированных свойств в данный момент времени (момент времени отсчитывается в процентном отношении от значения свойства animation-duration).

— анимируемое CSS свойство.

— значения анимированного свойств в момент, описываемый селектором кадра.

CSS Transitions позволяют назначать изменения свойств CSS плавно и в течение некоторого времени.

ERROR 404.

HTML:

Error.

404.

CSS:

body { background-color: #111 111; }.

div {.

padding: 40px;

font-size: 75px;

font-family: 'Monoton', cursive;

text-align: center;

text-transform: uppercase;

text-shadow: 0 0 80px red, 0 0 30px FireBrick, 0 0 6px DarkRed;

color: red;

}.

div p { margin:0; }.

#error:hover { text-shadow: 0 0 200px #ffffff, 0 0 80px #8 000,0 0 6px #0000ff; }.

#code:hover { text-shadow: 0 0 100px red, 0 0 40px FireBrick, 0 0 8px DarkRed; }.

#error {.

color: #fff;

text-shadow: 0 0 80px #ffffff, 0 0 30px #8 000,0 0 6px #0000ff;

}.

#error span {.

animation: upper 11s linear infinite;

}.

#code span: nth-of-type (2) {.

animation: lower 10s linear infinite;

}.

#code span: nth-of-type (1) {.

text-shadow: none;

opacity:.4;

}.

@keyframes upper {.

0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {.

opacity:.99; text-shadow: 0 0 80px #ffffff, 0 0 30px #8 000,0 0 6px #0000ff;

}.

20%, 21.999%, 63%, 63.999%, 65%, 69.999% {.

opacity:0.4; text-shadow: none;

}.

}.

@keyframes lower {.

0%, 12%, 18.999%, 23%, 31.999%, 37%, 44.999%, 46%, 49.999%, 51%, 58.999%, 61%, 68.999%, 71%, 85.999%, 96%, 100% {.

opacity:0.99; text-shadow: 0 0 80px red, 0 0 30px FireBrick, 0 0 6px DarkRed;

}.

19%, 22.99%, 32%, 36.999%, 45%, 45.999%, 50%, 50.99%, 59%, 60.999%, 69%, 70.999%, 86%, 95.999% {.

opacity:0.4; text-shadow: none;

}.

}.