Currently facing a dilemma without a clear solution in sight.
The issue at hand involves creating an opacity gradient on the borders of a div that is not dependent on color.
To elaborate, there is an "overflow:hidden" div (referred to as MainDiv) housing another sizable div (named SlideDiv) that moves horizontally across the viewport using jquery. The main div features a complex background image that also shifts with the movement. This setup generates a captivating parallax effect.
As expected, the content within SlideDiv vanishes beyond the edges of the viewport. However, here's where it gets interesting. Rather than abruptly disappearing, I aim to have the content gradually fade away :)
To achieve this effect, an opacity gradient must be implemented along the viewport borders. Due to the presence of a detailed background image that must remain visible throughout, this gradient cannot rely on colors. Essentially, a transition from "opacity:1 (content visible)" to "opacity:0 (content hidden)" is desired, instead of transitioning from "opacity:0 (content visible)" to a solid color at opacity:1.
This restriction rules out the use of -webkit-gradient or -moz-linear-gradient. Or does it?
Unfortunately, I cannot provide visuals due to confidentiality concerns.
Inquiries: - Can this be achieved using CSS2 or 3, jQuery, a plugin, or any other technology (excluding flash)? - If so, how can it be done? :)
I hope my explanation is clear, though I'm unsure, so please bear with me ;)
Best regards, Jibou