Help with divs and animations

Question

Hello,
I am attempting to recreate this video through HTML/CSS.
http://vimeo.com/97765854
I've been fixing the code, and I've gotten closer to the desired product.
http://cssdesk.com/b6vP2
I finally got the main div layers to line up correctly, and I included all of the images except one. But I still need:
-Top layer to have top border transparent for the purpose of the phone to look like it's sliding from behind that area.
-Animations to be checked over to see that they're actually functional. I'm looking to have them initiate at the completion of the page loading, and only occur once, not infinite. When the rest of this layout is developed, i'll most likely be looking to have things activate once they're scrolled to.
-Find out how to position divs correctly, such as the phone, text, and each of the other elements that will be moving or static. Box shadow to have no right/left peaking corners, and be pretty diffused towards the top.
-Make sure I understand how the bottom and top div are interacting with one another. They seem to be positioned differently vertically. Is this because of the z-index placement?
Thank you!

Steven Parker · Answer

For the top layer, you probably want something like this little trick that places two wedges with transparent tops at the bottom of your display:
CSS
.top {
    position: absolute;
    top: 275px;
    border-right: 500px solid transparent;
    border-bottom: 235px solid #6cd0ec;
}
.top:after {
    content: "";
    position: absolute;
    border-left: 500px solid transparent;
    border-bottom: 235px solid #6cd0ec;
}

For the animations - remember to add "-move" to the animation names on the keyframes so they match the names you used on the animation lines.  Also, you might consider placing the images directly in the HTML inside the DIVs (or replacing the DIVs with them) instead of having them as backgrounds.  And you probably want to remove all the backgrounds except for "bottom" or "bottom-layer" so they don't cover up each other.  And on that final background, try using a gradient to more closely match what's seen in the video.  Something like this:
CSS
background: -webkit-linear-gradient(#54BAD8, #37A2C2);

The z-index placements of the two layer DIVs is correct, but you really don't need to break your items up into separate sections or use explicit z-index values.  Just be sure to order all the items as you want them shown (lowest layers first).
By then you should be very close to the video.  And let me know if you manage to find a CSS-way to do that liquid morphing effect on the logo!

Welcome to the Treehouse Community

Looking to learn something new?

Alexander Rivera

Alexander Rivera

Help with divs and animations

1 Answer

Steven Parker

Steven Parker