Hey there! I have a div with the class 'section' that serves as a key element on my website. It has a background image set using the following CSS:
.section-one {
width: 100vw;
height: 100vh;
background-image: url(images/outside-shot-edited.png);
background-position: center;
background-size: cover;
}
I'm interested in adding a parallax effect to this section so that the background image scrolls at a slower pace than the content when the user scrolls.
Can I achieve this using jQuery for a div with a background-image?
I'm looking for something simple to bring a touch of movement to the site without making it too complicated.
Any suggestions or tips would be greatly appreciated. I did try the code snippet below, but it didn't quite work as intended...
function parallax(){
var scrolled = $(window).scrollTop();
$('.section-one').css('top', -(scrolled * 0.5) + 'px');
}
$(window).scroll(function(e){
parallax();
});