Jump to content

create an div animation with javascript


the-destroy

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
Link to comment
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.

Link to comment
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. :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...