Results 1 to 7 of 7

Thread: Is it possibile to animate elements positioning?

  1. #1
    Join Date
    Jan 2013

    Question Is it possibile to animate elements positioning?

    First of all, happy easter.

    I'm searching for a method that make browser window reziing cooler! We know that in fluid layouts when a resize occours, the page's elements is automatically positioned accordin to the new dimension. However the transition is "crude", instantaneous, while i want to make thi passage "softly", apply some simple transition effects to the elment that are re-positionated.
    For rent the idea, imagine the Metro layout of Windows 8 and the animation that you see when do you manage columned apps

    Is it possibile something of genre with HTML or CSS or JS ? Maybe this system alreayd have a specific terminology. Suggest me
    Last edited by American horizo; 04-20-2014 at 11:38 PM.

  2. #2
    Join Date
    Mar 2012
    As far as I am aware, there is no such functionality in HTML/CSS. If so, you'd have to implement it yourself in JS, unless someone else already has? Either way, I'd suggest you search JS libraries for what you are looking for...

  3. #3
    Join Date
    Feb 2014
    There's a built-in window.onresize event handler, which you could use in a similar manner as you would use with other window event handlers. For example:

    window.onresize = function() {
       // get the elements you want to animate 
      // move them around!
    Alternatively, you could write your own function and detect when the browser window size changes. If you do, then I would first start by using a window.onload to check the window size and storing that in a variable. You can have a loop continuously going that checks the window size until it changes, however, this may chew up a lot of memory over time.

  4. #4
    Join Date
    Jan 2013
    If there are no native support for this feature in the browser part, i don't want force to realize it throught JS (even considering that i know how to do it), due to performance issues that it may produce.

  5. #5
    Join Date
    Dec 2011
    Centurion, South Africa
    Sounds really fancy if you can get it to work... but I'm thinking that almost nobody would ever see it. Might be a cool trick to pull on devices like the iPad, otherwise I'm sure your typical user doesn't resize their browser window enough to warrant the work.
    JavaScript: Learn | Validate | Compact | bionoid

  6. #6
    Join Date
    Apr 2014
    Using a css/javascript framework like Bootstrap might get you there. Using bootstrap you can define layouts for different browser sizes (extra small, small, medium, large) and you can assign a different grid structure to each one of these layouts. Elements remain relatively stable, only switching when the browser size enters a different tier of your layout scheme. This isn't exactly the effect you're going for, but it would be a good start. I'm sure you could figure out some way to hook in some css transitions so they don't simply snap to the new position.

  7. #7
    Join Date
    May 2005
    Gold Coast (MS)

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