It don't starts untill i take my mouse out of the window and turn back

[felipedc]

When the page loads my js performs a series of animations and triggers the parallax at the end but the parallax effect only starts when i move my mouse out of the window and turn back again.

the parallax effect is inside a function...

ativaParallax: function(){
    $('.parallax-layer').parallax(
        {mouseport: jQuery('header'), decay:0}, //configurações gerais
        {xparallax:'10px', yparallax:'4px', xorigin:0.5, yorigin:0}, //logo
        {xparallax:'25px', yparallax:'10px', xorigin:0.35, yorigin:0.48}, //torcedores
        {xparallax:'50px', yparallax:'20px', xorigin:0.55, yorigin:0.60}, //torcedor
        {xparallax:'80px', yparallax:'40px', xorigin:0.55, yorigin:0.69} //mesa
    );
}

Wich is called at the callback of an animate event...

mostraCallToAction: function(){
    $('.resg-ing').animate({top:'91px', opacity:1}, 500, 'easeOutQuart', function(){ home.ativaParallax(); });
},

Did anyone get this problem?

[macnaked]

I have the same problem

[andrescas4]

Same here

[rotemx]

the problem is that the plugin is loading before the document has finished loading.
a possible solution that worked for me is to call it on window.onload.

example :

$(document).ready(function () {
window.onload = initParralax();
});

function initParralax() {
$('.parallax-layer').parallax({ yparallax: '0.3', xparallax: '0.15' });
}

[macnaked]

I tried to call $('.parallax-layer').parallax() on window load (as described above) but it didn't work

[rotemx]

that worked for me, try to call that script at the end of the index.html file...maybe that would help (this is how i do it and it works)

[zsitro]

+1

[wangwailok]

+1

[Grawl]

Solved this problem with just this:

$(document).ready(function () {
    $('.js-parallax').mouseenter();
});

#70

[LenaicTerrier]

For more precise positioning, follow the mouseenter by a mousemove trigger.

$('.your-mouseport-element')
  .trigger({type: "mouseenter", pageX: 0, pageY: 0})
  .trigger({type: "mousemove", pageX: 0, pageY: 0});

Replace both pageX and pageY value of mousemove to the coordinates you want jparallax to think the mouse is. Leave both value of mousenter at 0.

I've tested a bit since I'm working on a project that use jparallax, and it's seems to be consistent.

[ghost]

Iam not that experienced when it comes to jQuery. The centering still doesnt work for me. Can someone help me out? here is my code:

 jQuery(document).ready(function(){
 // Set up parallax layers
 jQuery(".viewport-h>img").parallax(
  { mouseport: jQuery("body") },            // Options
  { xparallax: '160px',  yparallax: '160px' },    // Layer 1
  { xparallax: '140px',  yparallax: '140px' },    // Layer 2
  { xparallax: '120px',  yparallax: '120px' },    // Layer 3
  { xparallax: '100px',  yparallax: '100px' },    // Layer 4
  { xparallax: '80px',   yparallax: '80px' },     // Layer 5
  { xparallax: '60px',   yparallax: '60px' },     // Layer 6
  { xparallax: '40px',   yparallax: '40px' },     // Layer 7
  { xparallax: '20px',   yparallax: '20px' }      // Layer 8
      );
  $('body')
   .trigger({type: "mouseenter", pageX: 0, pageY: 0})
   .trigger({type: "mousemove", pageX: 0, pageY: 0});
  });

[patricknelson]

This may be related to #87. I think it's a more fundamental issue relating to just not properly initializing it's position with a default mouse position (i.e. vertically in the middle) and then registering the fact that you're already hovering and thus triggering an animation/decay to that new position (from the default init position).

Anyway, I think #87 is a duplicate of this issue and I've already setup a PR to address that other issue. See PR #89 which uses the following code at the bottom of the plugin's jQuery initialization:

            // Initialize this layer at the defined x/y origins now. Subsequent calls to this "pointerFn" will happen
            // via the Timer class in repeated calls to the frame() function as the mouse either enter/leaves the
            // viewport (a.k.a. "mouseport").
            pointerFn(
                // Pointer relative position (0 to 1), x and y. Usually in the middle (i.e. 0.5, 0.5)
                [options.xorigin, options.yorigin],
                [0, 0],          // Pointer relative position we're trying to animate to (0 to 1), x and y.
                port.threshold,
                0,               // Decay, which we want to override so we initialize immediately.
                parallax,
                targetFn,
                updateCss
            );

            // Also if the mouse happens to already be over the viewport, trigger an initial "mouseenter" now (since
            // otherwise user would need to move mouse completely out of the viewport and then back in, in order to
            // initialize the effect when it should already be started).
            if (elem.is(':hover')) elem.mouseenter();

Importantly, the pointerFn call sets initial position and the check on .is(':hover') looks to see if your mouse is already over the view port and starts gravitating to your current mouse position.

[Warface]

@Grawl solution fixed it for me

[twohouse]

  21.09.2017, 16:01, "Warface" <[email protected]>:@Grawl solution fixed it for me—You are receiving this because you are subscribed to this thread.Reply to this email directly, view it on GitHub, or mute the thread. 

[patricknelson]

Wow, I'm actually pretty surprised this has sat for so long... there are already PR's waiting to be merged to address this issue (details above and in issue #87) and folks are still coming back to this 😔. See PR #89. I've also got a few other fixes/features also waiting and mentioned in a comment here (including GPU load issues and new touch compatibility).

Unfortunately the last PR merge (or even commit to master) by @stephband was waaaay back in 2014, almost 4 years ago now completely untouched. @stephband I'd be happy to take over this repository and maintain it for you, since I've contributed some fixes so I could use it in production (which I still am now).

EDIT: I've also reached out here, we'll see what happens so we can get this repo going again 😄

[niccolomineo]

What happened to this?

[Grawl]

F

[patricknelson]

It seems @stephband is "checked out" from this repository, if you will 😂 He's alive and active on Twitter but has decided to no longer pay attention to this repository, it seems. Sucks, since I've done an in-depth analysis/fix to a bug that spans a few tickets (see above) but nobody will benefit from them moving forward without a new official fork or maintainer.

@Grawl I see you in a few spots in this repo... I feel like you or I should be made the maintainer (I just don't need the extra work).

[stephband]

Hello.

The truth is I haven't touched it because I haven't had any call to use it myself for years, and I dropped jQuery from my own stack some years ago.

At this point. I'm in favour of adding a maintainer, it's a good idea.