Circle Hover Animation
The “Features” section of the “About” page is a clear example of this advanced user interactivity/engagement. When the user hovers over a circular image, the element is animated with an overlay of additional text, link and background colour.
The circular animation is achieved through using a combination of CSS techniques such as separate division containers, transforms/transitions and use of pseudo classes. Each circle is embedded within a traditional list-item unordered html layout. Within each list item is a containing division alongside another division that holds further information that is displayed when the user hovers over the list item.
The inspiration for the circular animation effect was based on a CSS hover effects article from www.Codrops.com.
Border Menu – Navigation
The navigation and border menu style implemented within explore:ldn is central to the unique style of the project.
When initially designing the website, I wanted to provide an “application” type look to the navigation experience. Moreover, I was keen to implement a minimalistic layout that ensured the content could take precedence over navigation options and therefore make the most of the screen space available. The border style navigation that is centred on an overlay concept therefore proved the most suitable solution for my design criteria.
The border menu consists of three major aspects including:
The overlay border
This forms the border that overlays the major website content. The overlay is animated using CSS3 transformations alongside the use of CSS Z-Index to overlay across content.
The navigation (including icons for mobile users)
The navigation links work much like traditional responsive website navigation incorporating a hamburger menu as a “call to action” and the use of icons when the website is viewed from smaller devices. This functionality is achieved through the use of CSS media queries to identify screen size changes.
The icons seen within the mobile navigation were implemented using the IcoMoon App. This is an online service that enables developers to create CSS based icons that can be inserted within their personal html designs.
The content panel