javascript - Text fade in efter lidt tid - Udvikleren.dk

Tags: javascript

<< < 1 2 > >>

Bruger #15540 @ 14.03.10 13:22

jeg har lavet en animation som kører ned og ligger et hvidt underlag og når den er kørt vil jeg gerne ha at teksten skal begynde at fade in... men fordi at baggrunden er grå kan det ses hvis jeg bare starter med at gøre teksten hvid og så sætter den til at fade... så skal teksten fade ud igen når man trykker på et link og derefter skjules så at slut animationen kan laves færdig...

Hmm måske er det nemmere at forstå hvis man ser det.. http://www.gratisupload.dk/download/41364/

Kode

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css" />
		<style type="text/css">
#knap1 {
	position: absolute;
	z-index: 3;
}
#knap2 {
	position: absolute;
	z-index: 4;
}
#knap3 {
	position: absolute;
	z-index: 2;
}
#knap4 {
	position: absolute;
	z-index: 1;
}
#hoved {
	position: absolute;
	z-index: 5;
}
		</style>
		
			<script type="text/javascript">

function changeImage(img_src, img_name) {

document[img_name].src=img_src;
}
destination=0;
function Ned() {
  var at=parseInt(bund.style.top)+5;
  bund.style.top =at +'px';
  var at=parseInt(Tekstbody.style.height)+5;
  Tekstbody.style.height =at +'px';
  if(at!=destination){
    setTimeout(Ned,10);
	
  }

}
function init(){
  bund = document.getElementById('bund');
  bund.style.top = '310px';
  destination=560;
  Tekstbody = document.getElementById('Tekstbody');
  Tekstbody.style.height = '0px';
  destination=250;
  Ned();
  Text=document.getElementById("Text");
  Text.style.visibility='hidden';
  setTimeout("Text.style.visibility = 'visible'",1500);
  }

window.onload = init;

function Klik(){
  bund = document.getElementById('bund');
  bund.style.top = '560px';
  destination=305;
  Tekstbody = document.getElementById('Tekstbody');
  Tekstbody.style.height = '250px';
  destination=0;
  Op();
  
  }
  
function Op() {
  var at=parseInt(bund.style.top)-5;
  bund.style.top =at +'px';
  var at=parseInt(Tekstbody.style.height)-5;
  Tekstbody.style.height =at +'px';
  if(at!=destination){
    setTimeout(Op,10);
  }
  setTimeout("window.location.assign('site2.html')",1500);
}
			</script>

	</head>
	
		<body id="body" background="Baggrund.png">

				<img src="Banner.png" id="Banner">

			<div id="BagMenu">
				<img src="Bag.png">
			</div>
			<div id="knap1">
				<img src="1.png" id="1">
			</div>
			<div id="knap2">
				<img src="6.png">
			</div>
			<div id="knap3">
				<img src="3.png" id="3">
			</div>
			<div id="knap4">
				<img src="4.png" id="4">
			</div>
			
			<div id="hoved">
				<img src="hoved.png" usemap="#menu" border="0">
			</div>
						
<map name="menu">

	<area shape ="rect" coords ="28,20,208,61"
		onmouseover="changeImage('9.png','1')"
		onmouseout="changeImage('1.png','1')"
		onclick="Klik('site1.html')">

	<area shape ="rect" coords ="410,20,588,61"
		onmouseover = "changeImage('11.png','3')"
		onmouseout = "changeImage('3.png','3')"
		href ="Site3.html">

	<area shape ="rect" coords ="590,20,768,61"
		onmouseover = "changeImage('12.png','4')"
		onmouseout = "changeImage('4.png','4')"
		href ="Site4.html">
</map> 
			<div id="Tekstbody"><div id="text" >
			Processorer har siden tidernes morgen været brugt til 2 ting, at være operatør, med beregning osv. dette sker ved brug af processorens busbredde, som skrives i MHz og GHz, som betegner hvor meget der kan komme igennem processoren på en gang, man kan også se det som et vandfald, at desto bredere, desto mere vand kan vi få igennem. Vores processor er en meget vigtig del i vores computer, da den skal udele opgaverne til alle de andre komponenter i computeren.
Processoren er placeret på nordbroen sammen med RAM, og i nutidens computere også grafikkort,som er et høj hastigheds punkt i computeren, hvor alle de hurtigste ting foregår.
På grund af at hastigheden er hurtigst under lave afstande, er nordbroen placeret tæt på grafikkort, processor, og RAM, de mange hurtige overførsler skaber også en del varme, og pga dette skal der også være stor køler på nordbroen, så den ikke varmer de andre omkring liggende komponenter op, eller selv overopheder.
Processorer tænker i bits og bytes, som behandles efter hvor mange bit processoren er, i 1980’erne kom 8-bit så småt frem, og i år 2009 er man i gang med overgangen til 64 bit fra 32 bit, dvs. vi har har haft en 8-dobling af hastigheden på ca. 30 år.
Da Intel slog igennem med deres processore, var det fordi de havde pipelining, som gjorde at den kunne lave flere ting samtidig, faktisk kunne den lave 10-20 instruktioner samtidig, man kan sammenligne det lidt med et samlebånd, for hver gang du starter på en ny ting, så bliver der også færdiggjort en. I billedet herunder ses systemet bag pipelining:
		
			</div></div>
				<img src="bund.png" id="bund">
		</body>
</html>

I behøver ikke at se på andre fejl der er i den xD det her er nemlig kun en test side

14 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 3 karma

Sorter efter stemmer Sorter efter dato

Bruger #8773 @ 15.03.10 15:39

658

det er noget med document.getElementById("id til div").css.display="none";

Mener jeg

Bruger #15540 @ 16.03.10 18:05

stort set

sådan her gjorde jeg:
document.getElementById('text').style.display = 'none'

nu skal jeg bare lave en fade funktion, jeg fandt er eksempel men kan ikke få det til at virke så teksten starter med at være hvid og fade ud til sort...

Kode

<script language="JavaScript1.2">
hex=255 // Initial color value.

function fadetext(){ 
if(hex>0) { //If color is not black yet
hex-=11; // increase color darkness
document.getElementById("sample").style.color="rgb("+hex+","+hex+","+hex+")";
setTimeout("fadetext()",20); 
}
else
hex=255 //reset hex value
}

</script>

<div id="sample" style="width:100%"><h3>John slowly faded into view</h3></div>
<button onClick="fadetext()">Fade Text</button>

sådan ser eksemplet ud

Indlæg senest redigeret d. 16.03.2010 18:06 af Bruger #15540

Bruger #8773 @ 16.03.10 22:16

658

hvis du skal fade, skal du nok bruge noget opacity - her kræver det så at du laver flere cases til forskellige browsers da ikke alle browsere tolker opacity på samme måde.

Her vil det være en utrolig fordel for dig at bruge et bibliotek eller plugin. Du kan jo bare bruge det til denne ene funktion

Bruger #15540 @ 17.03.10 13:52

jeg fandt et eksempel og fik det til at virke

sådan her ser det hele ud nu:

Kode

<html>
	<head>
	<LINK REL="SHORTCUT ICON" HREF="Logo.png">
		<link rel="stylesheet" type="text/css" href="style.css" />
		<style type="text/css">
#knap1 {
	position: absolute;
	z-index: 3;
}
#knap2 {
	position: absolute;
	z-index: 4;
}
#knap3 {
	position: absolute;
	z-index: 2;
}
#knap4 {
	position: absolute;
	z-index: 1;
}
#hoved {
	position: absolute;
	z-index: 5;
}
		</style>
		
			<script type="text/javascript">

function changeImage(img_src, img_name) {

document[img_name].src=img_src;
}

var destination, top, height, visibility, text, url;

destination=0;

function Ned() {
  var at=parseInt(bund.style.top)+5;
  bund.style.top =at +'px';
  var at=parseInt(Tekstbody.style.height)+5;
  Tekstbody.style.height =at +'px';
  if(at!=destination){
    setTimeout(Ned,10);
	
  }

}
function init(){
  bund = document.getElementById('bund');
  bund.style.top = '310px';
  destination=560;
  Tekstbody = document.getElementById('Tekstbody');
  Tekstbody.style.height = '0px';
  destination=250;
  Ned();
  setTimeout("fade()",1500);
  }
  

window.onload = init;

function Klik(url){
  bund = document.getElementById('bund');
  bund.style.top = '560px';
  destination=305;
  Tekstbody = document.getElementById('Tekstbody');
  Tekstbody.style.height = '250px';
  destination=0;
  Op();
  document.getElementById('text').style.visibility = 'hidden';
  setTimeout("window.location.assign('url')",1500);
  }
  
function Op() {
  var at=parseInt(bund.style.top)-5;
  bund.style.top =at +'px';
  var at=parseInt(Tekstbody.style.height)-5;
  Tekstbody.style.height =at +'px';
  if(at!=destination){
    setTimeout(Op,10);
  }
}

var r = 255;
var g = 255;
var b = 255;
function fade() { 
document.getElementById('text').style.visibility = "visible";
document.getElementById('text').style.color="rgb(" + r + "," + g + "," + b + ")";
r -= 5
g -= 5
b -= 5
if(r>0) 
setTimeout("fade('"+text+"')", 10); 
}


			</script>

	</head>
	
		<body id="body" background="Baggrund.png">

				<img src="Banner.png" id="Banner">

			<div id="knap1">
				<img src="1.png" id="1">
			</div>
			<div id="knap2">
				<img src="6.png">
			</div>
			<div id="knap3">
				<img src="3.png" id="3">
			</div>
			<div id="knap4">
				<img src="4.png" id="4">
			</div>
			
			<div id="hoved">
				<img src="hoved.png" usemap="#menu" border="0">
			</div>
						
<map name="menu">

	<area shape ="rect" coords ="28,20,208,61"
		onmouseover="changeImage('9.png','1')"
		onmouseout="changeImage('1.png','1')"
		onclick="Klik('site1.html')">

	<area shape ="rect" coords ="410,20,588,61"
		onmouseover = "changeImage('11.png','3')"
		onmouseout = "changeImage('3.png','3')"
		onclick="Klik('site3.html')">

	<area shape ="rect" coords ="590,20,768,61"
		onmouseover = "changeImage('12.png','4')"
		onmouseout = "changeImage('4.png','4')"
		onclick="Klik('site4.html')">
</map> 
			<div id="Tekstbody"><p><span id="text" style="visibility:hidden;">
			Processorer har siden tidernes morgen været brugt til 2 ting, at være operatør, med beregning osv. dette sker ved brug af processorens busbredde, som skrives i MHz og GHz, som betegner hvor meget der kan komme igennem processoren på en gang, man kan også se det som et vandfald, at desto bredere, desto mere vand kan vi få igennem. Vores processor er en meget vigtig del i vores computer, da den skal udele opgaverne til alle de andre komponenter i computeren.
Processoren er placeret på nordbroen sammen med RAM, og i nutidens computere også grafikkort,som er et høj hastigheds punkt i computeren, hvor alle de hurtigste ting foregår.
På grund af at hastigheden er hurtigst under lave afstande, er nordbroen placeret tæt på grafikkort, processor, og RAM, de mange hurtige overførsler skaber også en del varme, og pga dette skal der også være stor køler på nordbroen, så den ikke varmer de andre omkring liggende komponenter op, eller selv overopheder.
Processorer tænker i bits og bytes, som behandles efter hvor mange bit processoren er, i 1980’erne kom 8-bit så småt frem, og i år 2009 er man i gang med overgangen til 64 bit fra 32 bit, dvs. vi har har haft en 8-dobling af hastigheden på ca. 30 år.
Da Intel slog igennem med deres processore, var det fordi de havde pipelining, som gjorde at den kunne lave flere ting samtidig, faktisk kunne den lave 10-20 instruktioner samtidig, man kan sammenligne det lidt med et samlebånd, for hver gang du starter på en ny ting, så bliver der også færdiggjort en. I billedet herunder ses systemet bag pipelining:
		
			</span></p></div>
				<img src="bund.png" id="bund">
		</body>
</html>

nu er der kun et sidste problem med Javascriptet, det er linkene.... jeg har lavet funktionen Klik(url) som bliver startet onclick,fx onclick="Klik('site1.html')" men den ryger bare over til siden "url" og ikke site1.html som var meningen... ?

<< < 1 2 > >>

Text fade in efter lidt tid

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler