Jump to content
the-destroy

create an div animation with javascript

Recommended Posts

Hello everyone, let's see if anyone can help me out. I'm creating a page with squares and rectangles div (windows 8 style) spaced from each other 4px. Each div has a title or a mini sentence. I would like: 1 - going with the mouse over the div, it shrinks slightly and changes color, all with a transition;2 - clicking on one div, this one must increase in the vertical and horizontal size because I need that, into the div will appear text boxes where you can enter data which will return a value;3 - when the div size increases, others div should always move in an orderly manner4 - clicking on another div, the first (or earlier) should return little if possible. I don't know if I have explained myself well enough. The site has responsive desgin for pc, tablets and smartphones. I would like this javascript runs on safari, Internet Explorer, crome and firefox. I hope someone can help me out ... Thanks in advance. Andrea

Edited by the-destroy

Share this post


Link to post
Share on other sites

How much do you know so far about how to do that? What do you have so far? Are you familiar with the various events in Javascript and how they work? For the animation effects it's going to be quicker to use a premade animation library, although that won't help you learn how animation works if that is one of your goals.

Share this post


Link to post
Share on other sites

The basic idea is that an element's appearance is controlled by CSS. JavaScript can change CSS values, so that makes animation and transitions possible. Javascript also has two built-in timer functions; these allow transitions like fade-ins to happen. To make it all work, you need to know a fair amount about JavaScript. You can find JavaScript libraries very easily. They can simplify the tasks, but you still need to know basic JavaScript. I recommend finding a library that does not require using jQuery. That will limit your choices, but you probably don't want to learn about JavaScript, CSS, and jQuery (all three) just to animate stuff. Unless you want to spend a lot of time on this. OTOH, I think you're going to spend a lot of time on this. :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...