Сравнение анимации: CSS vs. JavaScript
Сегодня веб сайты все больше переходят на использование новых технологий. Статичные картинки остаются как пережитки прошлого и на смену им приходит анимация. Есть два подхода к созданию анимации: jаvascript и CSS. Оба имеют свои сильные стороны и ограничения.
Анимация с помощью CSS
Создание анимации с помощью CSS отлично подходит для приложений где Вы используете маленькие, автономные элементы пользовательского интерфейса. К примеру, можно использовать анимацию для создания всплывающей подсказки или красиво убрать навигацию из области видимости. Самые передовые возможности есть у браузеров на движке Web-Kit , коими являются большинство десктопных и мобильных браузеров в наши дни.
Простой способ добавить движение в Ваш дизайн - это использовать свойства CSS transitions или keyframes.
С помощью CSS Вы определяете какую анимацию возможно использовать в зависимости от целевого элемента.
Замечательный пример CSS-анимации:
Анимация с помощью jаvascript
Создание анимации с помощью jаvascript является более сложным, чем когда мы используем CSS, но с этой сложностью приходит большая мощность, когда мы научимся использовать все возможности этого потрясающего языка.
Есть много популярных библиотек с помощью которых легко создать анимацию:
Все перечисленные выше библиотеки хороши, но если выбирать самую лучшую то пожалуй я бы выбрал GreenSock в контексте использования её для демонстрации анимации.
Почему именно GreenSock?
- Анимацию сделать легко и интуитивно понятно
- Работает и хорошо взаимодействует с другими (JQuery, HTML5, и т.д.)
- Мощная
- Уже содержит все необходимое для профессионального использования
Посмотрите на этот образец красивой анимации разработанной с использованием jаvascript и Greensock.
Используйте анимацию для приятного взаимодействия с интерфейсом ваших сайтов или для WOW эффекта потрясающего дизайна. Экспериментируйте и совершенствуйте Ваши креативные навыки. Нет предела совершенству!