Как сделать эффект приближения фона для сайта?

Question

[valery_kz]

Всем привет !!!
Нужно сделать плавное приближение фонового изображения и переключение между несколькими фоновыми изображениями. Как вот здесь - botsad.pioneer.ru/placement

Понимаю что с помощью JS/JQ и CSS, но как именно?

Answer 1

[Денис Инешин]

Лучше использовать Animate.css и эффект ZoomIn

Answer 2

[Дмитрий Фоминых]

#slider .one img {
	-webkit-transform: scale(1);
	  -moz-transform: scale(1);
	    -o-transform: scale(1);
	       transform: scale(1);
	-webkit-transition: -webkit-transform            10s ease;
	   -moz-transition: -moz-transform                 10s ease;
	    -ms-transition: -ms-transform     		10s ease;
	     -o-transition: -o-transform 			10s ease;
	        transition: transform 				10s ease;
}
#slider .one.current img {
	-webkit-transform: scale(1.1);
	  -moz-transform: scale(1.1);
	    -o-transform: scale(1.1);
	       transform: scale(1.1);
}

Ну а смену слайдов соответственно слайдером.

Answer 3

[valery_kz]

Спасибо всем за ответы. Сейчас делаю следующим образом:

$(document).ready(function() {		 
		  bgApproximation(); // эта функция делает приближение и замену фонов
		  slide1Description1(); //эта и две следующие функциии выводят текст с задержкой на первом фоне
		  slide1Description2();
		  slide1Description3();
		 
		    
		function bgApproximation() {
		    $("body")
		    .animate({ "background-size":"120%" }, 5000, function(){$("body").css({"background-image":"url(img/2.jpg)"})})
		    .animate({ "background-size":"100%" }, 0)
		    .animate({ "background-size":"100%" }, 5000, function(){$("body").css({"background-image":"url(img/3.jpg)"})})
		    .animate({ "background-size":"100%" }, 0)
		    .animate({ "background-size":"120%" }, 5000, function(){$("body").css({"background-image":"url(img/1.jpg)"})})
		    .animate({ "background-size":"100%" }, 0);
		    //.animate({ "background-size":"100%" }, 0, bgApproximation());
		}
		
		function slide1Description1() {
			$("#slide1Description1")
			.animate({opacity: 1.0}, 1000)
			.animate({opacity: 1.0}, 4000)
			.animate({opacity: 0.0}, 0);
		}
		
		function slide1Description2() {
			$("#slide1Description2")
			.animate({opacity: 0.0}, 1000)
			.animate({opacity: 1.0}, 1000)
			.animate({opacity: 1.0}, 3000)
			.animate({opacity: 0.0}, 0);
		}
		function slide1Description3() {
			$("#slide1Description3")
			.animate({opacity: 0.0}, 2000)
			.animate({opacity: 1.0}, 1000)
			.animate({opacity: 1.0}, 2000)
			.animate({opacity: 0.0}, 0);
		}
       
    });

Работает немного криво, и как правильно зациклить чтобы после третьего фона снова становился первый и далее по кругу? В функции bgApproximation() последняя закоментирванная строчка, насколько я понимаю так делать не правильно, а как правильно? Еще нужно приделать возможность посетителю самому переключать фон по нажатию на шарик, соответствующий нужному фону, как это приделать?