RollFade works using a simple CSS mechanism. Static content has one level of opacity applied and hovered content has another level of opacity applied. Rolling your mouse over the content results in this shift between the two opacity levels. Modern web browsers (browsers with support for hardware-accelerated animations) will fade between the two opacity levels. Using CSS results in an incredibly light-weight yet silky-smooth transitional effect, between the two states.

This stack is ideal for use with both text and images. You can use multiple RollFade stacks on the same page, and this stack will work in box fixed-width and responsive-width page layouts without any trouble. RollFade can be safely combined with free stacks like the LinkBox stack, for creating linked content. If you need a more powerful rollover effect (like the ability to swap between two content layers) consider using the HoverBox stack instead, which is very feature-rich.

Example

Here is a simple example of the RollFade stack, using a warehoused image. Static opacity was set to 99% and the hovered opacity was set to 75%. Transition speed is set to 500 milliseconds. The image is faded on mouseover:
Switzerland - A photograph by Chas Woodgate
Switzerland - A photograph by Chas Woodgate
Switzerland - A photograph by Chas Woodgate

Setup

RollFade is one of the easiest ever addon stacks to use, in the Stacks plugin:
  • Once installed drag and drop a RollFade stack from the Stacks Library into your page
  • Drag and drop content into the RollFade stack. Content can comprise of existing stacks, text or images
  • In the stack settings on the right, you can adjust the static opacity, hovered opacity and the transitional fade effect
  • Preview your page to see the RollFade stack working

Compatibility

RollFade is designed to work with all newer versions of Internet Explorer, Safari, Firefox, Opera and Chrome web browsers. It will degrade gracefully on older web browsers without support for opacity or CSS transitions (like IE7 and IE8). Compatibility with smartphones and tablet devices is mixed, due to the lack of support for hover / mouseover. Typically the content will be displayed permanently at the static level of opacity, on touch devices.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.