Aufblenden wie bei Flash
mynon
- multimedia (audio & video)
0 Klawischnigg0 mynon0 Klawischnigg0 mynon
Hi wieder mal,
diesmal hab ich ein schwieriges Problem. (glaube ich)
Ich hab kein Flash und kenn mich auch nicht damit aus.
Ich hätte gerne so ne Art einfache Animation. Das heißt, dass wenn die Website geladen wird, die Bilder nicht einfach plötzlich da sind, sondern aufblenden und erscheinen wie bei Powerpoint und Flash-Sites. Das gleiche beim Text. Gibt es da ein Script, für das ich keine sonderlich großen Kentnisse brauche?
Ein Video will ich nicht.
MYNON
Hi there,
diesmal hab ich ein schwieriges Problem. (glaube ich)
net wirklich...
Ich hätte gerne so ne Art einfache Animation. Das heißt, dass wenn die Website geladen wird, die Bilder nicht einfach plötzlich da sind, sondern aufblenden und erscheinen wie bei Powerpoint und Flash-Sites. Das gleiche beim Text. Gibt es da ein Script, für das ich keine sonderlich großen Kentnisse brauche?
Wenn Du mit Animation 'einblenden' meinst, dann kannst Du das relativ einfach selbst machen. Wobei ich diesen Effekt auf Bilder beschränken würde, aber davon einmal abgesehen: Du weist allen Elementen, die Du einblenden möchtest, die Eigenschaft opacity:0 (für den IE: filter:alpha(opacity=0)) zu und lässt diese Eigenschaft mit einem entsprechenden Javascript in einer Schleife langsam größer werden.
Wenn Dir das zu mühsam ist, Du ohnehin nur Bahnhof verstehst und Du ohnehin nicht die Absicht hast, das jemals selbst begreifen zu wollen (wovon ich einmal schwer ausgehe), dann schau da nach, da finden sich einige solcher Skripte...
Hi,
Wenn Du mit Animation 'einblenden' meinst, dann kannst Du das relativ einfach selbst machen. Wobei ich diesen Effekt auf Bilder beschränken würde, aber davon einmal abgesehen: Du weist allen Elementen, die Du einblenden möchtest, die Eigenschaft opacity:0 (für den IE: filter:alpha(opacity=0)) zu und lässt diese Eigenschaft mit einem entsprechenden Javascript in einer Schleife langsam größer werden.
1. Soll es nicht größer werden, sondern nur aus volkommener Transparenz sich verfestigen.
2.Wie mach ich eine Schleife?
Wenn Dir das zu mühsam ist, Du ohnehin nur Bahnhof verstehst und Du ohnehin nicht die Absicht hast, das jemals selbst begreifen zu wollen (wovon ich einmal schwer ausgehe), dann schau da nach, da finden sich einige solcher Skripte...
Ja, ich verstehe nur Bahnhof, würde es aber trotzdem ganz gerne verstehen, da ich auf nightfire nur sehr raue Übergänge gefunden habe.
MYNON
Hi,
Hi there,
- Soll es nicht größer werden, sondern nur aus volkommener Transparenz sich verfestigen.
ja, das habe ich auch gemeint; die Opazität sollte größer werden.
2.Wie mach ich eine Schleife?
in javascript und für diesen Zweck mit setTimeout().
Ja, ich verstehe nur Bahnhof, würde es aber trotzdem ganz gerne verstehen, da ich auf nightfire nur sehr raue Übergänge gefunden habe.
Das hängt von der Wahl der Parameter ab. Afaik kannst Du bei jedem Skript die Dauer des Übergangs von Transparenz zu Opazität einstellen...
Hi,
Okay
ich verstehs
nur machen kann ichs trotzdem nicht
kannst du ungefähr schreiben, wie das Skript aussehen könnte???
MYNON
Hi there,
kannst du ungefähr schreiben, wie das Skript aussehen könnte???
Naja, das hier ist ja selfhtml, ich weiss ja, wie's geht ;)
Du plazierst ein Bild in Deinem Dokument:
<img src="blabla.gif" width="xxx" height="xxx" alt="" border="" style="opacity:0" id="BILD">
Damit hast Du einmal ein Bildchen, das keiner sieht (ausser die IE-Nutzer, für die mußt Du es selbst 'rausfinden)
in den body-Tag schreibst Du zB:
<body onload="erscheine()">
Das geht dann gut, wenn Du ein Javascript geschrieben hast, in dem folgende sinnreichen Anweisungen und Funktionen vorkommen:
var opIntervall=25 // mußt Du besten WErt selbst herausfinden...
var opStep= .01 // (je größer, desto schneller, aber Vorsicht, opacity 1 ist bereits komplett intransparent, ausser beim IE, da gehen die WErte von 0 bis 100)
function erscheine()
{
currOpacity=document.getElementById('BILD').style.opacity * 1;
currOpacity += opStep;
document.getElementById('BILD').style.opacity = currOpacity;
if (currOpacity < 1)
{
window.setTimeout('erscheine()',opIntervall);
}
}
Das ist nur zur Erklärung, aber es funktioniert, zumindest mit einem Bild im Mozilla und im Opera ab Version 9. Den Rest überlass ich Dir...
Hi,
vielleicht sollte man zusätzlich die Opazität nicht gleich per CSS, sondern im onload-Event per Javascript auf 0 setzen, damit Leute ohne JS auch was sehen.
Gruß
MrWurf
vielleicht sollte man zusätzlich die Opazität nicht gleich per CSS, sondern im onload-Event per Javascript auf 0 setzen, damit Leute ohne JS auch was sehen.
Wenn du dass tust kann es passieren das das Bild angezeigt wird, verschwindet und dann langsam einblendet. Die Prüfung ob Javascript eingschaltet ist musst du dann schon vorher machen.
Ciao Mason