Link to home
Start Free TrialLog in
Avatar of dreamingmethods
dreamingmethods

asked on

jQuery zLayers and ipad/tablet touch commands

I am creating a web app which includes some scenes built with the beta/prototype version of jQuery zLayers, a free plugin that can be seen here http://www.devinrolsen.com/jquery-zlayers-parallax-plugin/

I would like my web app to work on touch screen devices as well as desktop computers.

The beta version of the plugin includes touch/swipe commands that work on iPad - ie, you can swipe your fingers over a zLayers 'scene' and the parallax effect works quite well. However, I would like to try and get the parallax to work *on a single touch* rather than your finger having to smear across the screen.

Does anyone have any idea how I could do this? I have made some modifications to the plugin and combined with the jQuery 'easing' commands to make the parallax 'drift' to your current mouse position - so this code is slightly different from that on the author's website -

/**
* jQuery.zLayer.full v0.3-BETA plugin
* Copyright (c) 2010 Devin R. Olsen
* Date: 01/09/2011
*
* Project Home:
* http://www.devinrolsen.com/jquery-zlayers-plugin/
*/
$.fn.extend({  
      zlayer: function(options){
            var defaults = {  
                   canvas: document,
                   confine:'',
                   force:'push',
                   mass:20,
                   ease:{
                         rate:500,
                         method:'easeOut'
                   },
                   rest:{
                         rate:500,
                         method:null
                   }
            },
            option =  $.extend(defaults, options),
            o = option,
            obj = $(this),            
            r = true;
            
            return this.each(function() {
                  $(o.canvas).bind({
                        mousemove: function(e){
                              if(r === true){
                                  obj.stop().animate({
                                          top:cal(e.pageY - obj.offset().top - obj.height() / 2,'y'),
                                          left:cal(e.pageX - obj.offset().left - obj.width() / 2,'x')                              
                                    },{
                                          queue:false,
                                          duration:o.ease.rate,
                                          easing:o.ease.method
                                    },0);
                              }
                        },
                        mouseleave:function(){
                              if(o.rest.method || r !== false){
                                    r = false;
                                    obj.stop().animate({
                                          top:0,
                                          left:0
                                    },{
                                          duration:o.rest.rate,
                                          easing:o.rest.method,
                                          complete:function(){
                                                r = true;
                                          }
                                    },0);
                              }                  
                        },
                        touchmove: function(e){
                            var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
                              x = touch.pageX - $(this).offset().left,
                              y = touch.pageY - $(this).offset().top;
                              if(x > 0 && y > 0 && (x < $(this).width()) && (y < $(this).height())){
                                    obj.css({
                                          left:cal(x - $(this).width() / 2,'x'),
                                          top:cal(y - $(this).height() / 2,'y')
                                    });
                                    r = false;
                              }                  
                              e.preventDefault();
                        }
                
                  });
            });




            function cal(v,a){
            v = (o.confine === a)? 0 : (o.force === 'pull')?
                  v / o.mass :  -v / o.mass ;
            return v+'px';            
            }
      }
});

Many thanks in advance for any input or ideas.

Andy

Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Did you consider leaving a message on his site?
Avatar of dreamingmethods
dreamingmethods

ASKER

Yes I did. He hasn't responded to any messages since 2010 so I assume he has abandoned the code or is not willing to develop it or support it further.

I assume the touchmove: function() needs changing or adapting somehow, I just wondered if anyone had any ideas. There are other z-layering jQuery plugins, but this one seems to be the fastest and best IMO.
Did you try changing
   touchmove: function(e){
to
   touch: function(e){

or

   click: function(e){
Yes I have tried this - both commands - and although they have a response when you first touch the screen - ie, the parallax effect moves as it should - they then do not respond to further touches, so the entire 'scene' remains static/frozen. So, they work one time, but not any subsequent times.

Thanks though. Any other ideas? Could the function itself be further modified?
I would love to be able to help

I just got my iPad so I will need to first figure out how to debug...
Great, thank you. Debugging is in Settings > Safari > Debug Console (on or off)

I think a lot of people would be really excited if this got working - parallax via web app on iPad is something I have not seen achieved yet - although it's very common in native apps.

Do you want the URL of the web page I am putting together to test it?

Ok, that would be cool

If you don't want to publish it here, you can send it via the links in my profile
No worries about posting it here. I will be changing the URL anyway soon.

This is a project that mixes video with text and uses the parallax effect to give a slight illusion of depth/atmosphere. Best viewed in Chrome at the moment.

http://www.digitalfiction.co.uk/parallax/

Many thanks for your interest and help.
So now, when you touchmove it shifts but you want the page to shake when just touched, right?
Yes at the moment you can smear your finger around the screen and the effect works (although it's very juddery on an iPad1), but I wondered if it might be better if it worked by having single touches which move the parallax to that spot - as it were.

So, if this was on desktop, the equivalent of no parallax effect at all until you pointed your mouse cursor and clicked on part of the image/environment. Then all the layers in the scene would move accordingly to that place. I think this may be a better interface method for this work when run on a touch device...?
Using my iPad I for sure prefer the parallax effect on touch move than on touch
Really? OK cool - maybe I should leave it as it is then. Do you have an iPad2? I haven't yet seen it on iPad2 which has a faster processor. Does it work smoothly?
Do you have any other ideas how I could improve this effect programming wise or do you think I should leave it with this functionality? Sorry, just value your opinion :)
ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial