Jump on scroll vertically

[oueryemchi]

Lovely plugin! I have a simple 2 full width containers with backgrounds, I set up the parallax vertically on the second container (which is below the first one.), the moment you start scrolling, the 2d container jumps down a distance before it starts smoothly parallax. is it a bug? thanks

I am using the latest version 1.4.6.

[abvas]

I have the same issue. Jumps in both horizontal and vertical. Jumps at the very beginning, as soon as I start to scroll. I am using the latest version 1.4.6. too.

[tgomilar]

@oueryemchi @oueryemchi please provide code example and info like which browser and OS do you use.

[tgomilar]

@abvas please use Codepen for code examples. Your code is unreadable and can not be tested instantly.

[abvas]

https://codepen.io/abvas/pen/mvwyab
This is my piece of code. I really like the plugin, but this race at the very beginning of the scrolling spoil everything. Tell me what I'm doing wrong.

[illiterati]

@tgomilar I think the problem only occurs when the element to be affected is already in the viewport on page load. Initial positions should probably be set before scrolling, to avoid the jump on scroll.

[abvas]

It's clear. And the element when loading the page can be hidden out of sight. But I wanted the element to be visible immediately after the page loads. But if it is visible, then at the beginning of the scroll is visible and racing. That is why the question arises what to do.

[illiterati]

As a hacky workaround, I changed line 135 from
var factor = 0;
to
var factor = setMovement.factor($this, width, options);

and I also commented out the factor = 0; at line 197.

[abvas]

Unfortunately, at the very beginning, the race remained. And then it works fine.

[illiterati]

Sorry, I also set the initial background position with CSS. Unfortunately, my hack only helps elements near the top of the document, it messes up ones further down.

[abvas]

Anyway, thanks for the help. Maybe the author will offer something.

[unmick]

Hello,
I have got the same issue.
At the beginning, the background-position is set at 0px.
element.style { background-image: url(https://unsplash.it/1920/800?image=152); background-position: center 0px; }
If i just scroll down a little bit, it's automatically set to -186px.
If i come back to the top of the page; the setup also come back to 0.
Thats create a very bad effect.

I have tried to give you a simple example : https://codepen.io/unmick/pen/VgrNOy
It's worst on my own page. @abvas is also a good example !

Thank you for your help.

[rom1unik]

Hi ... same issue, the hack of [illiterati] is good for the returning to the top, but onload and on resize don't work ... plz this plugin is so cool ... the world NEED IT

[Mohitgold]

Best solution, my issue fixed:
Use latest file of js for "jquery.paroller.min.js"
download and replace this:
https://github.com/tgomilar/paroller.js/releases/tag/v1.4.6

[abvas]

@Mohitgold,
Did not help. It still jumps at the very beginning of the scroll.
https://codepen.io/abvas/pen/mvwyab

[Mohitgold]

@abvas
Use this:
setTimeout(function() {
$('[data-paroller-factor]').paroller({
type: 'foreground',
factor: 0.2
});
}, 100);

setTimeout(function() {
  $("html,body").scrollTop(2);
}, 200);

[abvas]

@Mohitgold,
Did not help.

[Fyrins]

Nice Plugin !
But i've the same problem with this initial jump on vertical - foreground element :-/ When I scroll a little, my div immediately jump (translate) to 40px in the "factor" direction. This is a really strange behavior.

[computerarts]

@Mohitgold
although the "solution" can somewhat hide the problem when the page loads, if the user decides to scroll back up to the top, the jump is still visible.

[oueryemchi]

@oueryemchi @oueryemchi please provide code example and info like which browser and OS do you use.

on Windows.. basic setup no params, had to find another solution. good luck guys!

[emha]

It seems that the current version 1.4.6 broke something. The working version is 1.4.4. So change your package.json like this:

"paroller.js": "^1.4.6"
to
"paroller.js": "1.4.4"

After you changed your package.json and before your make your npm install do these steps:

1. Remove the existing package with npm uninstall paroller.js
2. Remove your package-lock.json.

After these steps do your npm install. You can check your installed version of paroller.js with npm list paroller.js. It should now be 1.4.4 and work.

[abvas]

@emha
And where can I get version 1.4.4?
I have jumps on version 1.4.1.

[emha]

@emha
And where can I get version 1.4.4?
I have jumps on version 1.4.1.

You just have to change you package.json. If you don't use npm/yarn you have to go back to 1.4.1. You can find this release here:
https://github.com/tgomilar/paroller.js/releases/tag/1.4.1

UPDATE
If 1.4.1 doesn't work, try to use npm/yarn. You can go back to version 1.4.4 and there are plenty more advantages of using npm/yarn.

[srevenant]

This is a small PR that fixes the jump for me: #62

And this is a PR that includes this, plus a lot of var cleanup: #63

However, the jump still happens sometimes, and I haven't tested all of the use cases to see if this break anything else. It probably needs more work, but I'm out of time at the moment.

[manikbajaj]

1. npm uninstall paroller.js

@emha Actually, Version "1.4.4" does not have this problem. Reverted back temporarily to solve the issue and waiting until a solution is released. @srevenant already pointed out on the PR, this breaks the background parallax needs to be tested before merging.

[pixluser]

I was having this problem in 2020 also… using the 1.4.1 fixed my problems, thanks @emha !