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

Question

[valery_kz]

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

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

Comments

[Виталий Пухов]

если не сложно потом код того что получилось напишите) У себя тоже попробую так сделать)

Answer 1

[Павел Чесноков]

Просто для информации: данный эффект (сдвиг с увеличением) называется "Ken Burns Effect". По этому названию (Ken Burns Slider) можно найти много примеров и готовых скриптов.

Comments

[CapeRatel]

Спасибо. Познавательно.

Answer 2

[Radiks Alijevs]

Мне кажется лучше использовать картинки вместо background-image, а эффект лучше делать с translate3d ccs3, тогда эффект будет плавнее и красивее.

Чтобы функция bgApproximation() выполнялась по кругу, как вариант можно использовать функцию setInterval().

Переключение между слайдами с приведённым кодом сделать будет проблематично. Лучше делать отдельный блок, в котором все слайды с картинками и дальше манипулировать ими.

<div class="slides">
<div class="slide"><img src="" alt="" /></div>
<div class="slide active"><img src="" alt="" /></div>
<div class="slide"><img src="" alt="" /></div>
</div>

Вот пример простого слайдера, без лишних наворотов:
https://github.com/toymakerlabs/kenburns

Answer 3

[Виталий Инчин ☢]

!!!Вы меняете фон на изображения, которые посетитель еще должен загрузить, а это занимает время, так что они должны быть загружены изначально.

Организуйте блок с картинками не как body, а как несколько отдельных секций с различными фоновыми изображениями!

Ну а дальше останется в интервале менять прозрачность секций и их z-index, попутно создавая эффект наплыва. Также этот способ хорош тем, что можно в секции сразу запихивать нужный текст и элементы.

Answer 4

[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();
		});

Кусочек кода, но думаю должно быть понятно...

Comments

[Emptyform]

valery_kz подсказка: под сообщением Радика Алиева есть кнопка с синим шрифтом "Отметить решением" - смело жмякайте на него )