Problems in parallax effect

Published on : April 27, 2026

Author: wahid

Category: Uncategorized

In my last tutorial I describe how to add parallax effect on your website. Today I am going to describe what type of problem I faced when I try to add parallax effect on my website and how I fix those problems.
Can you remember the code for parallax effect
Parallax effect code:

[sourcecode]
$(window).scroll(function(e) {
var yPos = -($(window).scrollTop() / $("#section").data(‘speed’));
var coords = ‘0 ‘+ yPos + ‘px’;
$("#section").css({ backgroundPosition: coords });
});
[/sourcecode]

If you follow my previous code you already familiar with this code. This function moves your background image during scroll.

Problem

Now assume that you have 10 numbers of sections. Each section height is 1000. So when you scroll your page your each sections background images are moving towards top. If your image background position moving 1 pixel per 50 pixel scroll then when you reach your second section your second section background position already moved 20 pixel towards top. When you reach your third section background position already moved 40 pixel towards top. When you reach your tenth section background position already moved 160 pixel towards top.

Now if we have this image as a background in our last section. What is the problem we may face? When we reach at the top of section 10 the image already moved 140 pixel towards top. So It may crop snake head and user can not see full image.

Solution

I solve this problem in my way. I use condition for moving background. In my code section 2 background moving start when you reach to the top of section 2. Before you reach section 2 only section 1 background moving. So when you reach section 2 you can see full image. In this same way you can start move your section 3 background when you reach at top of section 3.
For this solution you need to calculate each section height and apply condition

[sourcecode]
/*============================================================================================
Declare variable
============================================================================================*/
var first_image_height, second_image_height;
var first_content_height, second_content_height;
var first_section_height, second_section_height;

/*============================================================================================
calculate image div height
============================================================================================*/
first_image_height=document.getElementById("section1").offsetHeight;
second_image_height=document.getElementById("section2").offsetHeight;

/*============================================================================================
calculate content div height;
============================================================================================*/
first_content_height=document.getElementById("description1").offsetHeight;
second_content_height=document.getElementById("description2").offsetHeight;

/*============================================================================================
calculate total height of each section.
============================================================================================*/
first_section_height=first_image_height+first_content_height;
second_section_height=second_image_height+second_content_height+first_section_height;

function moveBackground(parameter){
var topHeight = $("#section"+parameter).offset().top;
var yPos = -(($(window).scrollTop()-topHeight) / $("#section"+parameter).data(‘speed’));
var coords = ‘0 ‘+ yPos + ‘px’;
$("#section"+parameter).css({ backgroundPosition: coords });
}
$(‘section[data-type="background"]’).each(function() {
var bgobj = $(this);

$(window).scroll(function(e) {
/*============================================================================================
Move background in a range.
============================================================================================*/
if($(window).scrollTop()<first_section_height){
moveBackground(1);
}
if($(window).scrollTop()>first_section_height){
moveBackground(2);
}
});
});
[/sourcecode]

Hope this solution will help you.