Переход цвета фона в положение смещения

Question

Используя jQuery и jQuery.Colors, я пытался придумать способ связать цвет фона со смещенной позицией при прокрутке div в рамке.

Вы можете посмотреть мой пример здесь: http://coreycapetillo.com/tests/colors/index.html

В настоящее время у меня меняется цвет фона, когда позиция смещения достигает определенного диапазона чисел. Однако мне интересно, смогу ли я вместо этого сделать его более органичным, имитируя эффект градиента сплошного цвета.

Я подумал, что простейшим обходным решением было бы иметь 4 пустых деления с 4 различными цветами фона. Затем используйте базовую математику, чтобы установить непрозрачность (используя другое смещение на деление) для смещения (). Число слева.

Я ищу что-то, что потребовало бы меньше пустых DIV и что-то более плавное Это первый раз, когда я опубликовал в stackOverflow, поэтому я надеюсь, что предоставил достаточно информации, чтобы получить некоторые указания в том направлении, в котором я должен идти.

Answer 1

Одним из способов является использование цветовой модели RGB, где цвета (красный, зеленый и синий) находятся в диапазоне 0-255.Когда эти числа преобразуются в шестнадцатеричное, вы получаете типичный цветовой формат #3399AA.

Итак, сначала выберите 2 цвета (красный и зеленый или зеленый и синий, например).Затем вы можете отобразить смещение (x, y) на цвет, используя javascript:

var red = Math.floor(x / divWidth * 255);
var green = Math.floor(y / divHeight * 255);
color = "#" + red.toString(16) + green.toString(16) + "99"; 

Для достижения другого эффекта вы можете использовать цветовую модель HSV (оттенок, насыщенность и значение).С помощью этой модели вы можете поддерживать постоянное значение (яркость), которое выглядит, вероятно, лучше, чем RGB.Вам понадобится this , который имеет функцию hslToRgb, тогда код выглядит так:

var hue = Math.floor(x / divWidth * 255);
var sat = Math.floor(y / divHeight * 255);
color = hslToRgb(hue, sat, 255); 
color = "#" + color[0].toString(16) + color[1].toString(16) + color[2].toString(16); 

Answer 2

Это может быть не совсем эффект «градиента», который вы получили после этого, но вы не могли использовать смещение, чтобы установить класс на одно деление (например, на 100 пикселей, установить класс «зеленый», на 500 пикселей установить класс «синий»). "и т. д.), и использовать CSS-переходы для обработки замирания? Смотрите пример: http://jsfiddle.net/juanojeda/bKRuQ/

В этом примере используются щелчки, но принцип такой же, как прослушивание события смещения.