1

Есть 4 блока div, в блоке с классом .block_3 стоит фоновая картинка, как сделать так чтобы когда прокручиваешь этот блок эта картинка увеличивалась?

.block_1, .block_2, .block_3, .block_4 {
	height: 200px;
	padding: 50px 0px;
	text-align: center;
  font-size:40px;
}

.block_3 {
  background: url("https://www.ltu.se/cms_fs/1.170257!/image/ritspace.jpg") no-repeat;
  color:#FFF;
}
<div class="block_1">block_1</div>
<div class="block_2">block_2</div>
<div class="block_3">block_3</div>
<div class="block_4">block_4</div>

3
  • @МаксимЛенский, нет. У Вас картинка фоном идет. А нужно чтобы она была именно в div
    – Tokwiro
    17 дек 2017 в 5:00
  • codepen.io/MaximLensky/pen/qpOwmv в общем так ? я не часто здесь бываю , но скажу так здесь не любят подобные вопросы
    – user33274
    17 дек 2017 в 11:47
  • а вообще вот отличный plugin : github.com/peachananr/zoom-scroller
    – user33274
    17 дек 2017 в 12:03

1 ответ 1

2

var $ScalebleBg = $(".scaleble-bg"),
    wh = $(window).height(),
    i = 100,
    lastScroll = 0;

$ScalebleBg.css('background-size','100%');

$(document).scroll(function() {
    
    if( $(document).scrollTop() > ($ScalebleBg.offset().top - wh) ) {
    
        var CurentScroll = $(this).scrollTop();
        
        if (CurentScroll > lastScroll) {
            i++;
        } else {
            i--;
        }
        
        lastScroll = CurentScroll;
        
        $ScalebleBg.css('background-size', i + '%');
      
    };
    
});
.block_1, .block_2, .block_3, .block_4 {
    height: 200px;
    padding: 50px 0px;
    text-align: center;
    font-size:40px;
}

.block_3 {
    background: url("https://www.ltu.se/cms_fs/1.170257!/image/ritspace.jpg") no-repeat;
    color:#FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="block_1">block_1</div>
<div class="block_2">block_2</div>
<div class="block_3 scaleble-bg">block_3</div>
<div class="block_4">block_4</div>

Ваш ответ

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

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