Erscheineffekt

W

WorldWideWeb

Mitglied
Hallo Forum,
ich möchte in meine Homepage so eine Art erscheineffekt machen.
Wie in einer Präsentation.
So soll das ganze dann aussehen:
YouTube Video


Das ganze soll dann also - aufgehen heißt der Effekt bei OpenOffice.

Geht so was mit JavaScript. Mit Flash kenne ich mich leider überhaupt nicht aus.

Danke im Vorraus
WorldWideWeb
 
Zuletzt bearbeitet von einem Moderator:
Offtopic: Wieso hast du in deinem Album die Grafik von meiner Webseite?

Jetzt zum Thema. Du meinst einen fade-Effekt? Also der Text oder irgendwas anderes soll von unsichtbar zu sichtbar werden?

Das ist mit JavaScript ohne weiteres möglich. Die Frage ist nur, ob deine Kenntnisse dafür ausreichen. Mit einem Framework wie jQuery wäre das mit einer Zeile Quelltext möglich, ansonsten sind es eben ein paar mehr (aber nicht viele!).
Wie sehen deine JS-Kenntnisse denn aus?
 
So schwer ist das nicht. Du brauchst einen Timer (window.setIntervall) um die Animation zu updaten und dort setzt du die Transparenz höher bis sie bei 100 angekommen ist.

Hab das mal schnell zusammengehackt. Musst du an deine Bedürfnisse anpassen und noch support für den IE einbauen (kennt kein opacity).

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Page title</title>
</head>

<body>
	<div style="display:none;" id="fade">Bla bla bla</div>
	
	<script type="text/javascript">
	/* <![CDATA[ */
		function fadeIn(el) {
			var op = 0;
			el.style.opacity = 0;
			el.style.display = 'block';
			
			var timer = window.setInterval(function() {
				op += 1;
				
				if(op >= 100) {
					op = 100
					window.clearInterval(timer);
				}
				
				el.style.opacity = op/100;
			}, 33);
		}
		
		var obj = document.getElementById("fade");
		fadeIn(obj);
	/* ]]> */
	</script>
</body>

</html>
 
Ich möchte nicht aufdringlich werden, denn dein Beitrag hat mir schon sehr weitergeholfen und ich sage auch ganz groß Danke.

Aber geht es auch, dass das ganze auch von unten nach oben fliegt und währenddessen erscheint?
 
Ja, aber je nach dem in welchem Kontext das Element steht, müsste man das eventuell auf eine andere Art machen. Da kann ich dir jetzt nicht auf Anhieb weiter helfen.
 
Ja, in dem du einfach folgendes streichst

Code: 
style="display:none;"

und dafür das Element via JS unsichtbar machst, bevor du es einfadest.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Page title</title>
</head>

<body>
	<div id="fade">Bla bla bla</div>
	
	<script type="text/javascript">
	/* <![CDATA[ */
		function fadeIn(el) {
			var op = 0;
			el.style.opacity = 0;
			el.style.display = 'block';
			
			var timer = window.setInterval(function() {
				op += 1;
				
				if(op >= 100) {
					op = 100
					window.clearInterval(timer);
				}
				
				el.style.opacity = op/100;
			}, 33);
		}
		
		var obj = document.getElementById("fade");
		obj.style.display = 'none';
		fadeIn(obj);
	/* ]]> */
	</script>
</body>

</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück