Day 65: Taking animations further

Trialling a new top bar animation:

During my progression I decided to trial a different top bar element. This was solely because I wanted to experiment with the hover action more and see what animations I could create. “check topbar.html to view”

Although this animation was rather appealing after the creation, it failed to resonate with the design layout and was dismissed. It was worth the trial tho.

screen-shot-2017-02-09-at-23-24-05screen-shot-2017-02-09-at-23-24-14

Animating my social media icons:

This fascinated me from the beginning, after creating a contemporary layout for my contact page I realised that the social media icons should follow a similar suit. In order to do so, I coded an animation in a circle. I was particularly impressed with this as it took me over 4hours to code . This transition really complimented the contact page. It provides the viewer with a link to my blog in a more subtle location to the heading bar. My design instagram and open’s up an email with my email address.

Although this element of coding was extremely difficult and targeting the correct class, always became a problem. I actually really enjoyed it and if I had more time I would like to develop my knowledge further for this project.

screen-shot-2017-02-09-at-23-30-31

screen-shot-2017-02-09-at-23-33-23screen-shot-2017-02-09-at-23-33-37screen-shot-2017-02-09-at-23-33-45

The use of of book icon allows the user to have the opportunity to download my journey book. It uses a similar hover state to the social media icons however has a download href.

screen-shot-2017-02-10-at-00-47-12

Screen Shot 2017-02-10 at 00.50.28.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