Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

echo5-7 · 31-10-2010, 20:16

Dmig 5

Ok, jetzt muss ich doch mal fragen. Wenn man scrollt, sieht man ja, dass das Headerbild fixed ist. Was mich aber irritiert ist dieser Maskeneffekt, der zustande kommt auch wenn man Javascript deaktiviert. Scroll ich nach unten, wird der Hintergrund anders.

Wie geht das denn. Hab ich da irgendwas verpasst? Das ist doch kein HTML5 sondern normales (richtig schlechtes) XHTML, oder?

Gruß
echo

**sonar** · 31-10-2010, 20:41

Hab's mir jetzt nicht sooo genau angeschaut, aber das sind halt Spielereien mit z-index/position:fixed und so.

Und ja, das ist HTML 5.

echo5-7 · 31-10-2010, 20:52

hm, selbst wenn ich das mit dem z-index berücksichtige seh ich nicht wie das funktionieren könnte. hat html5 masken mit drin?

Nightflyer · 31-10-2010, 21:17

Zitat:

Zitat von echo5-7

hm, selbst wenn ich das mit dem z-index berücksichtige seh ich nicht wie das funktionieren könnte. hat html5 masken mit drin?

Das sind ganz einfach nur PNG's mit Transparenzkanal
http://www.designmadeingermany.de/ma...cover-illu.png

**sonar** · 31-10-2010, 21:27

Oh ja, Masken …

Schnell mal zusammengetackert: Your Titel Goes Here

echo5-7 · 31-10-2010, 21:35

ja, das seh ich auch. was mich irritiert, ist der erste schwarze block, da wo "einleitung" steht. hinter diesem block ist ein weiteres bild. dieses wird erst mit dem scrollen aufgedeckt, bleibt aber dann bestehen. ich versteh nicht, wie das erst mit dem scrollen aufgedeckt werden kann. ich habs grade probiert mit nem div (fixed) in einem anderem div mit overflow hidden. hat aber nicht funktioniert.

:: RK :: · 31-10-2010, 21:49

Das ist doch stink normales XHTML + CSS. Wozu braucht man denn da HTML5
geschweige denn Javascript oder irgendwelche Maskeneffekte? Das kannst du
doch mit z-index lösen, sonar war ja so fix und liefert dir sogar n beispiel

.

PS: der Threadtitel ist nicht sehr vorbildlich gewählt

echo5-7 · 31-10-2010, 22:00

jungs, mich interessiert nicht der aufmacher mit der schrift. ich weiß auch das ich das mit ner png und z-index machen kann.

nochmal:
warum deckt der einleitungsblock ein anderes hintergrundbild auf?

aufgemalt was ich meine

Nightflyer · 31-10-2010, 22:31

Ich hab sonars Beispiel etwas erweitert:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Your Titel Goes Here</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Describe me a sheep" />
<meta name="robots" content="index,follow" />

<meta name="generator" content="Eclipse and lots of coffee" />

<style type="text/css" media="screen">
/* <![CDATA[ */
body {
	height		:	1000px;
	padding-top	:	100px;
	width		:	100%;
}

#bg {
	width		:	600px;
	height		:	600px;
	position	:	absolute;
	left		:	250px;
	z-index		:	10;
	background	:	url(http://ff.gisht.com/dmig/img/cover-dmig.png) center center no-repeat;
}

#mg {
	width		:	800px;
	height		:	900px;
	z-index		:	20;
	position	:	fixed;
	left		:	200px;
	top			:	0;
	background	:	url(http://ff.gisht.com/dmig/img/cover-illu.png);
}

#fg {
	width		:	600px;
	height		:	600px;
	position	:	absolute;
	left		:	300px;
	z-index		:	30;
	background	:	url(http://ff.gisht.com/dmig/img/cover-5.png) center center no-repeat;
}
#new {
	width		:	600px;
	height		:	600px;
	position	:	absolute;
	left		:	300px;
	top			: 	600px;
	z-index		:	30;
	background	:	url(http://www.designmadeingermany.de/magazin/wp-content/themes/5/ordnung.png) center bottom no-repeat;
	background-attachment:fixed
}
/* ]]> */
</style>

<script type="text/javascript">
/* <![CDATA[ */
/* ]]> */
</script>
</head>

<body id="body">
	<div id="bg"></div>
	<div id="mg"></div>
	<div id="fg"></div>
	<div id="new"></div>
</body>
</html>

Sieht zwar nicht toll aus, ist aber der gewünschte Effekt. Das neue div hat schlichtweg die Eigenschaft "background-attachment:fixed" und ist bottom-Ausgerichtet

echo5-7 · 01-11-2010, 08:04

Zitat:

Zitat von Nightflyer

Ich hab sonars Beispiel etwas erweitert:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Your Titel Goes Here</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Describe me a sheep" />
<meta name="robots" content="index,follow" />

<meta name="generator" content="Eclipse and lots of coffee" />

<style type="text/css" media="screen">
/* <![CDATA[ */
body {
	height		:	1000px;
	padding-top	:	100px;
	width		:	100%;
}

#bg {
	width		:	600px;
	height		:	600px;
	position	:	absolute;
	left		:	250px;
	z-index		:	10;
	background	:	url(http://ff.gisht.com/dmig/img/cover-dmig.png) center center no-repeat;
}

#mg {
	width		:	800px;
	height		:	900px;
	z-index		:	20;
	position	:	fixed;
	left		:	200px;
	top			:	0;
	background	:	url(http://ff.gisht.com/dmig/img/cover-illu.png);
}

#fg {
	width		:	600px;
	height		:	600px;
	position	:	absolute;
	left		:	300px;
	z-index		:	30;
	background	:	url(http://ff.gisht.com/dmig/img/cover-5.png) center center no-repeat;
}
#new {
	width		:	600px;
	height		:	600px;
	position	:	absolute;
	left		:	300px;
	top			: 	600px;
	z-index		:	30;
	background	:	url(http://www.designmadeingermany.de/magazin/wp-content/themes/5/ordnung.png) center bottom no-repeat;
	background-attachment:fixed
}
/* ]]> */
</style>

<script type="text/javascript">
/* <![CDATA[ */
/* ]]> */
</script>
</head>

<body id="body">
	<div id="bg"></div>
	<div id="mg"></div>
	<div id="fg"></div>
	<div id="new"></div>
</body>
</html>

Sieht zwar nicht toll aus, ist aber der gewünschte Effekt. Das neue div hat schlichtweg die Eigenschaft "background-attachment:fixed" und ist bottom-Ausgerichtet

ich fass es nich, ich hab was gelernt.

ich kannte das "background-attachment" gar nicht.... krass. da ergeben sich ja echt mal neue möglichkeiten... coool

danke!

Martin Rack · 01-11-2010, 13:13

Wurd jetzt zwar schon beantwortet, aber hier vielleicht noch der Blogpost dazu: Der Backgroundtrick

echo5-7 · 01-11-2010, 14:06

klasse! danke! wer lesen kann ist klar im vorteil

31-10-2010, 20:16	#1 (permalink)
echo5-7 ° Registriert seit: Aug 2002 Ort: Baden-Baden Beiträge: 4.159	Wie geht das? Dmig 5 Ok, jetzt muss ich doch mal fragen. Wenn man scrollt, sieht man ja, dass das Headerbild fixed ist. Was mich aber irritiert ist dieser Maskeneffekt, der zustande kommt auch wenn man Javascript deaktiviert. Scroll ich nach unten, wird der Hintergrund anders. Wie geht das denn. Hab ich da irgendwas verpasst? Das ist doch kein HTML5 sondern normales (richtig schlechtes) XHTML, oder? Gruß echo __________________ LRRM \| BLOG \| FACEBOOK \| TWITTER \| G+ \| INSTACANV.AS

31-10-2010, 20:41	#2 (permalink)
sonar mod_rewrite Registriert seit: Feb 2003 Ort: München Beiträge: 15.721	Hab's mir jetzt nicht sooo genau angeschaut, aber das sind halt Spielereien mit z-index/position:fixed und so. Und ja, das ist HTML 5. __________________ RTFM Wie man Fragen richtig stellt. Money makes the world go round, fear makes it turn much faster. (New Model Army)

31-10-2010, 20:52	#3 (permalink)
echo5-7 ° Registriert seit: Aug 2002 Ort: Baden-Baden Beiträge: 4.159	hm, selbst wenn ich das mit dem z-index berücksichtige seh ich nicht wie das funktionieren könnte. hat html5 masken mit drin? __________________ LRRM \| BLOG \| FACEBOOK \| TWITTER \| G+ \| INSTACANV.AS

31-10-2010, 21:27	#5 (permalink)
sonar mod_rewrite Registriert seit: Feb 2003 Ort: München Beiträge: 15.721	Oh ja, Masken … Schnell mal zusammengetackert: Your Titel Goes Here __________________ RTFM Wie man Fragen richtig stellt. Money makes the world go round, fear makes it turn much faster. (New Model Army)

31-10-2010, 21:35	#6 (permalink)
echo5-7 ° Registriert seit: Aug 2002 Ort: Baden-Baden Beiträge: 4.159	ja, das seh ich auch. was mich irritiert, ist der erste schwarze block, da wo "einleitung" steht. hinter diesem block ist ein weiteres bild. dieses wird erst mit dem scrollen aufgedeckt, bleibt aber dann bestehen. ich versteh nicht, wie das erst mit dem scrollen aufgedeckt werden kann. ich habs grade probiert mit nem div (fixed) in einem anderem div mit overflow hidden. hat aber nicht funktioniert. __________________ LRRM \| BLOG \| FACEBOOK \| TWITTER \| G+ \| INSTACANV.AS

31-10-2010, 21:49	#7 (permalink)
:: RK :: Neuer User Registriert seit: Jan 2002 Ort: Umgebung Stuttgart Beiträge: 5.459	Das ist doch stink normales XHTML + CSS. Wozu braucht man denn da HTML5 geschweige denn Javascript oder irgendwelche Maskeneffekte? Das kannst du doch mit z-index lösen, sonar war ja so fix und liefert dir sogar n beispiel . PS: der Threadtitel ist nicht sehr vorbildlich gewählt __________________ Das Glück im Leben hängt von den guten Gedanken ab, die man hat. Easing_Equations / Flash Kontaktformular / FlashPlugin W3C konform / Nützliche Beiträge zu FAQs

31-10-2010, 22:00	#8 (permalink)
echo5-7 ° Registriert seit: Aug 2002 Ort: Baden-Baden Beiträge: 4.159	jungs, mich interessiert nicht der aufmacher mit der schrift. ich weiß auch das ich das mit ner png und z-index machen kann. nochmal: warum deckt der einleitungsblock ein anderes hintergrundbild auf? aufgemalt was ich meine __________________ LRRM \| BLOG \| FACEBOOK \| TWITTER \| G+ \| INSTACANV.AS

01-11-2010, 13:13	#11 (permalink)
Martin Rack Neuer User Registriert seit: Nov 2010 Beiträge: 1	Wurd jetzt zwar schon beantwortet, aber hier vielleicht noch der Blogpost dazu: Der Backgroundtrick

01-11-2010, 14:06	#12 (permalink)
echo5-7 ° Registriert seit: Aug 2002 Ort: Baden-Baden Beiträge: 4.159	klasse! danke! wer lesen kann ist klar im vorteil __________________ LRRM \| BLOG \| FACEBOOK \| TWITTER \| G+ \| INSTACANV.AS

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Stagesize runtime beeinflussen; geht´s oder geht´s nicht?	A_D	Flash CS3 Professional	10	13-12-2008 11:42
mc._alpha=0> geht, mc._visible=false geht nicht – warum nur?	hossa-hossa	Flash Einsteiger	2	18-03-2008 13:27
verlinkung mit loadMovie geht irgendwie ned! bitte helfen wenns geht!	la-nightlife.de	Flash Einsteiger	2	24-10-2006 14:36
load.Movie problem - 1x geht 1x geht nicht?	thejumpingflame	Flash MX 2004	4	29-09-2005 18:21
js-popup + Variable mit Umlauten = geht/geht nicht	reifue	HTML und CSS	4	19-12-2003 13:35