search

alumbo / jquery.parallax-scroll

Smooth parallax effect on vertical page scrolling
MIT License
285 stars 77 forks source link

Issue with Jquery3 with multiples data-parallax= #8

Open ghost opened 8 years ago

ghost commented 8 years ago

Hello,

I have some issues with your plugin on the last version of Jquery (3.1.1 minified), it's not possible to use multiple instances like :

<img data-parallax='{"y": 300, "x": -575, "from-scroll": 10, "easing": "easeOutElastic", "duration": 300, "rotateY":360}' data-parallax2='{"y": 600, "x": 400, "from-scroll": 500, "easing": "easeOutElastic", "duration": 300, "rotateY":360}' class="img-responsive center-block" src="images/logo.png" alt="logo" />

I got this error in debug mode :

jQuery.Deferred exception: data is undefined ParallaxScroll._onScroll/<@http://localhost/project/assets/js/parallax.min.js:66:21 .proxy/e@http://localhost/project/assets/js/jquery-3.1.1.min.js:2:3653 .each@http://localhost/project/assets/js/jquery-3.1.1.min.js:2:2813 r.prototype.each@http://localhost/project/assets/js/jquery-3.1.1.min.js:2:1001 ParallaxScroll._onScroll@http://localhost/project/assets/js/parallax.min.js:44:9 ParallaxScroll.init@http://localhost/project/assets/js/parallax.min.js:28:9 @http://localhost/project/assets/js/parallax.min.js:2:5 g/</j@http://localhost/project/assets/js/jquery-3.1.1.min.js:2:29946 g/</k<@http://localhost/project/assets/js/jquery-3.1.1.min.js:2:30262 undefined

Do you have any solution ?

Thank you very much for your work.

Regards,

friizu commented 8 years ago

It works with jquery 2.x not 3.x :(

This is why you get this error with jQuery 3.x https://jquery.com/upgrade-guide/3.0/#breaking-change-special-case-deferred-methods-removed-from-jquery-ajax

ghost commented 8 years ago

Okay, so I using Jquery 2.x right now and tried this code :

<img data-parallax='{"y": 900, "from-scroll": 100, "easing": "easeOutElastic", "duration": 600, "rotateY":360}' data-parallax2='{"x": -575, "from-scroll": 100, "distance": 60}' data-parallax3='{"x": 600, "from-scroll": 1100, "distance": 60}' class="img-responsive center-block" src="images/logo.png" alt="logo" />

I need to scroll down my picture to the left in a first time and move it to the right in a second time, the first and second effects works perfectly but the picture disappear to the left during the third effect, do you have any solution ?

friizu commented 8 years ago

Your code looks a bit mess for me, for example if u wanna move rotating image left when u scroll down 100px and move it back when you scroll up you need smth like:

data-parallax='{"x": -200, "from-scroll": 100, "easing": "easeOutElastic", "duration": 600, "rotateY":360}' data-parallax2='{"x": 200, "from-scroll": 100}'

if u wanna move it left and down same time then just add y as well for same parralax:

data-parallax='{"x": -200, "y": 100, "from-scroll": 100, "easing": "easeOutElastic", "duration": 600, "rotateY":360}' data-parallax2='{"x": 200, "y":-100, "from-scroll": 100}'

ghost commented 8 years ago

I tried just this one :

data-parallax='{"y": 400, "from-scroll": 100, "distance": 0}' data-parallax2='{"y": 600, "from-scroll": 500, "distance": 0}'

I just need to scroll my picture in two times, move it to 400px vertically in a first time and move it to 600px vertically when I scrolled to 500px but it doesn't work correctly, my picture seem to be moved totally outside of the website.