Ответы пользователя по тегу JavaScript
  • JavaScript плавно меняющий фон страницы?

    nicks666
    @nicks666
    Не знаю, актуально ли еще, но вот как вариант решения:
    Делаем страницу обычной бутстраповской каруселью, выставляем ей необходимый тайминг и добавляем примерно вот такой скрипт. Он работает по такой логике: каждой картинке присвоен свой цвет, соответственно анимированно должен меняться бэкграунд подходящий именно той картинке, которая будет отображена.
    Для наглядности, вот так это все выглядит (осторожно, гифка тяжелая): goo.gl/ZXCCHh
    В css добавлена вот такая строчка:
    .main-page { transition: background .8s linear;  }  /* для плавного перехода */

    В HTML каждому контейнеру картинки добавлен data-атрибут с необходимым цветом:
    <div class="item" data-color="red">
        <div>
            <img class=' header__images' src="img/main-page/slides/3.png">
        </div>
    </div>

    И сам скрипт:
    $("#myCarousel").on('slide.bs.carousel', function (e) {
        var nextItem = $(e.relatedTarget); // считываем следующую картинку _перед_ тем как она появится.
    
        if($(nextItem).data('color') === 'green') {  // в зависимости от data-атрибута меняем цвет фона 
            $('.main-page').css('background', '#8de257'); 
       } 
        else if($(nextItem).data('color') === 'yellow') { // и далее все слайды по аналогии
            $('.main-page').css('background', '#f8cc00'); 
        } 
        else if ($(nextItem).data('color') === 'red') {
            $('.main-page').css('background', '#ff5a42'); 
        } 
        else if ($(nextItem).data('color') === 'blue'){
            $('.main-page').css('background', '#68d9fa'); 
        };
    });


    По аналогии можно сделать и то, что необходимо вам.
    Ответ написан
    Комментировать