更改背景颜色作为页面滚动没有jquery?

时间:2015-09-27 06:01:15

标签: css css-transitions transition background-color fade

我试图让过渡工作,以便bg颜色根据页面的位置而变成另一种颜色/即。由具有相同类别的div触发。 在这里找到了一些js(http://codepen.io/Funsella/pen/yLfAG),它可以在桌面上完全按照我的要求运行,但它会在iPad上打破(无论是浏览器)。

有人知道如何使用CSS进行此转换吗?

我发现但它是由悬停引发的。

例如...... http://jsfiddle.net/L9JXG/1/

.div1 {
    height:200px;
    width:600px;
    position:relative;
    background:red;
}
.div1:after {
    position:absolute;
    width:100%;
    height:100%;
    content:'';
    background:url("http://lorempixel.com/output/business-q-c-640-480-10.jpg");
    background-size:cover;
    opacity:1;
    transition: 3s;
}
.div1:hover:after {
    opacity:0;
}

1 个答案:

答案 0 :(得分:2)

您必须设置合适的断点。对于这个问题,这是一个很棒的resource

单独使用script更改用户滚动页面背景

Demo

这是脚本http://download.techstream.org/Change-Page-Background-on-Scroll.zip的下载链接(点击后会开始下载)