在没有jquery的情况下将背景颜色更改为页面滚动? [英] Change background colour as page scroll without jquery?

问题描述

我正在尝试进行过渡，以使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;
}

解决方案

您必须设置合适的断点.这是一个很好的问题的资源. >

独立的脚本可以更改用户滚动条上的页面背景

演示

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

Im trying to get a transition working so that the bg colour fades into another colour depending on position of page/i.e. triggered by divs with same class. Found some js here (http://codepen.io/Funsella/pen/yLfAG) which works exactly how I want on desktop, but it breaks on iPad (no matter the browser).

Would anybody know how to do this transition with CSS?

I found but it's triggered by a hover..

For example.. 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;
}

解决方案

You have to set suitable break points. Here is a great resource for the question.

A stand alone script to Change Page Background on User Scroll

Demo

This is the download link for the script http://download.techstream.org/Change-Page-Background-on-Scroll.zip (Download will start when you click on it)

这篇关于在没有jquery的情况下将背景颜色更改为页面滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！