0

Есть див, который движется медленнее относительно других элементов страницы при прокрутке. У этого дива фон задан изображением. Как можно реализовать плавную смену фона блока (фоновых изображений всего 4) при прокрутке страницы? Например, как здесь (блок "Самый мощный iMac в истории").

1
  • Есть событие onscroll. Обрабатывайте его. Commented 9 июн. 2015 в 7:52

1 ответ 1

1

Интересно за что юзеру Wolkodav поставили минус? Он всё правильно сказал. @Nicolas Chabanovsky не вы случаем минусите? В общем не буду разглогольствовать вот ссыль на рабочую смену background при onscroll

    #header{
    width:958px;
    border:1px solid #ebebee;
    border-bottom:3px solid #ddd;
    background:red;
}

<script type="text/javascript">
    $(document).ready(function(){
        var HeaderTop = $('#header').offset().top;
        var hh =HeaderTop + 300;

        $(window).scroll(function(){
                if( $(window).scrollTop() > HeaderTop ) {
                        if($(window).scrollTop() > hh) {
                            $('#header').css({position: 'fixed', top: '0px', background:'#000'});   
                            } else{
                                $('#header').css({position: 'fixed', top: '0px'});  
                            }


                } else {
                        $('#header').css({position: 'static',background:'red'});
                }
        });
    });
</script>
</header>

 <div id="header">
      Фигня которая липнет и меняет background
    </div> 
2
  • минус ответу Wolkodav поставили совершенно по делу, он дал бензопилу, показал на полено и сказал "обрабатывайте его". Без каких-либо объяснений что и как нужно делать. Ваш пример кстати не далеко ушёл от его ответа, потому что эффект параллакса, который хочет автор ваш скрипт не достигает.
    – MasterAlex
    Commented 10 июн. 2015 в 12:12
  • @MasterAlex Гм действительно, я просто посмотрел на пример яблока - а там никакого паралакса нет Commented 10 июн. 2015 в 12:25

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.