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

Всем привет !!!
Делаю плавное приближение фонового изображения и переключение между несколькими фоновыми изображениями. Как вот здесь - 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() последняя закоментирванная строчка, насколько я понимаю так делать не правильно, а как правильно? Еще нужно приделать возможность посетителю самому переключать фон по нажатию на шарик, соответствующий нужному фону, как это приделать? Как правильно сделать предзагрузку фоновых картинок, чтобы во время сценария не было задержек?
  • Вопрос задан
  • 3890 просмотров
Пригласить эксперта
Ответы на вопрос 5
cesnokov
@cesnokov
<head>&nbsp;</head>
Просто для информации: данный эффект (сдвиг с увеличением) называется "Ken Burns Effect". По этому названию (Ken Burns Slider) можно найти много примеров и готовых скриптов.
Ответ написан
dedalik
@dedalik
Веб разработчик
Мне кажется лучше использовать картинки вместо 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
Ответ написан
In4in
@In4in
°•× JavaScript Developer ^_^ ו°
!!!Вы меняете фон на изображения, которые посетитель еще должен загрузить, а это занимает время, так что они должны быть загружены изначально.

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

Ну а дальше останется в интервале менять прозрачность секций и их z-index, попутно создавая эффект наплыва. Также этот способ хорош тем, что можно в секции сразу запихивать нужный текст и элементы.
Ответ написан
@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();
		});


Кусочек кода, но думаю должно быть понятно...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Legalbet Саратов
от 50 000 руб.
NetLab Москва
от 35 000 до 50 000 руб.
Римэкс Екатеринбург
от 70 000 руб.
07 дек. 2019, в 18:02
2000 руб./за проект
07 дек. 2019, в 17:26
400 руб./в час
07 дек. 2019, в 17:09
1000 руб./за проект