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

Размещено на http://www.allbest.ru/

Все началось с 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):

<style type="text/css">

body > div

{

width:483px;

height:298px;

background:#676470;

transition:all 0.3s ease;

}

</style>

Свойство 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 <имя анимации> {

<селектор кадра 1> {

<свойство 1>:<значение 1>;

<свойство 2>:<значение 1>;

}

<селектор кадра 2> {

<свойство 1>:<значение 2>;

<свойство 2>:<значение 2>;

}

<селектор кадра n> {

<свойство 1>:<значение n>;

<свойство 2>:<значение n>;

}

}

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

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

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

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

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

<свойство> -- анимируемое CSS свойство

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

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

ERROR 404

HTML:

<link href='http://fonts.googleapis.com/css?family=Monoton' rel='stylesheet' type='text/css'>

<div>

<p id="error">E<span>r</span>ror</p>

<p id="code">4<span>0</span><span>4</span></p>

</div>

CSS:

body { background-color: #111111; }

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 #008000,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 #008000,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 #008000,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;

}

}

Размещено на Allbest.ru

...