In the Adirondack template from Squarespace, there's a banner image of a purse that does this crazy thing where you scroll down and it fades out to white, but it seems to stay in the same position even as you scrolldown. It's really hard to articulate what I'm talking about, so I included an animated GIF of the image effect I'm talking about. Does anyone have any ideas about how could I go about replicating that? Thank you!
What you're referring to is Parallax Scrolling there are a ton of tutorials and examples but here is a simple implementation
$(window).scroll(function() {
$(".parallax").css("opacity", 1 - $(window).scrollTop() / 350);
});.parallax {
/* The image used */
background-image: url("https://images.unsplash.com/photo-1530357075171-3c4b84478ebd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b930fe4c342d9dcbee9e3b3939ccbe5f&auto=format&fit=crop&w=1300&q=80");
/* Set a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>
<div class="parallax"></div>
<div style="height:1000px;background-color:red;font-size:36px">
Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments