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

dreamingmethodsAsked:
Who is Participating?
 
Michel PlungjanIT ExpertCommented:
I have the iPad 2 and the effect is great. Very spooky on a web site. I'd leave it as is unless we can find a clever way to shake when we want - for example on the link. I did not yet get time to look at this for me new event
0
 
Michel PlungjanIT ExpertCommented:
Did you consider leaving a message on his site?
0
 
dreamingmethodsAuthor Commented:
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.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Michel PlungjanIT ExpertCommented:
Did you try changing
   touchmove: function(e){
to
   touch: function(e){

or

   click: function(e){
0
 
dreamingmethodsAuthor Commented:
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?
0
 
Michel PlungjanIT ExpertCommented:
I would love to be able to help

I just got my iPad so I will need to first figure out how to debug...
0
 
dreamingmethodsAuthor Commented:
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?

0
 
Michel PlungjanIT ExpertCommented:
Ok, that would be cool

If you don't want to publish it here, you can send it via the links in my profile
0
 
dreamingmethodsAuthor Commented:
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.
0
 
Michel PlungjanIT ExpertCommented:
So now, when you touchmove it shifts but you want the page to shake when just touched, right?
0
 
dreamingmethodsAuthor Commented:
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...?
0
 
Michel PlungjanIT ExpertCommented:
Using my iPad I for sure prefer the parallax effect on touch move than on touch
0
 
dreamingmethodsAuthor Commented:
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?
0
 
dreamingmethodsAuthor Commented:
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 :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.