Two images fading in/out simultaneously - flickering

[Lucy]

I have an animation where one image fades in and the one on top fades out. Both images are PNGs with around 70% opacity (in the image file, not CSS style here) each (hence why I have to have them do this, otherwise the total opacity would go up and down). This works with one problem: the whole thing flickers ever so slightly. I've figured out why, I think - because of threading. So the functions cannot run at exactly the same time, and hence the total opacity keeps being changed ever so slightly, creating a mild flickering effect - does that make any sense? I think this is right.

Just checked and the total opacity is varying from either 1, 1.1 or 0.85

 

So I was wondering if there is any possible solution to this that anyone can think of. Though I'm really not sure there is...

[dsonesuk]

You just need the current image with z-index greater than the next image, and then fadeout the current image only, so the next comes into view, then swap index as next image is now current.You now require a single fadeout function only for current image.

[Lucy]

If I understand what you're saying, that wouldn't work. My images are PNGs with transparent backgrounds, and coloured lines which are translucent (the changes in the images are some of the lines being more/less opaque). So if you reveal the bottom image with the top still in view, the lines overlay one another and, combined, have a greater opacity overall, changing how the images are supposed to look. That's why I'm fading one in and one out, so the total opacity between the two images should always equal 100 total and so it looks exactly as it should - though this obviously isn't quite working correctly. I suspect I'm not explaining this very well, though. I could possibly put it online, if that would help?

Edited April 17, 2015 by Lucy

[dsonesuk]

Yes please put it online to see it in operation.

[Lucy]

Got it online. I would recommend loading it in a browser without any other pages up or downloads running - I've had problems with it creating too many intervals and crashing, which should be sorted now, but I'm not completely confident with it yet. Also, I've logged the total opacity between the two images to the console for each iteration of the fade, if you want to look.

(Link edited out)

 

You can stop the animation by clicking on the page or moving away from the page.

Edited May 27, 2015 by Lucy

[dsonesuk]

Problem with fi, fo and step value, you are not checking fi/fo value AFTER step increment/decrement is applied, it would reach 0.90 or 0.10 and pass if conditions, so next value will 1.05 and -0.05 respectively. You would be better to use a value that would equally divide into 100 without any remainder value. NOTE: you still need to check opacity value AFTER step is applied.

 

I don't know how exactly opacity will treat a minus value, or value greater than 1? change minus values to 0 or 0.05, but it would jump from 0.10 to 0.05 or 0 which is not a decrement of step value of 0.15, which may cause flicker effect, as it stutters before restarting.

Edited April 19, 2015 by dsonesuk

[Lucy]

Right, I've made the changes you suggest. Put the step down to 10. At least now it's less variable - the total opacity is basically either 1 or 0.9. It's still flickering though. I've been trying to get it to predict the opacity total and compensate by changing the individual counters, but this ends up resulting in the opacity never actually changing. :/ Do you think this is actually possible to fix?

[dsonesuk]

Thinking about the two function fadein/fadeout problem, you can just use one and apply different opacity to different elements, you can use the increment fadeIn opacity value minus it from 1, to give you fadeout value, and apply the opacity to respective elements

increment of 0.20

fadeIn 0.20 : fadeOut 1 - fI = 0.80

fadeIn 0.40 : fadeOut 1 - fI = 0.60

and so on.

[Lucy]

Good idea, though unfortunately that still results in the same problem.

[dsonesuk]

You actually changed the code, using one function and it did not work? you are basically reducing code by half, the value of fI or fO depending on which you use, determines the opacity value for both now, the if condition should work for both as well as it just make sure the correct is valid, and you then use calculation to adjust both together, single setInterval running instead of two.

 

TO separate crappy IE, from older crappier IE where filter (blah blah) has to be used, this prevents css invalid 'filter' errors appearing, when used on better browsers.

                if ('v' === 'v')                {                    layer.style.filter = 'alpha(opacity=' + ieo + ')';                }

Edited April 19, 2015 by dsonesuk

[dsonesuk]

I think your timing for animation is off,

 

1 sec = 1000; you are using 10, and pause 30, with anim that's 100 hundredth of a second, meaning the change from opacity 0 to 1 is almost instant, that is why its flickering going from one to the other.

[Lucy]

Oh, I didn't realise you meant use one function. I'll try that. I just changed the variable.

Thanks for the IE tip

 

I've also tried slowing the animation down - the flickering still happens, just more gradually.

[Lucy]

I've slowed the animation and changed to one function in the way you said - there seems to be extra flickering now :/ I've updated the page linked to before so you can see what I mean.

 

I'm starting to think this might not be possible, because the two fades can't ever be carried out instantaneously.

[Hadien]

I looked at what you made and created my own version:html:

<!DOCTYPE html><html lang="en">	<head>		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">		<title>Test page</title>		<link rel="stylesheet" type="text/css" href="StylingTests.css">		 <script src="backgroundUltra.js"></script> 	</head>	<body>		<div id="diamondContainer">			<div></div>			<div></div>			<div></div>			<div></div>		</div>	</body>	</html>

backgroundUltra.js:

 var animator = function(L,freq,offset){ 	var instance = {	 	layer:L,	 	DeltaT:offset*1 || 0,	 	frequency:freq*1.0 || 1.0,	 	runner:function(){	 			this.DeltaT = (this.DeltaT+0.125*this.frequency)%(Math.PI*2);	 			this.layer.style.opacity = (Math.sin(this.DeltaT)+1)/2;	 		}	 	}	 	return instance; 	}; 	window.onload = function(){ 		var speed = 0.25; 		var isRunning=false; 		var container = document.getElementById("diamondContainer");		var list = container.children; 		var diamonds = [];			var IntervalID = null; 		var delegator = function(){ 			for(var i in diamonds){ 				diamonds[i].runner(); 			} 		} 		for (var i=0;i<list.length;i++){ 			var layer =animator(list[i],speed,Math.PI*(i)/2) 			diamonds.push(layer); 		} 		 		container.onclick = function(){			if(isRunning = !isRunning){				IntervalID = setInterval(delegator,20);			}else{				clearInterval(IntervalID);			}		}		container.onclick(); 	} 

StylingTests.css:

html, body		{	margin:0;	padding:0;	height:100%;	width:100%;	font-size:0.625em;	background-color:#E6FDFF;}#diamondContainer div{	position:absolute;	background-image:url('images/bg/diam-01.png');	background-repeat:no-repeat;	background-position:fixed;	background-attachment:fixed;	content:'';	position:fixed;	left: 0px;	top: 0px;	width: 800px;	height: 1200px;}#diamondContainer div:nth-child(1){	background-image:url('http://lucygreenwood.net/images/bg/diam-01.png');	z-index: 0;	/**/background-position: 0px 0px;/**/}#diamondContainer div:nth-child(2){	background-image:url('http://lucygreenwood.net/images/bg/diam-02.png');	z-index: 1;	/**/background-position: 8px 12px;/**/}#diamondContainer div:nth-child(3){	background-image:url('http://lucygreenwood.net/images/bg/diam-03.png');	z-index: 2;	/**/background-position: 0px 24px;/**/}#diamondContainer div:nth-child(4){	background-image:url('http://lucygreenwood.net/images/bg/diam-04.png');	z-index: 3;	/**/background-position: -8px 12px;/**/}

This example should help with some insight on applying this fading effect. I'm actually using a sinewave to control the opacity here so that the fade remains smooth even if you get a tiny overflow. I also placed in a background-position on each div in the CSS so that its easier to see whats going on on each layer, but you don't need them at all. Plus I'm using FOUR layers not just two to how extra layers would stack up. I'm not saying that this is an answer to your problem as i'm not sure exactly what you want to do overall. You've told the problem you are facing (the flickering), but not what your intentions are to do here.

[dsonesuk]

few adjustments and corrections

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Document Title</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">            "use strict";            var bWidth = screen.width;            var originalD, newD;            var docTime = new Date().getTime();            var i = 1;            var waiting, bgTiming, fadeTiming;            var finFO = false;            var finFI = false;            var bLayer; //= document.getElementById("bottomlayer");            var tLayer; //= document.getElementById("toplayer");            var fI = 0;            var fO = 1;            var changeTime = 50;var animT = 50;var step = 0.10;var pause = 50;var opacityCounter = 0;var origPageLoad = true;var failCount = 0;var secondFade = false;var delay;            function detectIE() {                var ua = window.navigator.userAgent;                var msie = ua.indexOf('MSIE ');                if (msie > 0) {// IE 10 or older => return version number                    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);                }                var trident = ua.indexOf('Trident/');                if (trident > 0) {// IE 11 => return version number                    var rv = ua.indexOf('rv:');                    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);                }                var edge = ua.indexOf('Edge/');                if (edge > 0) {// IE 12 => return version number                    return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);                }// other browser                return false;            }            function addImage(source, arr) {                arr.push(new Image());                arr[arr.length - 1].src = source;            }//load images            var patterns = [];            addImage('images/bg/diam-02.png', patterns);            addImage('images/bg/diam-03.png', patterns);            addImage('images/bg/diam-04.png', patterns);            addImage('images/bg/diam-05.png', patterns);            addImage('images/bg/diam-06.png', patterns);            addImage('images/bg/diam-07.png', patterns);            addImage('images/bg/diam-08.png', patterns);            addImage('images/bg/diam-09.png', patterns);            addImage('images/bg/diam-10.png', patterns);            addImage('images/bg/diam-11.png', patterns);            addImage('images/bg/diam-12.png', patterns);            function animHandler(beginning) {                if (detectIE() > 6 || detectIE() === false && bWidth >= 730) {//run background animation if not IE 6 or below, and not mobile                    if (beginning) {                        stop(false);                        delay = setTimeout(function() {                            fadeTiming = setInterval(function() {                                fade(tLayer, bLayer);                            }, animT);                        }, changeTime);                    }                    else if (finFI && finFO && secondFade === false) {//reverse fades                        stop(false);                        delay = setTimeout(function() {                            fadeTiming = setInterval(function() {                                fade(bLayer, tLayer);                            }, animT);                        }, pause);                        secondFade = true;                    }                    else {                        stop(false);                        change();                        secondFade = false;                    }                    ;                }                ;            }            function opacity(opac, layer) { // these arguments are not required                opacityCounter++;                var o = fI.toString();                var ie = fI * 100;                var ieo = ie.toString();                tLayer.style.opacity = fO;                bLayer.style.opacity = o;                if ('v' === 'v') {                    bLayer.style.filter = 'alpha(opacity=' + ieo + ')';                    tLayer.style.filter = 'alpha(opacity=' + (100 - ieo) + ')';                }                ;                console.log(Number(tLayer.style.opacity) + Number(bLayer.style.opacity));            }            function fade(FOLayer, FILayer) {                finFI = false;                finFO = false;                fI += step;                fO = 1 - fI;                /* fO -= step;                 fI = 1 - fO;*/                if (fI <= 1) {                    // opacity(fO, FOLayer);                    opacity(fI, FILayer);                }                else {                    fO = 1;                    fI = 0;                    // opacity(fO, FOLayer);                    opacity(fI, FILayer);                    finFO = true;                    finFI = true;                    animHandler(false);                }            }            function stop(animation) {//'animation' should be true or false                if (detectIE() > 6 || detectIE() === false && screen.width >= 730) {//run background animation if not IE 6 or below, or mobile                    if (animation) {                        var timers = [delay, fadeTiming];                        opacity(1, tLayer);                        opacity(0, bLayer);                    }                    else {                        var timers = [delay, fadeTiming];                    }                    ;                    for (var c = 0; c < timers.length; c++) {                        clearInterval(timers[c]);                        timers[c] = null;                    }                    ;                }                ;            }            function change() {                if ((finFI === false && opacityCounter > 0) || (finFO === false && opacityCounter > 0)) {                    console.error('fade not finished');                }                ;                opacityCounter = 0;                originalD = new Date().getTime();                if (i >= patterns.length) {                    i = 0;                }                ;                if (i < patterns.length) {                    bLayer.style.backgroundImage = 'url(' + patterns[i].getAttribute("src") + ')';                    i++;                }                ;                animHandler(true);            }            window.onload = function() {                /* moved this varibles here as these will throw undefined error as these are not redendered yet at time of referencing */                bLayer = document.getElementById("bottomlayer");                tLayer = document.getElementById("toplayer");                if (detectIE()) {                    changeTime += 900;                    step += 0.05;                    pause += 50;                }                ;                if (detectIE() < 9) {                    bLayer.style.backgroundColor = '#E6FDFF';                    tLayer.style.backgroundColor = '#E6FDFF';                }                ;                /*end moved variables*/                animHandler(true);            };            document.onclick = function() {                stop(true);            };            window.onblur = function() {                console.log('unfocused');                stop(true);                origPageLoad = false;            };            window.onfocus = function() {                if (origPageLoad === false) {                    console.log('restarting');                }                ;            };        </script>        <style type="text/css">            *	{                margin:0;padding:0; border:0;            }            html, body		{                margin:0;                padding:0;                height:100%;                width:100%;                font-size:0.625em;                background-color:#E6FDFF;            }            #main	{                position:absolute;                color:#B28A6C;                font-size:6rem;                margin:0;                padding-top:5.7rem;                overflow:hidden;                min-height:100%;            }            #toplayer			{                height:100%;                width:100%;                background-image:url('images/bg/diam-01.png');                background-repeat:no-repeat;                /* background-position:fixed; no such styling */                background-position:center center;                background-attachment:fixed;                content:'';                position:fixed;            }            #bottomlayer			{                height:100%;                width:100%;                background-image:url('images/bg/diam-02.png');                background-repeat:no-repeat;                background-position:center center;                background-attachment:fixed;                opacity:0;                -ms-filter:alpha(opacity='0');                content:'';                position:fixed;            }        </style>    </head>    <body>        <div id="bottomlayer"></div>        <div id="toplayer"></div>        <div id="main"></div>    </body></html>

I removed the call of function opacity(fO, FOLayer); and use global scope value of fI, fO, tLayer, and bLayer to apply the calculated value for fadeOut and use these with the tLayer, and bLayer variables to use style for opacity required. no flicker from what i see in firefox anyway.

Edited April 19, 2015 by dsonesuk

[Lucy]

Dsonesuk -I've tried the adjustments you suggested (thanks!) - that does get rid of the new flashing, and I think the flickering thing has gone. In your solution, however, the layers don't fade in/out again, their opacity just gets re-set at the end - the reason I had a layer argument for opacity is that fade in/out happens for both layers.Also, I don't know what's going on here, but if you watch it can you see a kind of double fade in happening? As far as I can tell, that shouldn't be happening but it looks like each changed line in the image flashes in and out twice (or maybe three times, can't quite tell). If you see what I mean?So glad you pointed out about background-position:fixed not being valid CSS. I feel like such a fool, haha. I think I've been trying to use that for about 9 years... no idea where I picked it up.Hadien -Your version looks interesting, I'll have a look at it more later. Possibly might be a bit complex for me to understand at the moment, though.In regards to -

 

You've told the problem you are facing (the flickering), but not what your intentions are to do here.

I'm not sure what you mean by this, but I'll try to answer. I want the animation to be smooth and not to have extra (unplanned) movements (the flickering). It's supposed to be a matter of, top layer fades out at the same time as the bottom layer fades in, then the bottom layer fades out and the top layer fades in. Then the image on the bottom layer is replaced with a new one where some of the lines are less/more opaque, and then the fade happens again - and so on. Does that help explain it more?

Edited April 20, 2015 by Lucy

[dsonesuk]

When opacity for FI reaches 1, set a boolean variable and use that to run apply opacity values to opposite layers

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Document Title</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">            "use strict";            var bWidth = screen.width;            var originalD, newD;            var docTime = new Date().getTime();            var i = 1;            var waiting, bgTiming, fadeTiming;            var finFO = false;            var finFI = false;            var bLayer; //= document.getElementById("bottomlayer");            var tLayer; //= document.getElementById("toplayer");            var reversethis = false;            var fI = 0;            var fO = 1;            var changeTime = 50;            var animT = 100;            var step = 0.10;            var pause = 50;            var opacityCounter = 0;            var swapcounter = 0;            var origPageLoad = true;            var failCount = 0;            var secondFade = false;            var delay;            function detectIE() {                var ua = window.navigator.userAgent;                var msie = ua.indexOf('MSIE ');                if (msie > 0) {// IE 10 or older => return version number                    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);                }                var trident = ua.indexOf('Trident/');                if (trident > 0) {// IE 11 => return version number                    var rv = ua.indexOf('rv:');                    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);                }                var edge = ua.indexOf('Edge/');                if (edge > 0) {// IE 12 => return version number                    return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);                }// other browser                return false;            }            function addImage(source, arr) {                arr.push(new Image());                arr[arr.length - 1].src = source;            }//load images            var patterns = [];            addImage('images/bg/diam-02.png', patterns);            addImage('images/bg/diam-03.png', patterns);            addImage('images/bg/diam-04.png', patterns);            addImage('images/bg/diam-05.png', patterns);            addImage('images/bg/diam-06.png', patterns);            addImage('images/bg/diam-07.png', patterns);            addImage('images/bg/diam-08.png', patterns);            addImage('images/bg/diam-09.png', patterns);            addImage('images/bg/diam-10.png', patterns);            addImage('images/bg/diam-11.png', patterns);            addImage('images/bg/diam-12.png', patterns);            function animHandler(beginning) {                if (detectIE() > 6 || detectIE() === false && bWidth >= 730) {//run background animation if not IE 6 or below, and not mobile                    if (beginning) {                        stop(false);                        delay = setTimeout(function() {                            fadeTiming = setInterval(function() {                                fade(tLayer, bLayer);                            }, animT);                        }, changeTime);                    }                    else if (finFI && finFO && secondFade === false) {//reverse fades                        stop(false);                        delay = setTimeout(function() {                            fadeTiming = setInterval(function() {                                fade(bLayer, tLayer);                            }, animT);                        }, pause);                        secondFade = true;                    }                    else {                        stop(false);                        change();                        secondFade = false;                    }                    ;                }                ;            }            function opacity(opac, layer) { // these arguments are not required                opacityCounter++;                var o = fI.toString();                var ie = fI * 100;                var ieo = ie.toString();                if (!reversethis)                {                    tLayer.style.opacity = fO;                    bLayer.style.opacity = o;                    if ('v' === 'v') {                        bLayer.style.filter = 'alpha(opacity=' + ieo + ')';                        tLayer.style.filter = 'alpha(opacity=' + (100 - ieo) + ')';                    }                }                else                {                    bLayer.style.opacity = fO;                    tLayer.style.opacity = o;                    if ('v' === 'v') {                        tLayer.style.filter = 'alpha(opacity=' + ieo + ')';                        bLayer.style.filter = 'alpha(opacity=' + (100 - ieo) + ')';                    }                }                ;                console.log(Number(tLayer.style.opacity) + Number(bLayer.style.opacity));            }            function fade(FOLayer, FILayer) {                finFI = false;                finFO = false;                fI += step;                fO = 1 - fI;                if (fI <= 1) {                    opacity(fI, FILayer);                }                else {                    fO = 1;                    fI = 0;                    reversethis === true ? reversethis = false : reversethis = true;                    document.getElementById("main").innerHTML = reversethis;                    opacity(fI, FILayer);                    finFO = true;                    finFI = true;                    animHandler(false);                }            }            function stop(animation) {//'animation' should be true or false                if (detectIE() > 6 || detectIE() === false && screen.width >= 730) {//run background animation if not IE 6 or below, or mobile                    if (animation) {                        var timers = [delay, fadeTiming];                        opacity(1, tLayer);                        opacity(0, bLayer);                    }                    else {                        var timers = [delay, fadeTiming];                    }                    ;                    for (var c = 0; c < timers.length; c++) {                        clearInterval(timers[c]);                        timers[c] = null;                    }                    ;                }                ;            }            function change() {                if ((finFI === false && opacityCounter > 0) || (finFO === false && opacityCounter > 0)) {                    console.error('fade not finished');                }                ;                opacityCounter = 0;                originalD = new Date().getTime();                if (i >= patterns.length) {                    i = 0;                }                ;                if (i < patterns.length) {                    bLayer.style.backgroundImage = 'url(' + patterns[i].getAttribute("src") + ')';                    i++;                }                ;                animHandler(true);            }            window.onload = function() {                /* moved this varibles here as these will throw undefined error as these are not redendered yet at time of referencing */                bLayer = document.getElementById("bottomlayer");                tLayer = document.getElementById("toplayer");                if (detectIE()) {                    changeTime += 900;                    step += 0.05;                    pause += 50;                }                ;                if (detectIE() < 9) {                    bLayer.style.backgroundColor = '#E6FDFF';                    tLayer.style.backgroundColor = '#E6FDFF';                }                ;                /*end moved variables*/                animHandler(true);            };            document.onclick = function() {                stop(true);            };            window.onblur = function() {                console.log('unfocused');                stop(true);                origPageLoad = false;            };            window.onfocus = function() {                if (origPageLoad === false) {                    console.log('restarting');                }                ;            };        </script>        <style type="text/css">            *	{                margin:0;padding:0; border:0;            }            html, body		{                margin:0;                padding:0;                height:100%;                width:100%;                font-size:0.625em;                background-color:#E6FDFF;            }            #main	{                position:absolute;                color:#B28A6C;                font-size:6rem;                margin:0;                padding-top:5.7rem;                overflow:hidden;                min-height:100%;            }            #toplayer			{                height:100%;                width:100%;                background-image:url('images/bg/diam-01.png');                background-repeat:no-repeat;                /* background-position:fixed; no such styling */                background-position:center center;                background-attachment:fixed;                content:'';                position:fixed;            }            #bottomlayer			{                height:100%;                width:100%;                background-image:url('images/bg/diam-02.png');                background-repeat:no-repeat;                background-position:center center;                background-attachment:fixed;                opacity:0;                -ms-filter:alpha(opacity='0');                content:'';                position:fixed;            }        </style>    </head>    <body>        <div id="bottomlayer"></div>        <div id="toplayer"></div>        <div id="main"></div>    </body></html>

[Hadien]

Updated the code based on what your describing. should mostly behave like you want, though I made no effort to make it cross-browser friendly. I'm currently still in class and since I finished an in-class assignment early I decided to update this code.html:

<!DOCTYPE html><html lang="en">	<head>		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">		<title>Test page</title>		<link rel="stylesheet" type="text/css" href="StylingTests.css">		 <script src="backgroundUltra.js"></script> 	</head>	<body>		<div id="diamondContainer">			<div id="topLayer"></div>			<div id="botLayer"></div>		</div>	</body>	</html>

backgroundUltra.js:

		 var animator = function(L,freq,offset){ 	var instance = {	 	layer:L,	 	DeltaT:offset*1 || 0,	 	frequency:freq*1.0 || 1.0,	 	swap:false,	 	prime:true,	 	runner:function(){	 			this.DeltaT = (this.DeltaT+0.125*this.frequency)%(Math.PI*2);	 			var op = (Math.sin(this.DeltaT)+1)/2	 			if((op < 0.05)&&this.prime){	 				this.prime = false;	 				this.layer.className = (this.swap = !this.swap)	 					?"swap"	 					:"";	 			}else if( op>0.5 && !this.prime){	 				this.prime = true;	 			}	 			this.layer.style.opacity = op;	 		}	 	}	 	return instance; 	}; 	window.onload = function(){ 		var speed = 0.25; 		var isRunning=false; 		var container = document.getElementById("diamondContainer");		var list = container.children; 		var diamonds = [];			var IntervalID = null; 		var delegator = function(){ 			for(var i in diamonds){ 				diamonds[i].runner(); 			} 		} 		for (var i=0;i<list.length;i++){ 			var layer =animator(list[i],speed,Math.PI*i) 			diamonds.push(layer); 		} 		 		container.onclick = function(){			if(isRunning = !isRunning){				IntervalID = setInterval(delegator,20);			}else{				clearInterval(IntervalID);			}		}		container.onclick(); 	}  

StylingTests.css:

html, body		{	margin:0;	padding:0;	height:100%;	width:100%;	font-size:0.625em;	background-color:#E6FDFF;}#diamondContainer div{	position:absolute;	background-image:url('http://lucygreenwood.net/images/bg/diam-01.png');	background-repeat:no-repeat;	background-position:fixed;	background-attachment:fixed;	content:'';	position:fixed;	left: 0px;	top: 0px;	width: 800px;	height: 1200px;}#diamondContainer #topLayer{	background-image:url('http://lucygreenwood.net/images/bg/diam-01.png');	z-index: 0;	/*background-position: 0px 0px;/**/}#diamondContainer #botLayer{	background-image:url('http://lucygreenwood.net/images/bg/diam-02.png');	z-index: 1;	/*background-position: 8px 12px;/**/}#diamondContainer #topLayer.swap{	background-image:url('http://lucygreenwood.net/images/bg/diam-03.png');	/*background-position: 0px 24px;/**/}#diamondContainer #botLayer.swap{	background-image:url('http://lucygreenwood.net/images/bg/diam-04.png');	/*background-position: -8px 12px;/**/}

[Lucy]

Dsonesuk -Thanks, that works great.I've been watching the animation and there does still appear to be a very slight flicker - or more of a kind of pulsating thing... it really isn't very obvious, but I asked someone else and they said it was distracting, so not sure what to think. I'm going to try it on a different computer and see if it looks any different.I've heard of, but not yet tried, CSS animations - do you think if I used that instead the animation would be any smoother?Hadien -I tried out your updated code, it works really well! Thanks for posting it. The only thing is, this is for a portfolio and I want to show what I can personally do, and I think using your code would be a bit misleading, if you know what I mean? I am going to see if I can try to understand it though, so I can learn from it.

[Hadien]

Glad to help!

 

If you have any questions feel free to ask.

[dsonesuk]

The opacity does not seem to return to 1, but to 1.1102230246251565e-16, i used parseFloat() with fixed point of 2 digits which seems to fix this, running this slooowly, it fades in, THEN fades out the same bottom layer image before moving on to the next image, is this correct?

            function opacity(opac, layer) { // these arguments are not required                opacityCounter++;                var o = fI.toString();                var ie = fI * 100;                var ieo = ie.toString();                if (!reversethis)                {                    tLayer.style.opacity = parseFloat(fO).toFixed(2);                    bLayer.style.opacity = o;                    if ('v' === 'v') {                        bLayer.style.filter = 'alpha(opacity=' + ieo + ')';                        tLayer.style.filter = 'alpha(opacity=' + (100 - ieo) + ')';                    }                }                else                {                    bLayer.style.opacity = parseFloat(fO).toFixed(2);                    tLayer.style.opacity = o;                    if ('v' === 'v') {                        tLayer.style.filter = 'alpha(opacity=' + ieo + ')';                        bLayer.style.filter = 'alpha(opacity=' + (100 - ieo) + ')';                    }                    //document.getElementById("main").innerHTML = parseFloat(fO).toFixed(2);                }                ;                console.log(Number(tLayer.style.opacity) + Number(bLayer.style.opacity));            }

I've only used basic css3 animation, and seems to run smoothly enough, but with something like this it may not be as smooth, you'll just have to try and find out.

Edited April 21, 2015 by dsonesuk

[dsonesuk]

I just noticed the background colour that is supposed applied to IE less than 9, is being applied to firefox top/bottom layers also.

 

and the

 

I've been watching the animation and there does still appear to be a very slight flicker - or more of a kind of pulsating thing

 

is because you are fading in AND out a single image, so it will give a pulsating effect.

[Lucy]

Fixing those two things makes the animation run smoothly - thanks very much!