www.webdeveloper.com
Results 1 to 7 of 7

Thread: Is it possibile to animate elements positioning?

  1. #1
    Join Date
    Jan 2013
    Posts
    84

    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 10:38 PM.

  2. #2
    Join Date
    Mar 2012
    Posts
    1,344
    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
    Location
    Canada
    Posts
    155
    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:

    Code:
    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
    Posts
    84
    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
    Location
    Centurion, South Africa
    Posts
    795
    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
    Posts
    8
    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
    Location
    Gold Coast (MS)
    Posts
    2,208

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