Grow your CSS skills. Land your dream job.

animating divs

  • # November 16, 2013 at 4:21 am

    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

    # November 16, 2013 at 9:33 am

    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?

    # November 16, 2013 at 2:28 pm

    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

    # November 16, 2013 at 11:39 pm

    here is a codepen of the doors opening

    Your text to link here…

    # November 17, 2013 at 9:42 am

    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

    # November 17, 2013 at 10:29 am

    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

    # November 17, 2013 at 10:34 am

    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.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".