Изменить изображение при прокрутке

Question

Я немного новичок в кодировании. У меня есть div с фоновым изображением. Я хочу, чтобы изменить изображение из размытой версии до более четкой версии, когда я прокручиваю вниз. Мой HTML-код, как это:

<div class="intro"> 
<div class="blur" style="background-image: url(&quot;blurimage.png&quot;);"></div> 
<div class="clear" style="opacity: 0.00666667; background-image: url(&quot;image.png&quot;);"></div> 
</div> 

Мой CSS код выглядит так:

.intro{ 
    display: table; 
    width: 100%; 
    height: 700px; 
    position: relative; 

} 
.blur{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover; 
    z-index: -10; 
    background-color: #222; 
} 
.clear{ 
    background-size: cover;} 

Я попытался с помощью многого JavaScript функции, но без толка. Сообщите мне, как я могу это сделать, используя функцию Javascript. Спасибо!

Answer 1

Использование JavaScript вы можете попробовать

document.addEventListener("scroll", function(event) { 
    // this code is executed each time the user scrolls 
    var scrollPosition = window.pageYOffset; 
    // scrollPosition is 0 at the top of the page 
    // it contains how many pixels have been scrolled down 
}); 

Надежда, что помогает.

Answer 2

Добавьте это в файл JS (я предполагаю, что у вас есть JQuery также включен):

jQuery(document).ready(function($) { 
    scrollPosition = $(document).scrollTop(); 
    $('body').scroll(function() { 
     $('.intro .clear').animate({ 
      height: scrollPosition, 
     }, 300); 
    }); 
}); 

Также добавьте в .clear:

.clear { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 0; 
    background-size: cover; 
} 

Также имейте в виде, что этот код будет работать если у вас есть изображение поверх страницы. В противном случае вы можете изменить $(document).scrollTop() с фактическим селектором родительского элемента.

Я бы также рекомендовал переименовать класс clear с каким-либо другим именем, так как если вы решите использовать CSS-структуру или плагин в дальнейшем, это имя класса может быть зарезервировано для стилей clearfix.

Answer 3

посмотреть здесь jsfiddle

сделал простой пример с изменением background-color. это для примера только потому, что я не могу использовать изображения

также ... Вам нужно только 1 DIV внутри intro и переключать классы по этому div от .blur к .clear и наоборот и использовать CSS для стилизации тех классы.

идея заключается в том, что у вас есть только один div вес, к которому вы меняете background в зависимости от свитка

HTML:

<div class="intro"> 
    <div class="blur"></div> 
</div> 

CSS:

.intro{ 
    display: table; 
    width: 100%; 
    height: 700px; 
    position: relative; 

} 

.intro div { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover; 
    z-index: -10; 

} 
.blur{ 
    background-image: url("blurimage.png"); 
    background-color: red; 
} 
.clearimg { 
    background-size: cover; 
    background-color:blue 
    background-image: url("image.png"); 
} 

JQ:

$(window).scroll(function() { 
    if ($(window).scrollTop() > 0) { 
     $(".intro div").addClass("clearimg") 
     $(".intro div").removeClass("blur") 
    }else{ 
     $(".intro div").addClass("blur") 
     $(".intro div").removeClass("clearimg") 
    } 
});