Home/ Questions/Q 7571815
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T15:45:49+00:00

Using jQuery and jQuery.Colors, I’ve been trying to come up with a way to

  • 0

Using jQuery and jQuery.Colors, I’ve been trying to come up with a way to associate the color of a background to an offset position as I’m scrolling a framed div.

You can view my example here:
http://coreycapetillo.com/tests/colors/index.html

Currently, I have the background-color changing when the offset position gets to a certain number range. However, I’m wondering if I can instead have it shift more organically, mimicking a solid-color-gradient effect.

I figured the simplest work-around would be to have 4 empty divs with 4 different background colors. Then use some basic math to set the opacity (using a different offset per div) to the offset().left number.

I’m looking for something that would require less empty DIVs and something much smoother. This is the first time I’ve posted on stackOverflow, so I hope I’ve provided enough information to get some guidance in the direction I need to go.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It may not be exactly the “gradient” effect you were after, but couldn’t you use the offset to set a class on one div (eg. at 100px, set class “green”, at 500px set class “blue”, etc), and use css transitions to handle the fading? See the example:
    http://jsfiddle.net/juanojeda/bKRuQ/

    This example uses clicks, but the principle is the same as listening on the offset event.

    • 0