Manipulate image position with touchmove event using CSS3 transformations on an iPad

Question

Manipulate image position with touchmove event using CSS3 transformations on an iPad

Looking to adjust the position of an image on my iPad3, but running into some difficulties.

The movement isn't as smooth as desired and seems to lag behind the gestures being made.

This is what I have so far (a 3MB base64 image)

<img src="data:image/jpeg;base64,/9j/4AAQ....">

CSS:

img {
    transform: translate3d(0,0,0);
}

And here's the JavaScript:

img.on('touchstart', function (e) {
     var diffX = e.pageX;
     var diffY = e.pageY;
     img.on('touchmove', function (e) {
         translateX  += e.pageX - diffX;   
         translateY += e.pageY - diffY; 

         img.css({'-webkit-transform': 'translate(' + translateX + 'px, ' + translateY + 'px)'});

         diffX = e.pageX;
         diffY = e.pageY;

     });             
     return false;
})
...

This setup works well on my laptop, however, not on my iPad3. I've also experimented with requestAnimationFrame, but it only updates once I stop moving. Any suggestions for improving performance on my iPad?

javascript performance ipad css transform

Answer 1

Answer №1

Most of the mathematical calculations are performed outside of the touchmove function in this code snippet. It directly sets the webkittransform without going through a lengthy jQuery CSS function. Additionally, it utilizes the 3D transition feature which may not be effectively implemented by simply adding translate3d in the CSS file for iOS7.

var sx, sy, cx=0, cy=0, img=document.images[0];
img.addEventListener('touchstart', ts, false);
img.addEventListener('touchmove', tm, false);
img.addEventListener('touchend', te, false);

function ts(e){
 e.preventDefault();
 sx = e.pageX - cx;
 sy = e.pageY - cy;
}

function tm(e){
 this.style.webkitTransform = 'translate3d(' + (e.pageX - sx) + 'px,' + (e.pageY - sy) + 'px,0)';
}

function te(e){
 cx = e.pageX - sx;
 cy = e.pageY - sy;
}

In addition, even if you own an iPad 3, it may struggle to handle large images. To optimize performance, consider enclosing everything within a div element with overflow:hidden property set.

div {
 width:400px; /*consider trying 100%*/
 height:400px; /*consider trying 100%*/
 overflow:hidden;
}

For a mouse move example (similar to touch), you can refer to this JSFiddle demo: http://jsfiddle.net/AtBUh/

Answer 2

Most of the mathematical calculations are performed outside of the touchmove function in this code snippet. It directly sets the webkittransform without going through a lengthy jQuery CSS function. Additionally, it utilizes the 3D transition feature which may not be effectively implemented by simply adding translate3d in the CSS file for iOS7.

var sx, sy, cx=0, cy=0, img=document.images[0];
img.addEventListener('touchstart', ts, false);
img.addEventListener('touchmove', tm, false);
img.addEventListener('touchend', te, false);

function ts(e){
 e.preventDefault();
 sx = e.pageX - cx;
 sy = e.pageY - cy;
}

function tm(e){
 this.style.webkitTransform = 'translate3d(' + (e.pageX - sx) + 'px,' + (e.pageY - sy) + 'px,0)';
}

function te(e){
 cx = e.pageX - sx;
 cy = e.pageY - sy;
}

In addition, even if you own an iPad 3, it may struggle to handle large images. To optimize performance, consider enclosing everything within a div element with overflow:hidden property set.

div {
 width:400px; /*consider trying 100%*/
 height:400px; /*consider trying 100%*/
 overflow:hidden;
}

For a mouse move example (similar to touch), you can refer to this JSFiddle demo: http://jsfiddle.net/AtBUh/

Manipulate image position with touchmove event using CSS3 transformations on an iPad

Answer №1

Similar questions

In what way does Google+ make their logo come to life on the left side of the navigation bar when the scrollbar is minimized?

Changing the background color of a PHP input based on the webpage being viewed - here's how!

Increase the value of a property within an array of objects based on certain conditions

Remove elements from an array in Typescript if they are not present in a nested array

Foundation 5.2.2: Creating a Dropdown Menu

Refreshing CSS styles following adding content with jQuery

clear JavaScript array of elements

What makes CSS Overflow: hidden toggle from working initially to suddenly not working?

Dynamically populate an HTML table/grid in CRM 9 with data retrieved from JavaScript records

What is the technique for anchoring elements at the top of the page when scrolling?

Updating the Ajax Url dynamically while scrolling

Utilize JavaScript to execute postback calls

In the realm of ASP.NET, the Razor FormExtensions.BeginForm Method holds the

Create a dialog box with rounded triangle corners

Issue with focus transition animation not functioning properly when unfocusing an HTML input field

Unable to deactivate button within component using setState is ineffective

"Efficiently incorporating a responsive sprite background image on your website -

Using Angular JS, filter the ng-repeat to only display items that have a specific property

The additional cost associated with using a React hook is called the "

Could use some help with configuring express routes with parameters