Sophomore Dev Projects

  • Increase font size
  • Default font size
  • Decrease font size
Home

Y.Effects.Scale

E-mail Print PDF

This effect changes a node's width and height dimensions and the base for em units. This allows for smooth, automatic relative scaling of elements contained within the scaled element.

Syntax

new Y.Effects.Scale([options]);

Y.one("#node").scale([options]);

Configuration properties

Properties Description
restoreAfterFinish Whether the node should be restored to it's original position, height and width after finishing. (Defaults to false.)
scaleContent Whether the content (usually text) of the node should be scaled as well. (Defaults to true.)
scaleTo As a percentage, how large the node should be scaled when starting the animation. For example, if the scale to parameter is 50, then the node will be scaled to half its original size on start. (Defaults to 100.)
scaleFromCenter Whether the scaling should originate from the center of the node or, if false, from the top left corner of the node. (Defaults to false.)
scaleMode The can be one of three options: "box", "contents" or a given height and width. If "box", then scaling assumes the proportions of the visible area of the node. If "contents", then scaling assumes the proportions of the entire area of the node, without regard for what is visible. Finally, if you want complete control, you may specify the height and width as originalHeight and originalWidth. (Defaults to "box".)
scaleTo As a percentage, how large the scale factor should be. For example, if the scale to parameter is 300, then the node will be scaled to 3 times its original size. (Defaults to 200.)
scaleX Whether the node should be scaled horizontally. (Defaults to true.)
scaleY Whether the node should be scaled vertically. (Defaults to true.)

Notes

None.

Demo

Click me for Demo!

Source code of this demo

  

    <a href="#" id="scale_demo">Click me for Demo!</a>
  
  
  <script type="text/javascript">
    YUI({
      modules: {
        "gallery-effects": {
          fullpath: "http://projects.sophomoredev.com/media/system/js/yui3-gallery/gallery-effects/gallery-effects-min.js",
          requires: ["node", "anim", "async-queue", "base"]
        }
      }
    }).use("gallery-effects", function (Y) {
    
      Y.get("#scale_demo").on("click", function (event) {
        this.scale({ scaleTo: 200 });
        event.halt();
      });
    
    });
  </script>
< Prev   Next >