dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Animating Transformations

Hybrid View

  1. #1
    Join Date
    Apr 2013
    Posts
    21

    Post Animating Transformations

    This is what I'm trying to do: (look at the bottom)
    http://louisremi.github.io/jquery.transform.js/

    This is what I did:
    HTML Code:
    <div id="box">
      <div class="square">prvi</div>
      <div class="square">drugi</div>
      <div class="square" style="z-index: 2">treci</div>
      <div class="square">cetvrti</div>
    </div>
     
     
    <script language="JavaScript" type="text/javascript" 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
     
    <script>
      var transforms = [
      'skewY(-45deg) scale(.66)',
      'translate(20px) skewY(-45deg) scale(.66)',
      'translate(150px,50px) scale(1.5,1)',
      'translate(280px) skewY(45deg) scale(.66)',
      'translate(300px) skewY(45deg) scale(.66)'
        ],
      $squares = $('#box .square').each(function(i) {
          $(this).css({ transform: transforms[i] });
        });
      $('#box').mouseenter(function() {
          $squares.each(function(i) {
            $(this).animate({ '-moz-transform': transforms[i+1] });
          });
        }).mouseleave(function() {
          $squares.each(function(i) {
            $(this).animate({ transform: transforms[i] });
          });
        });
    </script>
    HTML Code:
    #box {
            width: 400px;
            height: 150px;
            position: relative;
    }
     
    .square {
            width: 100px;
            height: 100px;
            margin: 20px 0px;
            position: absolute;
    }
    /*just to see them*/
    .square:nth-child(1) {
            background-color: #0c0;
    }
    .square:nth-child(2) {
            background-color: #0d0;
    }
    .square:nth-child(3) {
            background-color: #5a5;
    }
    .square:nth-child(4) {
            background-color: #087;
    }
    I found out that I can use jquery to make those changes, but not to animate it.
    Is there someone here that can make this work?

  2. #2
    Join Date
    Apr 2013
    Posts
    21
    Anyone?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles