At the top, homepage stage with open navigation showing four elements. Below, homepage stage with closed navigation.
Interaction concept: Homepage stage animation of navigation and changeover of the stage topics.
When the user opens the website, the navigational layer on stage is open and closes automatically after one second.
When the user touches the sensitive navigation area (highlighted red) with his mouse the navigational stage layer extends. Moving the mouse off the navigation bar closes navigation bar.
*(The quick moving from the stage to the teaser area across shall not cause an opening of the layer.)
As long as the user has his mouse cursor within the layer, it does not close.
With mouse-over above a topic box it becomes highlighted white. With click the stage changes and the layer is closed.
The arrow is centered. The frame size is fixed. The background color is #ffffff, with opacity of 85%.
Interaction concept: Entry page – stage/link carousel
When the user enters the entry page, the stage shows the picture and text referring to the first navigation point in the list.
If the user takes no action, the stage changes automatically within 2 seconds to the next navigation link in the list below.
The fitting navigational link in the list is underlined.
If the user clicks the left arrow button on the stage, the topic of the stage changes and in the list below the related link is highlighted.
If the user clicks the right arrow button on the stage, the topic of the stage changes and in the list below the related is highlighted.
If the last topic in the list is shown and the user clicks on the right arrow button, next the first topic in the list is shown.
If the first topic in the list is shown and the user clicks on the left arrow button, next the last topic in the list is shown.
Movement of the stage content
If the user moves the mouse over a link, the stage changes after a delay of 0.3 seconds.
If the user moves the mouse over a link that is nearer to the beginning of the list than the current link, the stage changes from right to left.
If the link is nearer to the end than the current link, the stage moves from left to right.
If the user changes from one link to another one, which is not directly above or below in the link list, the stage changes directly. The topics “between” the links aren’t shown in the animation (even if it is a carousel).