具有 RGBA 颜色的渐变滚动?
Gradient scroll with RGBA-color?
我正在尝试弄清楚如何将 RGBA 值发送到 DOM 使用我的 "Gradient scroll-box" 滚动时。我知道 RGBA 是 HTML5。但是为什么我不能在滚动时将新值作为 rgba 发送到我的标记中?我希望 alpha 始终为 0.5...有什么想法吗?
HTML
<body>
<div>Fancy Gradient scroll</div>
</body>
CSS
body {
background-color: rgba(57, 166, 221, 0.5);
height: 5000px;
}
div {
color: #fff;
text-transform: uppercase;
position: fixed;
font-family: Arial, sans-serif;
font-size: 40px;
padding: 15px;
}
JS
$(function gradientScrollBox() {
var scroll_pos = 0;
var animation_begin_pos = 0;
var animation_end_pos = 5000;
var beginning_color = new $.Color("rgba(57, 166, 221, 0.5)");
var ending_color = new $.Color("rgba(135, 200, 10, 0.5)");
$(document).scroll(function () {
scroll_pos = $(this).scrollTop();
if (scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos) {
// Calculate rgb-value depending on start and end-color.
var percentScrolled = scroll_pos / (animation_end_pos - animation_begin_pos);
var newRed = beginning_color.red() + ((ending_color.red() - beginning_color.red()) * percentScrolled);
var newGreen = beginning_color.green() + ((ending_color.green() - beginning_color.green()) * percentScrolled);
var newBlue = beginning_color.blue() + ((ending_color.blue() - beginning_color.blue()) * percentScrolled);
var newColor = new $.Color(newRed, newGreen, newBlue);
$("body").animate({ backgroundColor: newColor }, 0);
} else if (scroll_pos > animation_end_pos) {
$("body").animate({ backgroundColor: ending_color }, 0);
} else if (scroll_pos < animation_begin_pos) {
$("body").animate({ backgroundColor: beginning_color }, 0);
}
});
});
这是我的 fiddle
正如您在我的 fiddle 中看到的那样,我在样式表中给出的颜色设置为 rgba(57, ... 0.5);但是,一旦我开始滚动,该值就会变为仅 rgb,并且 alpha 不再存在。任何帮助都会很好!
使用 jQuery,您可以在文档滚动时触发 class 更改,并根据 CSS 中的 class 更改颜色,如下所示:
演示
jQuery :
$(document).ready(function () {
$(window).scroll(function(){
$('.sticky-nav').addClass('scrolled');
});
});
CSS :
.sticky-nav.scrolled{
background: gold;
}
通过添加一个值为 alpha 的变量解决了我自己的问题。
$(function gradientScrollBox() {
var scroll_pos = 0;
var animation_begin_pos = 0;
var animation_end_pos = 5000;
var beginning_color = new $.Color("rgba(57, 166, 221, 0.5)");
var ending_color = new $.Color("rgba(135, 200, 10, 0.5)");
$(document).scroll(function () {
scroll_pos = $(this).scrollTop();
if (scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos) {
// Calculate rgb-value depending on start and end-color.
var percentScrolled = scroll_pos / (animation_end_pos - animation_begin_pos);
var newRed = beginning_color.red() + ((ending_color.red() - beginning_color.red()) * percentScrolled);
var newGreen = beginning_color.green() + ((ending_color.green() - beginning_color.green()) * percentScrolled);
var newBlue = beginning_color.blue() + ((ending_color.blue() - beginning_color.blue()) * percentScrolled);
var newColor = new $.Color(newRed, newGreen, newBlue);
$("body").animate({ backgroundColor: newColor }, 0);
} else if (scroll_pos > animation_end_pos) {
$("body").animate({ backgroundColor: ending_color }, 0);
} else if (scroll_pos < animation_begin_pos) {
$("body").animate({ backgroundColor: beginning_color }, 0);
}
});
});
这样做:var alpha = 0.5;
并放在这里var newColor = new $.Color(newRed, newGreen, newBlue, alpha);
我正在尝试弄清楚如何将 RGBA 值发送到 DOM 使用我的 "Gradient scroll-box" 滚动时。我知道 RGBA 是 HTML5。但是为什么我不能在滚动时将新值作为 rgba 发送到我的标记中?我希望 alpha 始终为 0.5...有什么想法吗?
HTML
<body>
<div>Fancy Gradient scroll</div>
</body>
CSS
body {
background-color: rgba(57, 166, 221, 0.5);
height: 5000px;
}
div {
color: #fff;
text-transform: uppercase;
position: fixed;
font-family: Arial, sans-serif;
font-size: 40px;
padding: 15px;
}
JS
$(function gradientScrollBox() {
var scroll_pos = 0;
var animation_begin_pos = 0;
var animation_end_pos = 5000;
var beginning_color = new $.Color("rgba(57, 166, 221, 0.5)");
var ending_color = new $.Color("rgba(135, 200, 10, 0.5)");
$(document).scroll(function () {
scroll_pos = $(this).scrollTop();
if (scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos) {
// Calculate rgb-value depending on start and end-color.
var percentScrolled = scroll_pos / (animation_end_pos - animation_begin_pos);
var newRed = beginning_color.red() + ((ending_color.red() - beginning_color.red()) * percentScrolled);
var newGreen = beginning_color.green() + ((ending_color.green() - beginning_color.green()) * percentScrolled);
var newBlue = beginning_color.blue() + ((ending_color.blue() - beginning_color.blue()) * percentScrolled);
var newColor = new $.Color(newRed, newGreen, newBlue);
$("body").animate({ backgroundColor: newColor }, 0);
} else if (scroll_pos > animation_end_pos) {
$("body").animate({ backgroundColor: ending_color }, 0);
} else if (scroll_pos < animation_begin_pos) {
$("body").animate({ backgroundColor: beginning_color }, 0);
}
});
});
这是我的 fiddle
正如您在我的 fiddle 中看到的那样,我在样式表中给出的颜色设置为 rgba(57, ... 0.5);但是,一旦我开始滚动,该值就会变为仅 rgb,并且 alpha 不再存在。任何帮助都会很好!
使用 jQuery,您可以在文档滚动时触发 class 更改,并根据 CSS 中的 class 更改颜色,如下所示:
演示
jQuery :
$(document).ready(function () {
$(window).scroll(function(){
$('.sticky-nav').addClass('scrolled');
});
});
CSS :
.sticky-nav.scrolled{
background: gold;
}
通过添加一个值为 alpha 的变量解决了我自己的问题。
$(function gradientScrollBox() {
var scroll_pos = 0;
var animation_begin_pos = 0;
var animation_end_pos = 5000;
var beginning_color = new $.Color("rgba(57, 166, 221, 0.5)");
var ending_color = new $.Color("rgba(135, 200, 10, 0.5)");
$(document).scroll(function () {
scroll_pos = $(this).scrollTop();
if (scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos) {
// Calculate rgb-value depending on start and end-color.
var percentScrolled = scroll_pos / (animation_end_pos - animation_begin_pos);
var newRed = beginning_color.red() + ((ending_color.red() - beginning_color.red()) * percentScrolled);
var newGreen = beginning_color.green() + ((ending_color.green() - beginning_color.green()) * percentScrolled);
var newBlue = beginning_color.blue() + ((ending_color.blue() - beginning_color.blue()) * percentScrolled);
var newColor = new $.Color(newRed, newGreen, newBlue);
$("body").animate({ backgroundColor: newColor }, 0);
} else if (scroll_pos > animation_end_pos) {
$("body").animate({ backgroundColor: ending_color }, 0);
} else if (scroll_pos < animation_begin_pos) {
$("body").animate({ backgroundColor: beginning_color }, 0);
}
});
});
这样做:var alpha = 0.5;
并放在这里var newColor = new $.Color(newRed, newGreen, newBlue, alpha);