Git Product home page Git Product logo

Comments (18)

stephband avatar stephband commented on June 11, 2024 2

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.

from jparallax.

Grawl avatar Grawl commented on June 11, 2024 1

Solved this problem with just this:

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

#70

from jparallax.

Warface avatar Warface commented on June 11, 2024 1

@Grawl solution fixed it for me

from jparallax.

patricknelson avatar patricknelson commented on June 11, 2024 1

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 πŸ˜„

from jparallax.

macnaked avatar macnaked commented on June 11, 2024

I have the same problem

from jparallax.

andrescas4 avatar andrescas4 commented on June 11, 2024

Same here

from jparallax.

rotemx avatar rotemx commented on June 11, 2024

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' });
}

from jparallax.

macnaked avatar macnaked commented on June 11, 2024

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

from jparallax.

rotemx avatar rotemx commented on June 11, 2024

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)

from jparallax.

zsitro avatar zsitro commented on June 11, 2024

+1

from jparallax.

wangwailok avatar wangwailok commented on June 11, 2024

+1

from jparallax.

LenaicTerrier avatar LenaicTerrier commented on June 11, 2024

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.

from jparallax.

 avatar commented on June 11, 2024

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});
  });

from jparallax.

patricknelson avatar patricknelson commented on June 11, 2024

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.

from jparallax.

twohouse avatar twohouse commented on June 11, 2024

from jparallax.

niccolomineo avatar niccolomineo commented on June 11, 2024

What happened to this?

from jparallax.

Grawl avatar Grawl commented on June 11, 2024

F

from jparallax.

patricknelson avatar patricknelson commented on June 11, 2024

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).

from jparallax.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.