javascript - Scroll parallax effect with a background position set in percentage - Stack Overflow

admin管理员组

文章数量:1327849

I'm learning how to create a scroll parallax effect following this guide. So far so good, but then I realize that my background position is set to '50%'(center). So when I run my js, the background position unit is changed from % to px hence it position is not what I expected.

How can I write the code so the background position change in percentage?

Here is the code:

window.addEventListener('scroll', function(){
  var scrollPosition = window.pageYOffset;
  var bgParallax = document.getElementsByClassName('parallax')[0];
  var limit = bgParallax.offsetTop + bgParallax.offsetHeight;  
  if (scrollPosition > bgParallax.offsetTop && scrollPosition <= limit){
    bgParallax.style.backgroundPositionY = scrollPosition / 2 + 'px';   
  }else{
    bgParallax.style.backgroundPositionY = '0';    
  }
});

body{
  margin:0px;
  padding:0px;
  height:600px;
}
.parallax{
  width:100%;
  height:300px;
  background-color:red;
  background-image:url('.png');
  background-position:center;
}

<div class='parallax'></div>

I'm learning how to create a scroll parallax effect following this guide. So far so good, but then I realize that my background position is set to '50%'(center). So when I run my js, the background position unit is changed from % to px hence it position is not what I expected.

How can I write the code so the background position change in percentage?

Here is the code:

window.addEventListener('scroll', function(){
  var scrollPosition = window.pageYOffset;
  var bgParallax = document.getElementsByClassName('parallax')[0];
  var limit = bgParallax.offsetTop + bgParallax.offsetHeight;  
  if (scrollPosition > bgParallax.offsetTop && scrollPosition <= limit){
    bgParallax.style.backgroundPositionY = scrollPosition / 2 + 'px';   
  }else{
    bgParallax.style.backgroundPositionY = '0';    
  }
});

body{
  margin:0px;
  padding:0px;
  height:600px;
}
.parallax{
  width:100%;
  height:300px;
  background-color:red;
  background-image:url('http://68.media.tumblr./9c811fb09ae9fe61e3bbcb1d7f0c3724/tumblr_o9489fIsmH1qhttpto3_1280.png');
  background-position:center;
}

<div class='parallax'></div>

And here is a CODEPEN

PPD: I can't change my html or css and I need solve this with pure javascript for learning purposes.

• javascript

Share Follow edited May 11, 2017 at 20:03 GhostOrder asked May 11, 2017 at 19:57 GhostOrderGhostOrder 66399 silver badges2626 bronze badges 2

• Have you considered just using a library for this (they are fairly mon) instead of re-inventing the wheel (also mon, but not usually remended)? – Travis J Commented May 11, 2017 at 20:06
• That would be an fast fix, and I'm not against fast fixes but since I learning javascript I think is important to fix all I can with just pure javascript. – GhostOrder Commented May 11, 2017 at 20:08

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Something like this?

It's essentially the same thing, just starting at 50% instead of 0px, and subtracting as you scroll down, depending on how far the image should move. (10% in this case, so backgroundPositionY varies from 40% to 50%)

window.addEventListener('scroll', function(){
  var scrollPosition = window.pageYOffset;
  var bgParallax = document.getElementsByClassName('parallax')[0];
  var limit = bgParallax.offsetTop + bgParallax.offsetHeight;  
  if (scrollPosition > bgParallax.offsetTop && scrollPosition <= limit){
    bgParallax.style.backgroundPositionY = (50 - 10*scrollPosition/limit) + '%';   
  }else{
    bgParallax.style.backgroundPositionY = '50%';    
  }
});

body{
  margin:0px;
  padding:0px;
  height:600px;
}
.parallax{
  width:100%;
  height:300px;
  background-color:red;
  background-image:url('http://68.media.tumblr./9c811fb09ae9fe61e3bbcb1d7f0c3724/tumblr_o9489fIsmH1qhttpto3_1280.png');
  background-position:center;
}

<div class='parallax'></div>

本文标签： javascriptScroll parallax effect with a background position set in percentageStack Overflow