Webseiten transparent einblenden

Florians Forum � Webmaster � Ideen f�r Skripte und sonstige Quellcodes � Webseiten transparent einblenden

Themen-Einstellungen

Thema drucken

Bereich wechseln

#1 | Webseiten transparent einblenden datum

01.07.2013 16:41

Hallo Florian,
mit jQuery lassen sich die Webseiten über die Transparenz besonders einfach einblenden.
Leider macht der IE mal wieder Schwierigkeiten.
Alle Befehlszeilen, bei den die Position mit "absolute" ("position:absolute") formatiert worden sind, werden zuerst aufgeblendet. Erst dann beginnt der eigentliche Einblend-Effekt.

Gibt es eine Möglichkeit die Webseiten von Anfang an transparent darzustellen und dann nach Aufruf langsam die Transparenz auf 100% laufen zu lassen?
Oder gibt es da auch die gleichen Schwierigkeiten?

z.B.:
<style>
body {opacity:0.5;filter:alpha(opacity=50);}
</style>

<script>
......
...... document.write .......

</script>

Gruß
Wolfgang

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#2 | RE: Webseiten transparent einblenden datum

04.07.2013 22:26

florian-zier

Administrator

Informationen anzeigen

Beitr�ge:	837
Punkte:	1895
Registriert seit:	19.04.2007
Wohnort:	Oberkirch

Hallo Wolfgang,
es scheint, als ob der IE bereits w�hrend dem Laden der Seite (des DOM) zu rendern beginnt.
$(document).ready(...) wird erst nach Laden der Struktur ausgef�hrt, wenn auch noch vor dem Laden aller Ressourcen wie z.B. Bilder. Bin mir da jetzt nicht ganz sicher, wie andere Browser das handhaben, bei Firefox habe ich aber bereits Einstellungs-M�glichkeiten gesehen, wie oft und fr�h gerendert wird.

Vielleicht hilft es, fr�hstm�glich den kompletten Body auszublenden und nach Laden des DOM dann mit dem Einblendeffekt zu beginnen.

1
2
3
4
5
6
7
8
9
10
11
12
 
<body>
<script type="text/javascript">
// sofort Body ausblenden:
$('body').hide();
// DOM geladen:
$(document).ready(function() {
	$('body').fadeIn(3000, function() {	//Body wieder einblenden.
	});
});
</script>
 
... weiterer Content ...
 

So k�nnte ich mir vorstellen, dass es funktioniert. Allerdings kann ich seit einiger Zeit keine IE-Tests mehr durchf�hren.
Das Skript ist also ungetestet. Trotzdem viel Gl�ck!

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#3 | RE: Webseiten transparent einblenden datum

05.07.2013 12:31 (zuletzt bearbeitet: 05.07.2013 13:05)

Hallo Florian,
die Idee mit "$('body').hide();" ist super (Eingebau Kopfzeile). Das Einblenden funktioniert viel sauberer, kein kurzzeitiges aufhellen! Spitze!
Aber!
Selbst wenn ich den Body mit "opacity:0.2;filter:alpha(opacity=50);" laufen lasse, blitzen die Titelleisten (Positioniert mit "absolute") erst auf und der Hintergrund wird dann transparent.

Ich glaube das es am "fadeIn" liegt.
Kann man mit 'hide' den Body für z. B. 500ms ausblenden und parallel "fadeIn" mit z.B. 3000ms laufen lassen?
Wenn es geht den Hintergrund Grau ausblenden, nicht strahlend weiss.

PS1: Wenn ich noch zusätzlich "$('body').fadeOut();" vor "$('body').hide();" setze (auch nur so und nicht "fadeOut" allein!) dann verkürzt sich das Aufblitzen der Titelleiste mindestens um die Hälfte!!! (Warum eigendlich?)

PS2: Wenn ich vor "fadeIn" die gleiche Funktion mit mindestens 1000ms "fadeOut" setzte, gibt es kein Aufblitzen. Die Seite wird dann natürlich langsam ausgeblendet und dann wieder eingeblendet.

Bis dann und schon mal besten Dank im Voraus

Wolfgang

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#4 | RE: Webseiten transparent einblenden datum

07.07.2013 20:18

Hallo Wolfgang,
ich habe nun einiges ausprobiert und nun hoffentlich eine gut funktionierende Variante.

Du kannst dir aussuchen, ob der Einblend-Effekt sofort oder erst nach dem vollst�ndigen Ladend es DOM gestartet wird.
Bei ersterer Variante sieht man dann aber auch m�glicherweise eher, wie die Seite gerade noch nachgeladen und aufgebaut wird.
Bei letzterer beginnt der Effekt erst sp�ter und durch die bereits komplett geladene Struktur sollte sich kaum noch etwas Verschieben, au�er es werden immer noch Bilder geladen und dann erst angezeigt werden.

Bei langsamen Verbindungen ist die erste von Vorteil, da bei langsamen Ladezeiten nicht so lange eine leere Seite angezeigt wird. Die zweite ist nat�rlich bei schnellen Verbindungen sch�ner, da der Effekt kaum sp�rbar sp�ter einsetzt und die Seite ohne Verrutschen von Elementen im (fast) fertigen Zustand nur eingeblendet wird.

Daf�r enth�lt die Testseite im Anhang zwei verschieden Skript-Bl�cke. Um schnell zwischen ihnen wechseln zu k�nnen, musst du nur bei dem einen das anf�ngliche //* in ein /* �ndern und umgekehrt. Damit k�nnen die Bl�cke mit einem "/" mehr bzw. weniger relativ z�gig ein- und auskommentiert werden.

Falls es trotz einem der beiden Skript-Bl�cke immer noch kurz aufblitzen sollte, habe ich noch einen weiteren Style- und Noscript-Block eingef�gt.
Du kannst es erstmal ohne sie versuchen, ansonsten wird dadurch der Body standardm��ig per Style ausgeblendet, in der Hoffnung, dass dieser schon fr�h genug angewendet wird, um Aufblitzer zu vermeiden. Damit bei deaktiviertem Javascript der Body nicht unsichtbar bleibt, wird durch das Noscript-Tag der Body in diesem Fall doch wieder eingeblendet. Dies geschieht dann zwar ganz ohne Effekt, aber besser als nichts von der Seite zu sehen.

Die Hintergrund-Farbe f�r das HTML-Tag ist wohl auch nur n�tig, wenn beim Ausblenden eine wei�e Seite zu sehen ist. Somit bekommt das HTML-Tag die gleiche Hitnergrund-Farbe wie der Body und damit f�llt es nicht auf, dass der Body selbst komplett unsichtbar war.

Beim Testen ohne Javascript kannst du das �brigens daran erkennen, dass nur Zahlen von 1-10 auf der Seite angezeigt werden. Mit Javascript hingegen von 1-50, damit man gut erkennen kann, mit welchen Skript-Einstellungen getestet wird. Der Skript-Teil f�r die Ausgabe von Zahlen ist nat�rlich nicht relevant f�r den sp�teren Einsatz und dient nur zu Testzwecken.

Viel Spa� damit!

florian-zier hat folgende Dateien an diesen Beitrag angeh�ngt

FadeWebsite.zip

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#5 | Seite einblenden datum

07.07.2013 20:27 (zuletzt bearbeitet: 07.07.2013 20:49)

Hallo Florian,
die Leisten mit der Positionierung "absolute" werden immer noch kurz eingeblendet.
Positionierung mit "relative" oder ohne "absolute" funktionieren.
Hm.
Hast Du noch eine Idee?

Gruß
Wolfgang

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#6 | RE: Webseiten transparent einblenden datum

07.07.2013 23:26 (zuletzt bearbeitet: 07.07.2013 23:41)

florian-zier

Administrator

Informationen anzeigen

Beitr�ge:	837
Punkte:	1895
Registriert seit:	19.04.2007
Wohnort:	Oberkirch

Hallo Wolfgang,
wenn es trotz dem neuen Style-Block noch nicht richtig funktioniert, scheint der IE sehr spezielle Render-Einstellungen zu besitzen.

Wenn ein Skript den Body nicht schnell genug ausblendet, h�tte ich es ja noch verstanden, da es seine Zeit bis zur Ausf�hrung braucht. Allerdings werden auch direkt eingef�gte Skripte sofort wie der restliche Inhalt geladen, ein document.write schreibt den Text ja auch noch raus bevor der Rest der Seite nachgeladen wird.
Bei jQuery w�rde das Einlesen der Bibliothek evtl. noch eine Rolle spielen.

Aber wenn der Body per CSS als komplett durchsichtig definiert wurde, sollte das die schnellste M�glichkeit sein, den Style zu manipulieren. Die CSS-Anweisung sollte am besten aber auch im Head der Seite selbst stehen. Ausgelagert in eine externe Datei kann es wirklich vorkommen, dass die CSS-Datei erst nach Inhalten des Body geladen und angewendet werden kann.
Wenn dann trotzdem Elemente aufblitzen, dann kannst du wohl wenig selbst daran �ndern, da der Browser das nunmal so macht. Die CSS-Anweisungen scheinen bei dir eigentlich auch schnell genug geladen worden zu sein, sonst w�rden auch z.B. relativ positionierte Elemente kurz aufblitzen.

Vielleicht baust du nochmal ein paar absolute Elemente in meine Testseite ein und pr�fst, ob diese dort auch aufblitzen.
Achte aber darauf, nicht beide Skript-Bl�cke gleichzeitig zu aktivieren, denn sonst macht der eine einen FadeIn-Effekt und der andere blendet die Seite danach versehentlich gleich wieder aus. Einzeln aktiviert haben sie bei mir aber wunderbar funktioniert.

Viel Gl�ck!

P.S.:

Vielleicht wird ja ein Inline-Style f�r das Body-Tag schneller geladen als �ber einen CSS-Selektor:

1
 
<body style="opacity:0.0;filter:alpha(opacity=0);" �>

Beim Einlesen des Bodys steht so der Style bereits in einem seiner Attribute und wird m�glicherweise fr�her ausgewertet. Bei anderen CSS-Anweisungen in extra Style-Tags wird evtl. zuerst der Inhalt aufgebaut und danach gepr�ft, welche Regeln angewendet werden sollen. Aber das ist nur eine waage Theorie.

Je nach IE-Version brauchst du evtl. auch keine filter-Anweisung, Probier es einmal mit und einmal ohne, vielleicht hat jQuery Probleme wenn ein Browser beides kann. Beim IE10 k�nnte ich mir vorstellen, dass er die alten filter-Anweisungen noch versteht, aber ebenso auch opacity. Dann ist eben noch die Frage, ob es eher explizit gesetzt werden soll, um sicher f�r das Ausblenden zu sorgen oder eher ein Konflikt verursacht wird. opacity k�nnte evtl. auch zugunsten f�r filter im IE entfernt werden m�ssen.

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#7 | RE: Webseiten transparent einblenden datum

12.07.2013 14:40

Hallo Florian,
ich habe das Script auch an langsamen Rechnern ausprobiert. Sehr unbefriedigend bei großen Seiten.
Es sieht gut aus bei kleinen Seiten, wie Logout, Login oder Suche.
Ich habe mich entschieden, den Einblendeffekt für das gesamte Forum erst mal herauszunehmen.

Ist es möglich kleine, nur bestimmte Bereiche mit dem Einblendeffekt auszustatten? Über "ID" oder "class".

<div id="..."> ... </div> oder

<table id="..."> ... </table> oder

<td id="..."> ... </td>

Gruß
Wolfgang

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#8 | RE: Webseiten transparent einblenden datum

12.07.2013 22:21

florian-zier

Administrator

Informationen anzeigen

Beitr�ge:	837
Punkte:	1895
Registriert seit:	19.04.2007
Wohnort:	Oberkirch

Hallo Wolfgang,
es ist schade, dass es auf langsamen Rechnern nicht schnell genug abl�uft. Aber auch nicht verwunderlich, immerhin wird alles gleichzeitig permanent neu gezeichnet. Die Transparenz verschwindet ja nicht auf einmal, sondern geht in sehr vielen kleinen Schritten flie�end �ber.

Aber sicher kannst du den Effekt nat�rlich auch auf bestimmte Elemente einschr�nken. Dabei ist es hilfreich zu wissen, dass jQuery praktischerweise eine zu CSS �hnliche (nahezu identische) Syntax verwendet, um Elemente auszuw�hlen. Dabei bedeutet $('body') einfach nur, dass alle Tags mit Bezeichnung Body selektiert werden, davon gibt es aber sowieso nur eines.

Ersetze den Aufruf einfach durch einen anderen Selektor wie z.B. $('#elemId'), um ein Element mit der ID elemId auszuw�hlen.
Die Auswahl nach einer Klasse geht demnach mit vorangestelltem Punkt, also $('.class-name').
Um nach Name bzw. anderen Attributen auszuw�hlen, hilft dir $('div[name="ElementName"]'), dann erh�ltst du alle DIVs mit dem Name-Attribut ElementName.

So lassen sich auch komplexere Selektoren zusammenstellen.

Ein Beispiel:

1
2
 
// Ein Element mit ID "content", darin SPANs mit dem Titel-Attribut "bereich" und darunter Elemente mit der Klasse "versteckt"
$('#content span[title="bereich"] .versteckt')
 

Die gew�hlten Elemente:

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="content">
	<span title="bereich">
		<a class="versteckt" href="#">Ich bin ausgewählt</a>
		<span class="versteckt">Ich auch</span>
	</span>
	<span title="bereich">
		<div class="versteckt">Ebenso ich</div>
	</span>
	<div title="bereich">
		<div class="versteckt">Ich nicht, mein Papa hat den Titel aber ist kein SPAN</div>
	</div>
</div>
 

Ebenso wie bei CSS lassen sich auch mehrere Elemente mit unterschiedlichen Selektoren gleichzeitig ansprechen. �bergebe einfach mehrere Selektoren, separiert mit Komma.

1
 
$('#elemId, .elemClass, *[name="elemName"]')

W�hlt alle Elemente, die auf #elemId, .elemClass oder *[name="elemName"] zutreffen.
Dabei bedeutet der * die Auswahl aller Elemente auf der Seite, welche aber nochmals auf das Name-Attribut elemName eingeschr�nkt werden.

Auch wenn du mehrere Elemente damit ausw�hlst, kannst du trotzdem direkt weitere Funktionen wie fadeOut darauf aufrufen, d.h. du musst nur $('body') durch deinen neuen Selektor ersetzen. Dabei wird der Fade-Effekt dann automatisch auf alle gew�hlten Elemente angewendet.

Um explizit alle Elemente einzeln durchzugehen, kannst du die Funktion jQuery.each() verwenden.

1
2
3
 
$.each($('span[name="bereich"]'), function(index, value) {
	alert($(this).attr('name') + ':\n\n' + value.outerHTML);
});
 

In $(this) steht immer das aktuell gew�hlte Element als jQuery-Objekt, d.h. du kannst darauf die von jQuery bereitgestellten Funktionen anwenden. In der �bergebenen value steht hingegen das native Objekt, du kannst dort also die �blichen Javascript-Befehle verwenden, aber keine jQuery-spezifischen.
In der Regel w�rdest du also wohl nur mit $(this) weiterarbeiten. Alternativ kannst du einfache Objekte auch in jQuery-Objekte umwandeln, das w�re z.B. mit $(value) m�glich.

index und value sind vor allem dann interessant, wenn du statt einem Selektor richtige Arrays �bergibst. Dann enth�lt die value Zahlen oder Strings.

Das sieht jetzt alles auf den ersten Blick vielleicht etwas umfangreich aus, aber wenn man das Prinzip erstmal verinnerlicht hat, lassen sich die richtigen Selektoren relativ einfach herleiten. Dann kann man auch prima damit arbeiten, ich w�nsche dir noch gutes Gelingen!

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#9 | RE: Webseiten transparent einblenden datum

14.07.2013 23:31

Wolfgang

Informationen anzeigen

Beitr�ge:	278
Punkte:	1169
Registriert seit:	17.01.2008

Hm

Hallo Florian,
wenn die Id="start" in einer Tabelle streckt (td), sollte das Script auch funktionieren, tut es leider nicht.
Oder habe ich hier etwas vergessen?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<script type="text/javascript">
(function(){
$('#start').fadeOut({
'complete'	: function(animation, jumpedToEnd) {
$('#start').fadeTo(3000, 1.0);
}
});
})();
</script>
 

<td  id="start">
 
TEST
 
</td>
 

Gruß
Wolfgang

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#10 | RE: Webseiten transparent einblenden datum

15.07.2013 23:59 (zuletzt bearbeitet: 17.07.2013 20:44)

florian-zier

Administrator

Informationen anzeigen

Beitr�ge:	837
Punkte:	1895
Registriert seit:	19.04.2007
Wohnort:	Oberkirch

Hallo Wolfgang,
das h�tte so im Prinzip funktionieren sollen.
Ich musste jetzt allerdings doch noch kleine Korrekturen vornehmen, das hat mich jetzt selbst �berrascht.

Die �u�erste Funktion diente eigentlich nur als Container, hat sich aber direkt selbst aufgerufen, man beachte auch die Klammern auf und zu noch ganz am Ende.
In diesem Fall funktioniert das nicht, wenn die auszublendenden Elemente bisher noch gar nicht geladen wurden, weil sie im HTML-Code erst sp�ter definiert wurden.
Entweder muss der Block nach Definition der auszublendenden Elemente folgen, oder du veranlasst gleich, dass die Ausf�hrung erst nach Laden des kompletten DOM erfolgt.
Dann kann das Skript auch im Head der Seite stehen, es wird dann zum entsprechenden Zeitpunkt ausgef�hrt.

Weiterhin ist es n�tig, dass die Tabellen-Zelle wirklich in einer kompletten und g�ltigen Tabelle steht, da sie bei mir ansonsten nicht ausgeblendet wurde. Ein DIV oder SPAN konnte ich sonst auch direkt ausblenden, dachte zuerst, es gibt einen Bug bei TDs. Wahrscheinlich hast du bereits eine Tabelle drumherum gebaut, wollte es aber trotzdem sicherheitshalber erw�hnen.

Au�erdem scheint hier tats�chlich die jQuery.each()-Methode n�tig zu sein, falls der Effekt mehrere Elemente gleichzeitig betreffen soll.
Da w�re es vielleicht besser, wenn jQuery das konsequent so handhaben w�rde, aber Methoden wie hide() wurden glaube ich wirklich auf alle dem Selektor entsprechenden Elemente angewendet, auch ohne foreach von jQuery.
Anmerkung: Habe gerade nochmals manuell und ohne each die Effekte ausgel�st und es hat funktioniert. Vielleicht macht es ja nur Probleme, wenn Optionen �bergeben werden oder eine zumindest eine Callback-Funktion, die ja das Einblenden wieder einleiten soll. Probiere damit einfach mal am besten ein wenig herum.

Da $(this) wie bereits im letzten Beitrag beschrieben das jeweilige Objekt aus dem aktuellen Iterationsschritt bereith�lt, kann darauf die anf�ngliche fadeOut()-Methode angewandt werden.
Da sich die Bedeutung von $(this) aber in der complete-Function �ndern k�nnte (im Prinzip kann sich der Kontext in jeder Function �ndern), speichern wir das Objekt in that zwischen, um es sp�ter dann wieder verwenden zu k�nnen. Diese Zwischenspeicherung war hier jetzt wohl nicht unbedingt n�tig, hat aber auch nicht geschadet.

Ohne die Angabe von duration beim fadeOut sieht man �brigens noch, wie das Objekt kurz ausgeblendet wird, da standardm��ig eine Zeitspanne gr��er 0s voreingestellt ist.

Als letzte kleine Erg�nzung zu meiner letzten Selektoren-Zusammenfassung sei noch gesagt, dass es mehrere Wege gibt, verschiedene Elemente gleichzeitig zu auszuw�hlen.
Einerseits k�nnen die Selektoren per Kommata getrennt oder die Auswahl auch nacheinander mit der add()-Methode aneinandergereiht werden.

1
2
 
var fadeElements = $('#start, #testrow');
var fadeElements = $('#start').add('#testrow');
 

Das ist wie vieles eben Geschmackssache. Letzteres ist wahrscheinlich sehr praktisch, wenn man sich eine Liste von Elementen generieren muss und die gew�nschte Auswahl nicht direkt manuell angeben kann.

Eine Testseite befindet sich nat�rlich wieder im Anhang.
Gute Nacht!

florian-zier hat folgende Dateien an diesen Beitrag angeh�ngt

FadeElement.zip

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

Hintergrund tranparent darstellen � � Profilbilder abspeichern mit Abfrage

�hnliche Themen

Antworten

Letzter Beitrag

Hintergrund tranparent darstellen
Erstellt im Forum Ideen f�r Skripte und sonstige Quellcodes von Wolfgang 7 12.06.2013 20:12
florian-zier • Zugriffe: 791
Super Zoom für Bilder - Mit Klick
Erstellt im Forum Ideen f�r Skripte und sonstige Quellcodes von Wolfgang 6 01.04.2013 17:59
Wolfgang • Zugriffe: 1720
Onlinezeitzähler
Erstellt im Forum Ideen f�r Skripte und sonstige Quellcodes von Wolfgang 17 18.06.2011 17:54
florian-zier • Zugriffe: 1276
Verzögertes Laden der Startseite durch schlechten Bilder-Server
Erstellt im Forum Funktionen & Template von Wolfgang 1 24.05.2009 19:39
florian-zier • Zugriffe: 531
Radware: Aktuelle DoS-Lücke in Firefox 3
Erstellt im Forum News von Emanuel 1 07.08.2008 13:34
florian-zier • Zugriffe: 721
Landkarte
Erstellt im Forum Funktionen von florian-zier 0 02.05.2007 20:12
florian-zier • Zugriffe: 918

Bitte geben Sie einen Grund f�r die Verwarnung an