Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1

Thread: Loop

  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool Loop

    I'm currently digging into Metro app development with HTML5/JS. I'd like to imitate the typical tile animation on Metro's home screen.

    I don't manage to get both the peekTile(); and the unpeekTile(); functions executing one after the other in a loop having a timeout of a few seconds between both animations.

    Can anybode help?
    Thanks in advance!


    JS
    Code:
        var page = WinJS.UI.Pages.define("/html/updateTile.html", {
            ready: function (element, options) {
                peekTile();
                unpeekTile();
            }
        });
    
    
        // Play the Peek animation - downwards
        function peekTile() {
            var peekAnimation = WinJS.UI.Animation.createPeekAnimation([tile1, tile2]);
    
            // Reposition tiles to their desired post-animation position
            tile1.style.top = "-150px";
            tile2.style.top = "-150px";
    
            peekAnimation.execute();
        }
    
        // Play the peek anmation - upwards
        function unpeekTile() {
            var peekAnimation = WinJS.UI.Animation.createPeekAnimation([tile1, tile2]);
    
            // Reposition tiles to their desired post-animation position
            tile1.style.top = "0px";
            tile2.style.top = "0px";
    
            peekAnimation.execute();
        }

    HTML
    Code:
            <div id="croppingDiv">
                <div id="tile1">Content 1</div>
                <div id="tile2">Content 2</div> 
            </div>

    CSS
    Code:
    #croppingDiv {
        width: 310px; 
        height: 150px; 
        overflow: hidden;
    }
    
    #tile1,
    #tile 2 {
        width: 310px;
        height: 150px;
        position: relative;
    }

    (Here's an example of the animation: http://www.drewgreenwell.com/project...leBasicExample - the first one under "Basic Examples" – but I don't want to use the jQuery script, I'd like to use the predefined WinJS.UI.Animation.createPeekAnimation by Windows.)
    Last edited by Jackjackjack; 06-29-2012 at 02:35 PM.


 

Posting Permissions

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