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.changedTou ches[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
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]
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
Did you consider leaving a message on his site?
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.
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){
touchmove: function(e){
to
touch: function(e){
or
click: function(e){
ASKER
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?
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...
I just got my iPad so I will need to first figure out how to debug...
ASKER
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?
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
If you don't want to publish it here, you can send it via the links in my profile
ASKER
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.
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?
ASKER
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...?
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
ASKER
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?
ASKER
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.