SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Sep 2009
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Loading animations between pages

    Can anyone explain to me the principles of how loading animations that occur between loading pages work?

    Any example is http://www.field.io . The logo "field" animates with shifting colors when you direct yourself to a new page. As you can see it's also built in WP (pretty impressive in my opinion).

    So can anyone tell me the underlying concepts involved? I'm prepared to the reading I need to do to figure out the details.

    Thanks in advance.

  2. #2
    SitePoint Addict deadmix's Avatar
    Join Date
    Jun 2009
    Location
    france
    Posts
    210
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    hello there,

    That is called SVG animation, Here is the technique used on your Example With Full Tutorial : Link

    Goodluck

  3. #3
    SitePoint Addict
    Join Date
    Sep 2009
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I gathered that it may be an SVG animation, although I'm unfamiliar with dealing with the subject. However my question is not "how do you do an animation". My question is how to do you make something (like an animation) occur when you're loading a new page? It's basically a loading animation.



    Quote Originally Posted by deadmix View Post
    hello there,

    That is called SVG animation, Here is the technique used on your Example With Full Tutorial : Link

    Goodluck

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Oct 2001
    Location
    Vancouver BC Canada
    Posts
    2,033
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rpeg View Post
    Well, I gathered that it may be an SVG animation, although I'm unfamiliar with dealing with the subject. However my question is not "how do you do an animation". My question is how to do you make something (like an animation) occur when you're loading a new page? It's basically a loading animation.
    Coincidentally, I did something like this the other day because a report I was running was taking a few seconds to render and I wanted it to look like something was happening while the page was loading. You can do it with any effect you like. It's even easier now that we have libraries like jQuery around.

    What I did was attach a behaviour to my links so that when a link was clicked the effect was initiated. In my case I darkened the screen and put one of those loading spinners in the center of the page. You could do the same thing for the navigation of a site like the one in your example by running:

    * The code below requires jQuery and the navigation is in a container with id="primary-nav"

    HTML Code:
    <script>
    jQuery('#primary-nav a').click(function() {
        // Your animation starts here
    });
    </script>
    Andrew Wasson | www.lunadesign.org
    Principal / Internet Development

  5. #5
    SitePoint Addict deadmix's Avatar
    Join Date
    Jun 2009
    Location
    france
    Posts
    210
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    He just set a Time Load, and see, the Header is position: fixed; Plus a Transition duration property.. which gave this Animation loading!

  6. #6
    SitePoint Addict
    Join Date
    Sep 2009
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, thanks.

    Quote Originally Posted by deadmix View Post
    He just set a Time Load, and see, the Header is position: fixed; Plus a Transition duration property.. which gave this Animation loading!

  7. #7
    SitePoint Addict
    Join Date
    Sep 2009
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deadmix View Post
    He just set a Time Load, and see, the Header is position: fixed; Plus a Transition duration property.. which gave this Animation loading!

    What do you mean by "Time load" though? Is that related to the CSS? I just noticed something like this in the JS relating to loading this animation:

    Code:
    e('<div class="loader"></div>').hide().prependTo("#logo, #mobile-logo").fadeIn(100), e(".loader").append("<div>" + n + "</div>"), setTimeout(function ()


Tags for this Thread

Bookmarks

Posting Permissions

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