Brennan Altringer Brennan Altringer - 4 months ago 27
Javascript Question

Css and JS image zoom on scroll top

I found this really cool app and it has a few features that I can't figure out.

One in particular is the image zoom on scroll up so that you don't see "behind" the app. I included a video demo here

I don't know if they have the image set to the background, or if the image is in another container. I am talking about the top picture of Batman.

I'm new to js and haven't been able to see any solutions that would point me in the right direction!

Thanks everyone!

Answer

They are probably building into how far you've scrolled down the page. For example, you can get the distance the user has scrolled with:

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

If you bound this into the scroll event, like so:

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

Then you can alter the size of some image based on how far you've scrolled down. Here's an example of how this could be used to change the size of some image:

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>

Comments