animating divs

[scene1]

I have animated two divs that give the impression of doors opening.

What I want to do is create a number keypad, then when the correct code is entered the 2 divs open open up.

Using css is it possible to create the keypad and have the keypad move with the div’s underneath.

I want the appearance of the keypad parting down the middle. As the div’s opon up.

thanks

[Paulie_D]

Sure….what have you tried so far?

Perhaps a Codepen of where you are right now and how you have tried to solve this yourself?

[scene1]

I have the divs opening but I don’t have a clue about the keypad opening with the divs neatly.

I will create a codepen

[scene1]

here is a codepen of the doors opening

Your text to link here…

[Tom Houy]

This isn’t a finished example, but are you talking about the keypad splitting into two as in something like the link below?

http://codepen.io/tomhouy/pen/wELrB

[scene1]

Hi Tom

That’s pretty much what I was meaning then as the doors open each half of the keypad moves with the doors looks great.

Just need to study the css now!! many thanks

[Tom Houy]

No prob. I think there might be a way to get both sides of the middle buttons to have a hover effect when mousing over just one of the two sides, using CSS only – but at the very least it can definitely be done with JQuery or Javascript.

All that’s really going on in the example above is the sets of numbers have margins that push them partially outside of their parent containers. In other words, the Left Door DIV clips half of the middle buttons, and right Right Door DIV clips the other half. The middle buttons technically exist twice in the HTML.

[Author]

Posts