/    Sign up×
Community /Pin to ProfileBookmark

Is it possibile to animate elements positioning?

Copy linkTweet thisAlerts:
Apr 21.2014

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 [B]Metro layout of Windows 8 [/B]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

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@jedaisoulApr 21.2014 — 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...
Copy linkTweet thisAlerts:
@Error404Apr 21.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:

[CODE]
window.onresize = function() {
// get the elements you want to animate
// move them around!
}
[/CODE]

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.
Copy linkTweet thisAlerts:
@American_horizoauthorApr 21.2014 — 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.
Copy linkTweet thisAlerts:
@bionoidApr 21.2014 — 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.
Copy linkTweet thisAlerts:
@lithium0735Apr 21.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.
×

Success!

Help @American_horizo spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...