Comments (6)
I've determined the root cause of this issue. This issue emerges from a general root/underlying issue associated with variable scoping and context. For example -- once the parallax finally reaches it target (after the end of the decay) it switches the "current" animation function (i.e. the function responsible for animating the current viewport) from an "off target" animating function to an "on target" animating function (or really just a function that idles), with the functions being pointerOffTarget
and pointerOnTarget
respectively.
The issue is that the state used to maintain which function is the "current" function is maintained in a totally different scope. That then means the "off target" animating function doesn't currently have the ability to hand animating back to the "off target" animator (due to the scope of the original pointerFn
which is defined on initialization of parallax itself being totally different). So the only way to properly hand this off between being "on target" and "off target" is to, in the pointerOnTarget
function, make a call that updates the original scopes pointerFn
to reference pointerOffTarget
via yet another parameter being added to both of these functions, or, setup an event similar to mouseenter.parallax
which exists in the correct scope. e.g.
'parallax.setPointerFn': function setPointerFn(e, newPointerFn) {
pointerFn = newPointerFn;
}
... and then call that event. I can setup a PR to address that, but that doesn't really address the underlying issues. In my opinion, there should be two major things done here:
- The responsibilities here in the initial jQuery call should be to select the view port first and then pass an option to it with a selection of the layers inside of it, not the other way around (i.e. currently you call the
.parallax
method on a jQuery selection of ALL the layers and then when each layer initializes, it then has to re-reference it's viewport). This also leads to other weird complexities such as the really weird/funky technique of defining options for each layer (e.g. the parallax offset). To make it'd make more sense to define that as a data attribute on each layer or call the parallax plugin (after defined on the viewport), pass a selector for the layer whose attributes/options you want to change and then the name/value pair of the attributes. - The maintenance of state should use objects with properties and methods on those objects instead of defining functions inside of a particular scope and then having to add parameters and pass these functions as parameters to other functions and etc. May as well just go OOP instead of passing pointers/references around.
I will submit a PR with my event-based hack/fix since I don't have time to rebuild/refactor this for a good PoC for items 1 and 2 outlined above.
from jparallax.
See PR #92 which provides a fix for anyone out there seeing this issue.
from jparallax.
I am trying to find a workaround for this too.
from jparallax.
I had a very hard time getting this to work. But since parallax is just a cosmetic feature of a site I am working on I concluded with a NASTY hack to get this to work. Basically it is this: setInterval(function(){ $('body').trigger('mouseenter'); }, 1000);
. Every second we trigger the mouseenter
event. This keeps the decay alive. Hope this helps somebody else until a more elegant solution can be found.
from jparallax.
Also, by the way, I think making this more object-centric offers the opportunity to make the idling a bit more efficient, since I notice that once the target is reached and pointerOnTarget
is called, the timer is still running which is still eating some CPU and (apparently) GPU.
GPU graph (from process explorer)
Here you'll see the first spike which is the actual animation while the mouse is moving. In the middle of that first plateau the mouse stops moving and the animation decays to a resting point. The resting point is that middle plateau. Finally, I move the mouse out of the view port, which causes that last spike/plateau, at which point the timer stops completely, no longer eating up the GPU/CPU.
from jparallax.
I've actually simplified this further and refactored to followPointer
by removing the need for a separate set of on/off frame animation functions. Now it's just one main function which then terminates after a delay (on mouseleave
).
What do you think @stephband? Also I setup touch compatibility in PR #91 and a fix for the initialization problems noted in issue #87 in my PR #89. I mention my other PR's since they would be affected by the PR #92 fixing this issue (i.e. no longer calling abstract reference pointerFn
but instead concrete followPointer
function). So the full list is:
- #89: Init issues. Animations not starting until you re-enter window, relates to #69 & #87.
- #91: New touch compatibility
- #92: Fix decay + idle CPU/GPU issues
from jparallax.
Related Issues (20)
- It don't starts untill i take my mouse out of the window and turn back HOT 18
- Start at the center HOT 11
- xorigin not working right HOT 1
- Png white border ?
- [enhancement] Add missing bower.json. HOT 1
- JQuery version?
- minified version does not work HOT 3
- Does Not Work With jQuery.nicescroll
- Various changes (notably translate() )
- demo images are broken HOT 1
- Chrome/Opera and retina display
- Where is the license file HOT 1
- Parallax kicks out some images after iniciation HOT 1
- parallax-layer: top is always 100% HOT 1
- jparallax can't handle window resizing HOT 1
- Problem when mouse enter the first time into the parallax or on first mouse move HOT 4
- Add touch event listeners.
- Help is needed! Ignoring the Y axis (yparallax) HOT 1
- Uncaught TypeError: d.event.handle is undefined with jQuery 3.7 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jparallax.