Question

我希望我的图像在图像向下滚动到中间点时基本上看起来好像渐渐消失。

我正在使用航点来提出触发点，这是正常的。

我无法弄清楚如何应用不透明度，尤其是在淡出图像时，您可以向下滚动，然后在用户向上滚动时淡入。我是否使用了叠加层或者在我的代码段中应用了opacity: 0？

有没有人知道如何做到这一点？

$('#servMain').waypoint(function() {
		$('#servMain').addClass('fadeOpacity');
		console.log('scrolled into view');
	}, {
		offset: '-30%'
	});

#servMain {
	width: 100%;
	height: 1000px;
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/e/e0/Long_March_2D_launching_VRSS-1.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: relative;
	border: 1px solid red;
}
.fadeOpacity {
  opacity 0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<section id="servMain">
		
</section>
<section class="sec90">
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br>
</section>

Answer 1

你不能用Waypoints做这件事，但你可以自己写点东西。下面是根据滚动设置不透明度所需的javascript示例（我从您链接的网站上窃取了此代码）：

   $(document).scroll(function (t) {
        var $main = $("#servMain");
        var h = window.innerHeight;
        var r = (h - window.scrollY) / (h - 400);

        if (r >= 0) { $main.css("opacity", r); }
    });

他们400就像我认为的偏移，所以你可以根据自己的需要进行调整。

＆＃13;

 $(document).scroll(function (t) {
        var $main = $("#servMain");
        var h = window.innerHeight;
        var r = (h - window.scrollY) / (h - 100);

        if (r >= 0) { $main.css("opacity", r); }
    });

＆＃13;

#servMain {
	width: 100%;
	height: 1000px;
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/e/e0/Long_March_2D_launching_VRSS-1.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: relative;
	border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="servMain">
		
</section>
<section class="sec90">
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br>
</section>

＆＃13;

Answer 2

你的css中有一个拼写错误（忘了半栏）

.fadeOpacity {
  opacity : 0;

检查一下：https://jsfiddle.net/h5mj5ezh/

达到触发点后添加不透明度转换

2 个答案: