Along with my Adobe Muse research, I wanted to explore my options with Rollover Effects. From my previous projects, I have experimented with different rollover effects to support a product by revealing additional information about a topic – this was a really inventive way to display the information without cluttering up the webpage, but it also helped to increase the presentation quality. By further exploring my options into all of the different rollover effects I would be able to achieve, I will be able to select the ones that would be best suited to complete the function that is desired, either being an animated rollover effect for a button or image.
From a generic YouTube search, I came across a plethora of videos discussing rollover effects within Muse, and after watching multiple I concluded that they all gave the same information. However, here’s two really good examples of rollover effects used in an aesthetically pleasing way:
From the videos, I have learnt that the basic form of rollover effects stems from the states panel at the top left of the screen. In simple terms, one object on the website can have 4 different variations due to the 4 states that it can be in Normal, Rollover, Mouse Down and Active. This is where the predominant changes can happen, and when these changes are made, they don’t affect any of the other states. For example, A square in the ‘Normal’ state could be coloured grey, and then, if the state of the object was changed into ‘Rollover’, the user could then change the colour to red. This would mean that the square in the browser would be grey until the cursor rolled over it.
Although very simple, this could then be developed by adding extra elements such as lines, like in the video above, further adding to its visual complexity. The same rules also apply for images where one image can be programmed to change to a different image once rolled over, which can also be further stylised with transition effects such as a transition period and delay, defining how long it takes the images to transition to one another, and also how long it takes for the transition to begin after the cursor hovers over the image.
Conclusion:
Although these rollover effects for both buttons and images demonstrated within the two videos are aesthetically pleasing, their design style might not be suitable for my product and the image I want to create for it. I feel the rollover functionality on the images is dated and would benefit more from a Parallax effect being used on it with a scroll effect, however, this is not to say that I would completely disregard the use of rollover effects, as I have found another tutorial on a rollover home/back button which is very interesting.
They use of this, although made completely redundant by the back buttons available on the browser does add a nice effect and is also executed by effectively.
Leave a comment