Question

我的容器中有一个图像，当你向下滚动页面50px时，容器中的图像会模糊。这是可能的（我想我以前见过它但不记得在哪里。我想要的文字保持正常，因此不是蓝色。

HTML：

<div class="hero1">
    <div id="hero1title">
      <h1>simplicity, craft and format <br>is what excites me as a designer</h1>
    </div>
  </div>

CSS：

.hero1{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    background-image: url(../splashscreen.jpg);
    background-color: rgb(247,200,198);
}


div #hero1title h1{
    color: white;
    font-size: 90pt;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 30%;
    text-align: center;
}

Answer 1

在hero1中添加一个包含图像模糊版本的div，或使用css将其模糊（参见.hero1 .blur ），然后添加以下JS代码进行创建滚动时两个图像之间的切换（运行底部的代码片段，然后转到全屏以查看其工作原理）：

注意：解决方案受this codpen.io sample启发。

$(window).scroll(function() { 
    // Get scroll position
    var s = $(window).scrollTop(),
    // scroll value and opacity
    opacityVal = (s / 240);
    // opacity value 0% to 100%
    $('.blur').css('opacity', opacityVal);
});

	
.hero1{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    background-image: url(http://lorempixel.com/1000/600/);
    background-size: cover;
    background-color: rgb(247,200,198);
     
}
.hero1 .blur {
	background-image: url(http://lorempixel.com/1000/600/);
	background-size: cover;

	-webkit-filter: blur(10px);
  	-moz-filter: blur(10px);
  	-o-filter: blur(10px);
  	-ms-filter: blur(10px);
  	filter: blur(10px);

	height: 100%;
	opacity: 0;
}


div #hero1title h1{
    color: white;
    font-size: 90pt;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 30%;
    text-align: center;
}

<<!DOCTYPE html>
<html>
<body>

 <div class="hero1">
    <div class="blur"></div>
    <div id="hero1title">
      <h1>simplicity, craft and format <br>is what excites me as a designer</h1>
    </div>
  </div>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>



</body>
</html>

Answer 2

这是我认为你试图做的事情：

$(document).scroll(function(){
    if($(this).scrollTop() >0){
        $('.hero1').css({'webkit-filter':'blur(5px)', 'filter':'blur(5px)'});
    }else{
        $('.hero1').css({'webkit-filter':'', 'filter':''});
    }
});

Here is the JSfiddle demo

Answer 3

也许你应该查看这个演示：

https://scotch.io/demos/animated-article-headers-blur

这是一个教程：

https://scotch.io/bar-talk/ideas-and-demos-for-animating-article-headers-on-scroll

模糊图像滚动

3 个答案: