PDA

View Full Version : Fit animation in Screen



ioquai
24 Nov 2011, 1:04 AM
Hello,

I did an animation for the iPad screen size as an intro for a simple web app / mobile optimized page.
Now, I would like to use the same animation for smaller devices as well.
But I don't know how to shrink the animation size.
<meta name="viewport" content="width=device-with" user-scalable=no,initial-scale=1, maximum-scale=1, minimum-scale=1 />
just works for the web page content but not for the intro itself.
So far, I set content="width=1024" and change the viewport after the animation has ended. But this seems not to be a proper solution.
Maybe the fit-Parameter in the configData can help? But I didn't find any instruction for that..

Thanks for any help.
Franziska

arnebech
28 Nov 2011, 8:08 AM
The animation size is set in the project. The meta tag allows you to set the webpage width to fit the animation width.

If you wanted to scale the animation you could try something like this

CSS


#AN-sObj-parentOl {
height: 248px;
width: 300px;
-webkit-transform: scale(0.4);
-webkit-transform-origin: 0 0;
}


where height and width is the original dimensions of your animation.

I3D
28 Nov 2011, 4:59 PM
Here's a touch question, working from the code provided, which works great. how can I apply a scaling factor to match the browser width regardless of the target device? so for instance, on iPhone it will be 480 width in portrait and in a regular browser that will fit accordingly everything?

Cheers

ioquai
29 Nov 2011, 1:28 AM
I tried the webkit-transform-scaling already.
But it just work on iOS-Devices, not on Android phones. Seems like the meta tag is the only way.

arnebech
29 Nov 2011, 7:24 AM
I3D,
You could try with some javascript

something like


var scaleFactor = browserWidth / animationWidth;
animationElement.style.webkitTransform = "scale("+scaleFactor+")";

rockinthesixstring
12 Dec 2011, 3:30 PM
I3D,
You could try with some javascript

something like


var scaleFactor = browserWidth / animationWidth;
animationElement.style.webkitTransform = "scale("+scaleFactor+")";


How would you use this Javascript?