滚动顶部的 Css 和 JS 图像缩放

Question

我发现这个非常酷的应用程序，它有一些我想不出来的功能。

特别是向上滚动时图像会放大，这样您就不会看到应用程序的“背后”。 I included a video demo here

我不知道他们是否将图像设置为背景，或者图像是否位于另一个容器中。我说的是蝙蝠侠的顶图。

我是 js 新手，还没有看到任何可以为我指明正确方向的解决方案！

谢谢大家！

Answer 1

它们可能会影响您向下滚动页面的距离。例如，您可以获取用户滚动的距离：

var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop;

如果你把它绑定到滚动事件中，像这样：

window.addEventListener("scroll", function(){
    var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop;
    console.log(scrollTop);
}, false)

然后，您可以根据向下滚动的距离更改某些图像的大小。这是一个如何使用它来更改某些图像大小的示例：

window.addEventListener("scroll", function(){
	var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop;
	image = document.getElementById("theImage");
    var dimension = 100 + 400 - Math.min(400,scrollTop) + "%";
    image.style.backgroundSize = dimension+" "+dimension;
}, false)

#theImage {
  width: 100%;
  text-align: center;
  background-image: url('http://lorempixel.com/1000/1000/sports/');
  background-position: center; 
  height: 800px;
}

<div id="theImage">
</div>
<h1>Some text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed ante elementum, ornare nibh nec, finibus purus. Donec eu hendrerit orci. Vivamus fermentum, quam sed vulputate semper, est orci mollis leo, non pharetra nisi ante sit amet lorem. Nulla condimentum metus vitae nulla fringilla, dapibus dignissim lacus commodo. Etiam tincidunt urna sit amet odio mollis, eget vestibulum odio iaculis. Praesent vel est malesuada, efficitur eros ut, pellentesque metus. In sagittis tincidunt ligula. Donec sit amet ipsum libero. Donec quis dolor ut eros maximus finibus molestie a lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed ante elementum, ornare nibh nec, finibus purus. Donec eu hendrerit orci. Vivamus fermentum, quam sed vulputate semper, est orci mollis leo, non pharetra nisi ante sit amet lorem. Nulla condimentum metus vitae nulla fringilla, dapibus dignissim lacus commodo. Etiam tincidunt urna sit amet odio mollis, eget vestibulum odio iaculis. Praesent vel est malesuada, efficitur eros ut, pellentesque metus. In sagittis tincidunt ligula. Donec sit amet ipsum libero. Donec quis dolor ut eros maximus finibus molestie a lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed ante elementum, ornare nibh nec, finibus purus. Donec eu hendrerit orci. Vivamus fermentum, quam sed vulputate semper, est orci mollis leo, non pharetra nisi ante sit amet lorem. Nulla condimentum metus vitae nulla fringilla, dapibus dignissim lacus commodo. Etiam tincidunt urna sit amet odio mollis, eget vestibulum odio iaculis. Praesent vel est malesuada, efficitur eros ut, pellentesque metus. In sagittis tincidunt ligula. Donec sit amet ipsum libero. Donec quis dolor ut eros maximus finibus molestie a lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed ante elementum, ornare nibh nec, finibus purus. Donec eu hendrerit orci. Vivamus fermentum, quam sed vulputate semper, est orci mollis leo, non pharetra nisi ante sit amet lorem. Nulla condimentum metus vitae nulla fringilla, dapibus dignissim lacus commodo. Etiam tincidunt urna sit amet odio mollis, eget vestibulum odio iaculis. Praesent vel est malesuada, efficitur eros ut, pellentesque metus. In sagittis tincidunt ligula. Donec sit amet ipsum libero. Donec quis dolor ut eros maximus finibus molestie a lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed ante elementum, ornare nibh nec, finibus purus. Donec eu hendrerit orci. Vivamus fermentum, quam sed vulputate semper, est orci mollis leo, non pharetra nisi ante sit amet lorem. Nulla condimentum metus vitae nulla fringilla, dapibus dignissim lacus commodo. Etiam tincidunt urna sit amet odio mollis, eget vestibulum odio iaculis. Praesent vel est malesuada, efficitur eros ut, pellentesque metus. In sagittis tincidunt ligula. Donec sit amet ipsum libero. Donec quis dolor ut eros maximus finibus molestie a lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed ante elementum, ornare nibh nec, finibus purus. Donec eu hendrerit orci. Vivamus fermentum, quam sed vulputate semper, est orci mollis leo, non pharetra nisi ante sit amet lorem. Nulla condimentum metus vitae nulla fringilla, dapibus dignissim lacus commodo. Etiam tincidunt urna sit amet odio mollis, eget vestibulum odio iaculis. Praesent vel est malesuada, efficitur eros ut, pellentesque metus. In sagittis tincidunt ligula. Donec sit amet ipsum libero. Donec quis dolor ut eros maximus finibus molestie a lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed ante elementum, ornare nibh nec, finibus purus. Donec eu hendrerit orci. Vivamus fermentum, quam sed vulputate semper, est orci mollis leo, non pharetra nisi ante sit amet lorem. Nulla condimentum metus vitae nulla fringilla, dapibus dignissim lacus commodo. Etiam tincidunt urna sit amet odio mollis, eget vestibulum odio iaculis. Praesent vel est malesuada, efficitur eros ut, pellentesque metus. In sagittis tincidunt ligula. Donec sit amet ipsum libero. Donec quis dolor ut eros maximus finibus molestie a lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed ante elementum, ornare nibh nec, finibus purus. Donec eu hendrerit orci. Vivamus fermentum, quam sed vulputate semper, est orci mollis leo, non pharetra nisi ante sit amet lorem. Nulla condimentum metus vitae nulla fringilla, dapibus dignissim lacus commodo. Etiam tincidunt urna sit amet odio mollis, eget vestibulum odio iaculis. Praesent vel est malesuada, efficitur eros ut, pellentesque metus. In sagittis tincidunt ligula. Donec sit amet ipsum libero. Donec quis dolor ut eros maximus finibus molestie a lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed ante elementum, ornare nibh nec, finibus purus. Donec eu hendrerit orci. Vivamus fermentum, quam sed vulputate semper, est orci mollis leo, non pharetra nisi ante sit amet lorem. Nulla condimentum metus vitae nulla fringilla, dapibus dignissim lacus commodo. Etiam tincidunt urna sit amet odio mollis, eget vestibulum odio iaculis. Praesent vel est malesuada, efficitur eros ut, pellentesque metus. In sagittis tincidunt ligula. Donec sit amet ipsum libero. Donec quis dolor ut eros maximus finibus molestie a lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed ante elementum, ornare nibh nec, finibus purus. Donec eu hendrerit orci. Vivamus fermentum, quam sed vulputate semper, est orci mollis leo, non pharetra nisi ante sit amet lorem. Nulla condimentum metus vitae nulla fringilla, dapibus dignissim lacus commodo. Etiam tincidunt urna sit amet odio mollis, eget vestibulum odio iaculis. Praesent vel est malesuada, efficitur eros ut, pellentesque metus. In sagittis tincidunt ligula. Donec sit amet ipsum libero. Donec quis dolor ut eros maximus finibus molestie a lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed ante elementum, ornare nibh nec, finibus purus. Donec eu hendrerit orci. Vivamus fermentum, quam sed vulputate semper, est orci mollis leo, non pharetra nisi ante sit amet lorem. Nulla condimentum metus vitae nulla fringilla, dapibus dignissim lacus commodo. Etiam tincidunt urna sit amet odio mollis, eget vestibulum odio iaculis. Praesent vel est malesuada, efficitur eros ut, pellentesque metus. In sagittis tincidunt ligula. Donec sit amet ipsum libero. Donec quis dolor ut eros maximus finibus molestie a lorem.</p>