Сравнение анимации: CSS vs. JavaScript

Сегодня веб сайты все больше переходят на использование новых технологий. Статичные картинки остаются как пережитки прошлого и на смену им приходит анимация. Есть два подхода к созданию анимации: javascript и CSS. Оба имеют свои сильные стороны и ограничения.

 

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

 

Создание анимации с помощью CSS отлично подходит для приложений где Вы используете маленькие, автономные элементы пользовательского интерфейса. К примеру, можно использовать анимацию для создания всплывающей подсказки или красиво убрать навигацию из области видимости. Самые передовые возможности есть у браузеров на движке Web-Kit , коими являются большинство десктопных и мобильных браузеров в наши дни.

 Простой способ добавить движение в Ваш дизайн - это использовать свойства CSS transitions или keyframes. 

С помощью CSS Вы определяете какую анимацию возможно использовать в зависимости от целевого элемента.

 Замечательный пример CSS-анимации:

 

 Посмотреть демо

 

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

 

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

 Есть много популярных библиотек с помощью которых легко создать анимацию:

 

 

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

 

 Почему именно GreenSock?

 

    • Анимацию сделать легко и интуитивно понятно
    • Работает и хорошо взаимодействует с другими (JQuery, HTML5, и т.д.)
    • Мощная
    • Уже содержит все необходимое для профессионального использования

 

Посмотрите на этот образец красивой анимации разработанной с использованием javascript и Greensock.

 

 Посмотреть демо

 

Используйте анимацию для приятного взаимодействия с интерфейсом ваших сайтов или для WOW эффекта потрясающего дизайна. Экспериментируйте и совершенствуйте Ваши креативные навыки. Нет предела совершенству!


КОНТАКТЫ АВТОРА

почта: 3wavedesign@gmail.ru

icq: 596106797

skype: dmitry3w