Slyweb
На разработку сайта! Скидки 50%!

Анимация средствами CSS3 и jQuery. Модернайзер.

jQuery и CSS

В сегодняшней статье я расскажу о некоторых возможностях jQuery animate при его использовании в связке с эффектами CSS3, jQuery в основном можно использовать в тех местах, где браузеры не поддерживают новые возможности CSS3. Результат для Вас будет заключаться в улучшении эффектов анимации, за счет её встроенной поддержкой современными браузерами, следующими стандартам CSS3, то есть, анимация в результате получается более привлекательная, в отличие от анимации, создаваемой на основе jQuery.

Введение в анимацию на основе CSS3

Заранее отмечу, что анимация CSS3 поддерживается не всеми современными браузерами, список браузеров, поддерживаемых анимацию CSS3:

  • Google Chrome 9+
  • Opera 10.5+
  • Firefox 4+
  • Safari 3.2+

Для тех, кто не знаком с эффектами анимации CSS3, – это процесс плавного перехода от одного значения CSS свойства к другому, происходящий в заданном интервале времени. Для более ясной картины рассмотрим пример в котором анимация средствами CSS3 создаётся при возникновении события hover (с помощью свойства transition).

  • Код
  • Чистый код

  1.<style type='text/css'>
  2..photo{
  3. border:1px solid #fff;
  4. width:100px;
  5. height:100px;
  6. margin-top:10px;
  7. background:url('../slybox/images/20100614035131.jpg');
  8. border:2px solid #cadceb;
  9. margin:5px;
10. float:left;
11.}
12.
13..photo1{
14. border:1px solid #fff;
15. width:100px;
16. height:100px;
17. margin-top:10px;
18. background:url('../slybox/images/201006140350401.jpg');
19. border:2px solid #cadceb;
20. margin:5px;
21. float:left;
22.}
23.
24..photo:hover, .photo1:hover{
25. width:400px;
26. height:307px;
27. border:2px solid #cadceb;
28. /* apply transitions to all properties*/
29. -moz-transition: all 0.5s ease-out;
30. -o-transition: all 0.5s ease-out;
31. -webkit-transition: all 0.5s ease-out;
32. transition: all 0.5s ease-out;
33. margin:5px;
34. float:left;
35.}
36..photow {
37. margin:20px auto;
38. float:left;
39. width:100%;
40.}
41.</style>
42.


        
Данный пример может работать только в браузерах поддерживающих анимацию CSS свойств в соответствие со стандартами CSS3 (Google Chrome 9+,Opera 10.5+,Firefox 4+,Safari 3.2+).

Принцип работы следующий. При получении элементом статуса hover происходит установка новых свойств, указанных для определённого селектора, анимация добавляется установкой новых CSS свойств:

transition: all 2.5s ease-out;

all – для всех свойств, второй параметр – скорость анимации, третий параметр – эффект.

Соответственно так же указаны родные свойства для популярных браузеров (mozila, opera, webkit).

В данном примере мы указываем значение all, которое означает применение анимации для всех свойств, указанных в текущем правиле. Однако это не означает, что все указанные в правиле (с hover) новые свойства будут анимированы. В спецификации содержится таблица свойств, которые могут быть анимированы средствами CSS.

  • background-color
  • background-position
  • border-bottom-color
  • border-bottom-width
  • border-color
  • border-left-color
  • border-left-width
  • border-right-color
  • border-spacing
  • border-top-color
  • border-top-width
  • border-width
  • bottom
  • color
  • crop
  • font-weight
  • grid-*
  • height
  • left
  • letter-spacing
  • line-height
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline-color
  • outline-offset
  • outline-width
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • right
  • text-indent
  • text-shadow
  • top
  • vertical-align
  • visibility
  • width
  • word-spacing
  • z-index
  • zoom

В общем, пойдём далее, - к jQuery, а точнее к модернайзеру «Modernizr».

Так как большая часть пользователей не пользуеся современными барузерами, может сложиться ситуация когда в одних браузерах ваш код с CSS анимацией будет работать, а в других нет. Чтобы этого не произошло нам поможет модернайзер. «Modernizr» может служить разработчику в качестве инструмента для определения поддержки браузером тех или иных CSS свойств, в том числе и поддержки анимации CSS3. В результате использования модернайзера «Modernizr» у вас будет кроссбраузерное решение для анимации CSS свойств.

Для тех, кто не понимает что такое модернайзер, - это javascript, определяющий возможности по поддержке определённой технологии браузером, авторы ( Faruk Ateş, Paul Irish и Alex Sexton) достаточно хорошо разработали данную библиотеку, скачать Вы её можете по адресу http://www.modernizr.com/ .

Пример работы модернайзера «Modernizr» указан ниже в диве содержится подробная информация о возможностях вашего браузера(смешнее всего смотреть в IE :)):

Возможности вашего браузера:

  • @font-face
  • Canvas
  • Canvas Text
  • HTML5 Audio
  • HTML5 Video
  • rgba()
  • hsla()
  • border-image:
  • border-radius:
  • box-shadow:
  • text-shadow:
  • opacity:
  • Multiple backgrounds
  • Flexible Box Model
  • CSS Animations
  • CSS Columns
  • CSS Gradients
  • CSS Reflections
  • CSS 2D Transforms
  • CSS 3D Transforms
  • CSS Transitions
  • Geolocation API
  • localStorage
  • sessionStorage
  • SVG
  • SMIL
  • SVG Clipping
  • Inline SVG
  • Drag and Drop
  • hashchange
  • X-window Messaging
  • History Management
  • applicationCache
  • Touch events
  • Web Sockets
  • Web Workers
  • Web SQL Database
  • WebGL
  • IndexedDB
  • Input Types
  • Input Attributes

К чему это отступление? Дело в том, что модернайзер поможет нам анимацию CSS3 заменить jQuery там, где она не поддерживается.

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

  • Код
  • Чистый код

  1.if (Modernizr.csstransitions) {
  2.
  3.}
  4.


        

И вот здесь, когда мы определили с помощью модернайзера возможности браузера по поддержке CSS анимации, необходим jQuery, где бы мы создали кроссбраузерное решение. Вы можете открыть файл jquery.transitions.js или просмотреть код ниже, ктороый по сути и создаёт кроссбраузерное решение на jQuery. Определение поддержки браузером анимации CSS указано в 32 строке. Код ниже, по сути модифицирует родной метод jQuery animate, заменяя некоторые параметры CSS анимацией.

  • Код
  • Чистый код

  1.$(function(){
  2. function getPrefix( prop ){
  3. var prefixes = ['Moz','Webkit','Khtml','0','ms'],
  4. elem = document.createElement('div'),
  5. upper = prop.charAt(0).toUpperCase() + prop.slice(1),
  6. pref = "";
  7. for(var len = prefixes.length; len--;){
  8. if((prefixes[len] + upper) in elem.style){
  9. pref = (prefixes[len]);
10. }
11. }
12. if(prop in elem.style){
13. pref = (prop);
14. }
15. return '-' + pref.toLowerCase() + '-';
16.
17. }
18. $.fn.extend({
19. defaultAnimate: $.fn.animate,
20. animate: function(props, speed, easing, callback) {
21. var options = speed && typeof speed === "object" ? jQuery.extend({}, speed) :{
22. complete: callback || !callback && easing ||
23. jQuery.isFunction( speed ) && speed,
24. duration: speed,
25. easing: callback && easing || easing && !jQuery.isFunction(easing) && easing
26. };
27. return $(this).each(function() {
28. var $this = $(this),
29. altTransition,
30. easing = (options.easing) ? easing : 'ease-in-out',
31. prefix = (getPrefix('transition'));
32. if (Modernizr.csstransitions)
33. {
34.
35. $this.css(prefix + 'transition', 'all ' + speed / 1000 + 's ease-in-out').css(props);
36. setTimeout(function() {
37. $this.css(prefix + 'transition', altTransition);
38. if ($.isFunction(options.complete)) {
39. options.complete();
40. }
41. }, speed);
42. }
43. else{
44. $this.defaultAnimate(props, options);
45. }
46. })
47. }
48. });
49.});
50.


        

Пример реализации кроссбарузерной анимации CSS3 и jQuery.

Запуск

Для запуска указанного примера используется следующий код:

  • Код
  • Чистый код

  1.$('.buttonstart').click(start);
  2.function start() {
  3.
  4. $('.alt0').animate({width: '480px'}, 4000, function(){
  5. updateStatus('Первая анимация завершена!');
  6. });
  7. $('.alt1').animate({width: '480px'}, 5000, function(){
  8. updateStatus('Вторая анимация завершена!');
  9. });
10. $('.alt2').animate({width: '480px'}, 7000, function(){
11. updateStatus('Третья анимация завершена!');
12. });
13.}
14.
15.


        

В итоге, теперь у вас есть кроссбраузерное решение, более того вы может пойти далее и по тем же принципам создать эффекты через jQuery.animate на подобии эффектов fadeIn и fadeOut. Так же вы может использовать специально методы для создания собственных названий уровней скоростей, с использованием метода jQuery.fx.speeds.slow и jQuery.fx.speeds.fast.

Adrian Sinclair создал более модифицированную версию данного скрипта и показал его работу на следующем примере.

Открыть пример в новом окне...

Существуют и более продвинутые версии jquery.transitions:

В последней версии скрипта дополнительно добавлены методы fadeIn(), .fadeOut(), .slideUp(), .slideDown() и slideToggle(), которые будут работать на основе анимации на CSS3, при её поддержки браузером, так же добавлены методы для работы с очередью анимации (в том числе и .delay()).

Заключение

В общем, можно создавать красивую анимацию на основе кроссбраузерных решений и модернайзера. К тому же модернайзер пригодится для быстрого определения возможностей браузера. Модернайзер о котором написано здесь используется в Twitter и на многих других сайтах.


Александр Ермаков