jQuery.animate и css transform

Анастасия

jQuery.animate и css transform

Задача: при наведении мышкой на картинку анимировать ее, чтобы увеличивался масштаб, или, чтобы она поворачивалась.

Для этого надо скачать два патча для jQuery v.1.4.3
первый - https://github.com/zachstronaut/jquery-animate-css-rotate-scale/
второй - https://github.com/zachstronaut/jquery-css-transform/
Приделать их в head:
    <script src="/js/modernizr-1.6.min.js"></script>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/jquery/jquery-css-transform.js" type="text/javascript"></script>
    <script src="/js/jquery/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>   

и можно анимировать:
    $("#anim").animate({rotate: "5deg"}, 500); //поворачивать полсекунды на 5 градусов
    $("#anim").animate({scale: "1.05"}, 500); //чуть-чуть увеличивать полсекунды

Пример:
 
    //стрелочки щевеляться
	if (Modernizr.csstransforms) {
		$(".workflow li.arrow1, .workflow li.arrow3, .workflow li.arrow5").hover(function(){
			$(this).animate({
					rotate: "5deg",
				}, 600).animate({
					rotate: "-5deg",
				}, 700);
			}, function(){
				$(this).css({
					transform: "rotate(0deg)",
					"-moz-transform": "rotate(0deg)",
					"-webkit-transform": "rotate(0deg)"
				});
			});
			$(".workflow li.arrow2, .workflow li.arrow4").hover(function(){
				$(this).animate({
					scale: "1.05",
				}, 600).animate({
					scale: "0.95",
				}, 700);
			}, function(){
				$(this).css({
					transform: "scale(1)",
					"-moz-transform": "scale(1)",
					"-webkit-transform": "scale(1)"
				});
			});
		}

Похожие записи

22:37:03 14.09.2012
Mariya
Интересный эффект с применением CSS transform - http://lecaw.ru/index.php/css/item/294-effekt-vrasheniya-kuba

Вы можете оставить
комментарий



    
© 2002-2016 Креограф. Все права защищены законом РФ
 Русский /  English