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.

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

[teonhub]

  21.09.2017, 16:01, "Warface" <notifications@github.com>:@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.