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

    @valery_kz Автор вопроса
    Спасибо всем откликнувшимся, а в особенности Радику Алиеву. Вопрос решается, уже на финишной прямой, перепробована масса вариантов и способов. Сейчас остановился на CSS анимации, а с помощью JQ в нужный момент подменяю классы нужных блоков.
    Если будут интересующиеся - выложу позже свой код. Еще раз всем спасибо !!!

    var timerId = setTimeout(function bgSlider() {
    		$("#bg_1").removeClass("bg_visible").addClass("bg_move");
    		$("#bg_1").delay(5000)
    			.queue(function() {
    			$(this).removeClass("bg_move");
    			$(this).addClass("bg");
    			$(this).dequeue();
    		});


    Кусочек кода, но думаю должно быть понятно...
    Ответ написан
    1 комментарий
  • Как сделать эффект приближения фона для сайта?

    @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() последняя закоментирванная строчка, насколько я понимаю так делать не правильно, а как правильно? Еще нужно приделать возможность посетителю самому переключать фон по нажатию на шарик, соответствующий нужному фону, как это приделать?
    Ответ написан
    Комментировать