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.

First of all, this is an easy to use and great plugin for achieving parallax effects. Kudos to you! I'm still having an issue that resembles issue #50. When scrolling, the content at the top of the page jumps down. I've updated the plugin with the latest js but the problem is still there.

Great plugin, very easy to use however I am having an issue where the values end up being wrong when the window is re-sized. This is due to the size of containers and objects changing due to media query breakpoints. So I need to re-calculate the transforms on window resize. Is there a destroy/re-calc function?

Can you suggest a way to have a different data-paroller-factor on smaller screens than on desktop? I am using paroller to add parallax to text, and on smaller screens this creates issues. I'd like a desktop data-paroller-factor of -0.35 but on mobile either 0 or closer to 0. Not sure how to do this. Thanks for any ideas you can suggest!

When I apply paroller to an element and I'd like to have a default behavior/factor, I can't override that default with breakpoint-specific factors (e.g. factorMd, factorXs).

Javascript:

$("#annoncer-screen").paroller({ factor: 0.3, factorMd: 0, type: 'foreground', direction: 'vertical' });

SCSS:

#annoncer-screen {
    width: 116.667vw;
    overflow: visible;
    z-index: 5;
    position: relative;
    left:8.333vw;
    img {
        width: 100%;
        transform: rotate(10deg);
        box-shadow: 0.5rem 4rem 4rem -1rem rgba(45, 62, 80, 0.6), 1rem 1rem 2.5rem 0rem rgba(0, 0, 0, 0.7);
    }
}
@media (min-width: 1024px) {
    #annoncer-screen {
        position: absolute;
        width: 1000px;
        left: 8.333vw;
    }
}

The breakpoint-specific values seem to work, as long as I do not set the 'default' factor value. In the code example above, factorMd seems to be overwritten or ignored when scrolling. This seems to happen regardless of:

• Factor value (I tried 0, a positive value and a negative value)
• Positioning of the Paroller'd element (I've tried setting both to position: absolute, as well as the styling above)

Is this intended behavior? If so, how could I have a specific value for factorMd, which having a 'default' factor value for anything above that breakpoint?

If I reload / visit a page and I'm at the very top, the elements that have Paroller applied to them are positioned where they're intended to be, however, when I start to scroll, they jump down from where they're intended to be, but the parallax effect works fine.

However, if I scroll down the page just a little bit from the top, and reload the page, the elements are positioned lower than where they're intended to be. As I start to scroll, they don't jump down, they just work as the parallax effect.

Any idea what's going on? Maybe Paroller isn't being initiated at the load of a new page?

Thanks in advance for your help!

Great plugin, however, I have a little issue and all my tries to solve it went with the wind.

I have a fullscreen hero section with a line of text centered vertically and horizontally, and I want the text to have vertical parallax animation on scroll.

The problem is when I apply paroller on the text (using data attributes) it's not centered anymore when page scroll = 0. It has a little bit of initial translate transform up or down depending on the direction I set. I can understand this is useful when applying paroller on an element in the middle of the page, but when it applied to an element in the first section (like hero section in my case) this initial transform will break the layout. The text element should be in its original place, then it moves slowly on scroll.

I tried to play with the calculations in the code but had no luck. If someone can give an advice I will appreciate it.

Regards

Hey, first thanks for the awesome plugin. It would be nice if the plugin supports npm. The other thing is, that the horizontal parallax isn't working on mobile. Cheers.

Hi, I'm having some trouble with the plugin. It does work, I had no problem initiating it etc., however, when I scroll down to a paroller-initiated element (I only use vertically scrolled backgrounds in my project btw) and then refresh the page, the background-position value is wrong at first. It does change to a correct one, right after I scroll the page either up or down, but it happens in a snap and it just looks terrible :(

It's really weird, because I even copied the example from the plugin website and imported the same jquery and plugin versions to check it, and it still snapped after refresh.

Here's a screenshot of background-position before and after scrolling the page down about 80px after refresh:

Hi!

I am hoping to have an element positioned at the top of the page (a Hero Banner) and I want to implement paroller so that its' content parallaxes.

At the moment it seems on page-load paroller kicks in and applies the transform despite not started scrolling yet. For example transform: translateY(-84px);, which causes an unwanted gap.

How is it possible to have transform initiate at 0 or null so that it is only applied when the user starts scrolling.

Thank you and great job

Hey,

I have set up my div like this:

<div class="col-sm-12" id="some-div" data-paroller-factor="0.3" data-paroller-type="foreground" data-paroller-direction="horizontal">
        <div class="row">
            <div class="div-container col-sm-6">
                <img src="<?php echo plugins_url('module/images/'). 'placeholder.jpeg'; ?>" class="img-responsive" />
                <p>TAGLINE</p>
            </div>
        </div>

        <div class="row">
            <div class="div-container col-sm-6 col-sm-offset-6">
                <p>ANOTHER TAGLINE</p>
                <img src="<?php echo plugins_url('module/images/'). 'placeholder.jpeg'; ?>" class="img-resposnive" />
            </div>
        </div>

        <div class="row">
            <div class="div-container col-sm-6">
                <h3>YET ANOTHER TAGLINE</h3>
                <img src="<?php echo plugins_url('module/images/'). 'placeholder.jpeg'; ?>" class="img-responsive" />
            </div>
        </div>
    </div>

And my jQuery:

    //parallax scroll
    $('#some-div').paroller();

    $('.div-container').paroller({
        factor: 0.5,
        factorXs: 0.2,
        type: 'foreground',
        direction: 'horizontal'
    })

my console outputs:

TypeError: $(...).paroller is not a function

What am I doing wrong?

I've checked my element and can see the