Parallax component floater not working correctly

[simplemama]

Note: I do not know if this commit (https://github.com/bearded-avenger/aesop-core/commit/c178abd5a776629f02c15df6229f2ad5e95f5d71) fixes all the issues I referenced below. Please read over and close if necessary.

I've done various tests with the parallax component, using a floater, that is all text.

It seems that floaterposition = center isn't working at all (it behaves like "left"). I've also noticed varying behaviors with floaterdirection also. Mixing them up (ex: position=left and direction=down) during testing isn't producing expected results for me. I recommend checking the elements together one by one to see if something is off (you certainly know the behavior much better than I!).

Code I started out with and tweaked:

[aesop_parallax img="http://playground.aesopstories.com/wp-content/uploads/sites/2/2013/12/2048.jpg" height="500" parallaxbg="on" parallaxspeed="0.1" floater="on" floatermedia="Text Text Text Text Text Text Text Text" floaterposition="center" floateroffset="-170px" floaterdirection="up" lightbox="off"]

Related github issue: bearded-avenger/aesop-core#84

Related forum post: http://aesopstoryengine.com/topic/parallex-floater-position-problem/

[bearded-avenger]

This has been over-hauled in 1.1 and the center position fixed.

The floater element will now always start 100px from the top of the story component that it's in. Passing 0 as an offset, will always start the the component at the top of the story component that it's in. The floater and parallax stuff no longer travels when out of view, so only start animating when in view.

[TheAnarchyState]

Can the offset still be set for each individual parallax? The option is no longer shown when inserting the component. I just tried aligning some floater text on the left, travelling to the right, however it started off-screen and only came fully into view just before it was off the page. I tried adding in "floateroffset" to the component in text view and trying various numbers, but it didn't make any different.

[bearded-avenger]

The offset is automatically calculated so it's no longer required to be set. The top of the floater element will now always consistently hit the top of the parallax component when the component meets the top of the screen, no matter the location of the component on the page, or the size of the floater element, or how many components there are on one page.

You can control the final position of the floater item (that very term of course varies, do you consider the final resting position to be the top of the screen for example?) by giving it some top through custom css since the item is absolutely positioned. Here's an example:

.aesop-parallax-sc-floater {
   top:100px;
}

What this will do, is it will automatically start the floater item 100px from the top of the component.

Or if you're using text as you mentioned above, you could give it a height and some padding which would then alter the final resting position of the element. We may introduce an option to control the final resting position, but again it's pretty easily done with some custom css depending on the media that you use.

If all of this is confusing, I recorded a quick screencast to explain how the changes work.

https://www.youtube.com/watch?v=WyKF9IEDppk