Задать вопрос
@valery_kz
javascript

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

Всем привет !!!
Делаю плавное приближение фонового изображения и переключение между несколькими фоновыми изображениями. Как вот здесь - 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() последняя закоментирванная строчка, насколько я понимаю так делать не правильно, а как правильно? Еще нужно приделать возможность посетителю самому переключать фон по нажатию на шарик, соответствующий нужному фону, как это приделать? Как правильно сделать предзагрузку фоновых картинок, чтобы во время сценария не было задержек?
  • Вопрос задан
  • 4983 просмотра
1 комментарий
Подписаться 11 Оценить 1 комментарий
Пригласить эксперта
Ответы на вопрос 4
cesnokov
@cesnokov
<head>&nbsp;</head>
Просто для информации: данный эффект (сдвиг с увеличением) называется "Ken Burns Effect". По этому названию (Ken Burns Slider) можно найти много примеров и готовых скриптов.
Ответ написан
1 комментарий
1 комментарий
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();
		});


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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Очистка ин.текста с изображения и создание обложки+корешка для книги
19 апр. 2024, в 15:34
14000 руб./за проект
Разработать фронтенд для интернет-магазина на фреймворке TS
19 апр. 2024, в 15:33
60000 руб./за проект
Спроектировать дизайн сводной SEO таблицы
19 апр. 2024, в 15:20
5000 руб./за проект
Ещё заказы