2

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;
}
user3358714
  • 119
  • 2
  • 12
  • 1
    possible duplicate of [Change Background-color on scroll](http://stackoverflow.com/questions/16844723/change-background-color-on-scroll) – Anantha Raju C Sep 27 '15 at 06:52

1 Answers1

2

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)

Anantha Raju C
  • 1,780
  • 12
  • 25
  • 35