Fade-text

6 svar · 622 visningar · startad av asp 21 sep. 2005

aspMedlem sedan aug. 2002747 inlägg

21 sep. 2005 20:35#1

	<script language="JavaScript">
	function citat() {
	i=0; y=0;
	text = new Array();
	text[i++] = "Gå in tungt!";
	text[i++] = "Jag har inte tid.";
	text[i++] = "Fortsätt så, utveckla dina tankar, släpp fram pungen inom dig.";   
	
	skr = new Array();
	skr[y++] = "/ Schneider";
	skr[y++] = "/ Bänkt";
	skr[y++] = "/ Schneider";	

	antal_texter=i;
	slumpat_tal =Math.floor(Math.random()*antal_texter);
	document.getElementById('citat').innerHTML = text[slumpat_tal];
	document.getElementById('skribent').innerHTML = skr[slumpat_tal];
	setTimeout("citat()",6500);
	}
	</script>

Hur skulle det se ut om man ville att det var "fade" mellan varje citat som kommer upp.

Peter SMedlem sedan dec. 20025 484 inlägg

22 sep. 2005 11:10#2

Ett enkelt exempel:

	<script language="JavaScript">
	function citat() {
	i=0; y=0;
	text = new Array();
	text[i++] = "Gå in tungt!";
	text[i++] = "Jag har inte tid.";
	text[i++] = "Fortsätt så, utveckla dina tankar, släpp fram pungen inom dig.";   
	
	skr = new Array();
	skr[y++] = "/ Schneider";
	skr[y++] = "/ Bänkt";
	skr[y++] = "/ Schneider";	

	antal_texter=i;
	slumpat_tal =Math.floor(Math.random()*antal_texter);

	var c = document.getElementById('citat');
	var s = document.getElementById('skribent');
	c.style.color = "rgb(255,255,255)";
	s.style.color = "rgb(255,255,255)";
	c.innerHTML = text[slumpat_tal];
	s.innerHTML = skr[slumpat_tal];

	fade(255);

	window.setTimeout("citat()", 6500);
	}

	function fade(w){
	    if (w > 0){
		document.getElementById("citat").style.color = "rgb("+w+","+w+","+w+")";
		document.getElementById("skribent").style.color = "rgb("+w+","+w+","+w+")";
		w -= 20;
		window.setTimeout("fade("+w+")", 100);
	    } else { return }
	}
	</script>

aspMedlem sedan aug. 2002747 inlägg

27 sep. 2005 18:35#3

Hmm, verkar inte riktigt stämma...

Texten är i vit och bakgrunden i blått. Så efter att citat visats skall den fade-a från vitt till blått och sedan det nya citatet skall fade-a från blått (så det inte syns) till vitt...

Den blåa färgen är #336699

emissionMedlem sedan dec. 19996 095 inlägg

27 sep. 2005 18:59#4

Red: Glöm...

Peter SMedlem sedan dec. 20025 484 inlägg

27 sep. 2005 23:10#5

Ännu ett enkelt exempel:

<script language="JavaScript">
	function citat() {
	i=0; y=0;
	text = new Array();
	text[i++] = "Gå in tungt!";
	text[i++] = "Jag har inte tid.";
	text[i++] = "Fortsätt så, utveckla dina tankar, släpp fram pungen inom dig.";   
	
	skr = new Array();
	skr[y++] = "/ Schneider";
	skr[y++] = "/ Bänkt";
	skr[y++] = "/ Schneider";	

	antal_texter=i;
	slumpat_tal =Math.floor(Math.random()*antal_texter);

	var c = document.getElementById('citat');
	var s = document.getElementById('skribent');
	c.style.color = "rgb(51,102,153)";
	s.style.color = "rgb(51,102,153)";
	c.innerHTML = text[slumpat_tal];
	s.innerHTML = skr[slumpat_tal];

	fade(51, 102, 153);

	window.setTimeout("citat()", 6500);
	}

	function fade(r, g, b){
	    if (r < 255 || g < 255 || b < 255){
		document.getElementById("citat").style.color = "rgb("+r+","+g+","+b+")";
		document.getElementById("skribent").style.color = "rgb("+r+","+g+","+b+")";
		r = parseInt(r * 1.1) > 255 ? 255 : parseInt(r * 1.1);
		g = parseInt(g * 1.06) > 255 ? 255 : parseInt(g * 1.06);
		b = parseInt(b * 1.03) > 255 ? 255 : parseInt(b * 1.03);
		window.setTimeout("fade("+r+","+g+","+b+")", 100);
	    } else { return }
	}
</script>

aspMedlem sedan aug. 2002747 inlägg

28 sep. 2005 18:06#6

Framsteg! Men texten bara försvinner när citat visats. Jag vill att det skall fade-a tillbaka! ;)

Peter SMedlem sedan dec. 20025 484 inlägg

28 sep. 2005 23:02#7

Ett tredje simpelt exempel ;)

<script language="JavaScript">
	function citat() {
	i=0; y=0;
	text = new Array();
	text[i++] = "Gå in tungt!";
	text[i++] = "Jag har inte tid.";
	text[i++] = "Fortsätt så, utveckla dina tankar, släpp fram pungen inom dig.";   
	
	skr = new Array();
	skr[y++] = "/ Schneider";
	skr[y++] = "/ Bänkt";
	skr[y++] = "/ Schneider";	

	antal_texter=i;
	slumpat_tal =Math.floor(Math.random()*antal_texter);

	var c = document.getElementById('citat');
	var s = document.getElementById('skribent');
	c.style.color = "rgb(51,102,153)";
	s.style.color = "rgb(51,102,153)";
	c.innerHTML = text[slumpat_tal];
	s.innerHTML = skr[slumpat_tal];

	fadein(51, 102, 153);

	}

	function fadein(r, g, b){
	    if (r < 255 || g < 255 || b < 255){
		document.getElementById("citat").style.color = "rgb("+r+","+g+","+b+")";
		document.getElementById("skribent").style.color = "rgb("+r+","+g+","+b+")";
		r = parseInt(r * 1.1) > 255 ? 255 : parseInt(r * 1.1);
		g = parseInt(g * 1.06) > 255 ? 255 : parseInt(g * 1.06);
		b = parseInt(b * 1.03) > 255 ? 255 : parseInt(b * 1.03);
		window.setTimeout("fadein("+r+","+g+","+b+")", 100);
	    } else {
		window.setTimeout("fadeout("+r+", "+g+", "+b+")", 750);
	    }
	}

	function fadeout(r, g, b){
	    if (r > 51 || g > 102 || b > 153){
		document.getElementById("citat").style.color = "rgb("+r+","+g+","+b+")";
		document.getElementById("skribent").style.color = "rgb("+r+","+g+","+b+")";
		r = parseInt(r * 0.9) < 51 ? 51 : parseInt(r * 0.9);
		g = parseInt(g * 0.94) < 102 ? 102 : parseInt(g * 0.94);
		b = parseInt(b * 0.97) < 153 ? 153 : parseInt(b * 0.97);
		window.setTimeout("fadeout("+r+","+g+","+b+")", 100);
	    } else { window.setTimeout("citat()", 1000) }
	}