Есть див, который движется медленнее относительно других элементов страницы при прокрутке. У этого дива фон задан изображением. Как можно реализовать плавную смену фона блока (фоновых изображений всего 4) при прокрутке страницы? Например, как здесь (блок "Самый мощный iMac в истории").
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>
-
минус ответу Wolkodav поставили совершенно по делу, он дал бензопилу, показал на полено и сказал "обрабатывайте его". Без каких-либо объяснений что и как нужно делать. Ваш пример кстати не далеко ушёл от его ответа, потому что эффект параллакса, который хочет автор ваш скрипт не достигает. Commented 10 июн. 2015 в 12:12
-
@MasterAlex Гм действительно, я просто посмотрел на пример яблока - а там никакого паралакса нет Commented 10 июн. 2015 в 12:25