Understanding the x-card component

The x-card component includes some really important things that can be furthewr implemented into my coachella redesign. to check these out I experimented with the demo file and got it working like so…

On this page the animations worked really well as can be seen here

When editing the code I was able to add a third button but then change it into an image. You can see this here;

Screen Shot 2016-03-21 at 12.36.06.png

Next i coded this image to animate with a red background instead of grey;

Screen Shot 2016-03-21 at 12.38.20.png

Then when you finally land on this new page I created a text button that took you back to the original page;

Screen Shot 2016-03-21 at 12.39.25.png

It was a little tricky to understand at first but it was a valuable learning curve that helped me understand how to use the elements in the x-card component that I needed to use. You can see breakdown of all the code in this project below;

code-explained.png

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s