Results 1 to 6 of 6

Thread: Fit animation in Screen

  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    4

    Default Fit animation in Screen

    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

  2. #2
    Sencha User arnebech's Avatar
    Join Date
    Jun 2010
    Posts
    498

    Default

    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
    Code:
    #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.

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    35

    Default

    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

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    4

    Default

    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.

  5. #5
    Sencha User arnebech's Avatar
    Join Date
    Jun 2010
    Posts
    498

    Default

    I3D,
    You could try with some javascript

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

  6. #6

    Default

    Quote Originally Posted by arnebech View Post
    I3D,
    You could try with some javascript

    something like
    Code:
    var scaleFactor = browserWidth / animationWidth;
    animationElement.style.webkitTransform = "scale("+scaleFactor+")";
    How would you use this Javascript?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •