#ui experiments

This video is test recoding for this website work. after recoding how this webpage work, I need some things I need to change.

1. The fifth page, images horizontal scroll ( I think images need more big to fix on the last page)

To achieve majority of the animations and interactions on the interface, I will have to manipulate DOM element by using JavaScript and Jquery. However, both JavaScript and Jquery are completed foreign ground to me. Therefore, I have begun the journey of researching, implementing and testing.

The challenge

The globe section is the most challenge part after al. Therefore, I broke the elements in this section into 3 parts and searching for the design solutions separately. 

-The map image

Initially, I was trying to find animated earth plugin. Such as http://webplantmedia.com/jquery/2012/08/spinning-globe-jquery-plugin/

http://sebastien.drouyer.com/jquery.earth-3d/

http://code.webplantmedia.com/globe/

However, within the limitation of my coding ability I could not get them working on the interface. Moreover, the visual style of those globes do not align with the visual design of my interface. Therefore, I decided to give up on having spinning globe and just having PNG globe image with the matching visual design to the rest of the visual elements of the interface.

- The arrow

See the previous post about the arrow development

- The pop up box

The most difficult part of creating the interaction for the pop up box is that I aim to have user’s mouse hover of the globe to show the box.

Initially, I was trying only use css to resolve the issue such as

            http://codepen.io/Pixelizm/pen/ICpKv

As result, those codes did not apply to the visual effect I was looking for. Eventually,  I found the coding solution as below.