Blog Post

Code Challenge #7

August 20, 2015
css3
sass
javascript

This weeks' Code Challenge by DevWars is back to the basics. They provided a neat dribbble design and want us to code it out. Initially, the challenges were pretty static (i.e. here's a design, use HTML/CSS to build it out) but this week, they want developers to show off some JavaScript and CSS3 skills. Bring forth the animations!

Objectives

1. Make this card fold in half and "close", like a book.
2. On hover it must open to show the content.
*BONUS* Add some extra pages.



my approach

I pretty much stuck to the design as it is but personalized it a little with my own photos/name and the date I worked on it. The challenge requirements seemed a bit odd to me, though - the interaction, anyway. Hovering to show the card? Bleh - not a fan of hovering when it means hiding useful information rather than adding additional content (tips, etc). If it's theoretically an article card, I'd imagine that it'd already be displaying - interactions should be added upon it; not to reveal it. Since it's a teaser, it might be better to do that action for the read more function instead.

As far as the code went, I debated on the best way to handle the skewed side of the left panel and doing most of the animation with CSS3. There were a few of ways I could imagine accomplishing this but in the end I went with a similar approach that I take with ribbons on cards.

sass:

&:after
  content: ''
  height: 100%
  width: 90px
  background: #fff
  position: absolute
  top: 0
  right: -49px
  -webkit-transform: skew(10deg)
  -moz-transform: skew(10deg)
  -o-transform: skew(10deg)
  z-index: -9

css3

I used the skew method to get the side slanted like in the design. By adding the pseudo, :after for .left-side it becomes hooked onto that class. Next up were the animations, two classes were created: .animation-in and .animation-out to toggle when the close button is clicked. I added transform: scaleX(-1) translateX(-100px) to create the illusion of the page turning. It currently just flips the text too and my next step would be to make it show as more of a book cover at the midpoint before it completely flips. However, I do like doing these write ups right after I've worked on these challenges in the allotted time for my own learning purposes. Plus, it's pretty cool looking back on these and seeing how much more efficient I become with tasks like this.

The goal is to only spend 1-2 hours on these.