Results 1 to 2 of 2

Thread: reveal content similar to masking

  1. #1
    Sencha User
    Join Date
    Aug 2013
    Location
    New York
    Posts
    19

    Default reveal content similar to masking

    Hey, I've asked how to use masking before, but inside sencha there is a cross-hair on the container. a colleague of mine has used this to reveal content, such as an image. the problem is that you can only reveal from the top down. is there a way to reveal from the bottom to the top, or left to right, or right to left?
    Capture.PNG

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Posts
    304

    Default

    Hi,

    There are 2 ways to resize an object in Animator:

    1. applying transformation (dragging left/top/bottom/right handles) - this will scale the dimensions with a percentage, including everything nested within the object that is being scaled.

    2. changing the pixel dimensions of the object (using the tool in your screenshot) - this will change x and y dimensions in the pixel of the object, but it will not affect other objects nested within it.

    You can create a rudimentary mask effect if you make a regular div object (rectangle tool) and set the background to be an image. Then by resizing its pixel size (the tool in your screenshot), and adjusting Background->Position, you can mask the object, and position the image in such way so it is not always stuck to the top right corner.

    There is an experimental CSS property for masking that works in webkit based browsers (Chrome and Safari): -webkit-mask. You can add the property to the extra CSS when you select your project under Base-Object -> Other -> Custom CSS or Keyframe -> Other -> Custom CSS. To see how it is used you can take a look here: https://developer.mozilla.org/en-US/...S/-webkit-mask

    However it is currently strongly advised against using the -webkit-mask property in any consumer-oriented work as it's highly experimental and it is not supported in majority of the browsers - this means, it will not render in Firefox, Opera and IE. This is also the reason why masking is currently not a feature in Animator.

Posting Permissions

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