header

2011-01-17 12:43

Permalänk

bimpsson

Medlem

Plats: mölndal
Registrerad: Dec 2010

●

header

http://jb-lan.eu/

Som ni ser på deras header, iaf som jag har förstått det så har dom en background med olika färger och sedan en bild över backgrounden med genomskinlig text så att backgrounden syns i texten, kollade med firebug hur dom gör så att backgrounden flyttar sig hela tiden (?) då såg jag att "background-position"ändras hela tiden, nu undrar jag, hur gör man så att backgrounden flyttar sig hela tiden?

Visa signatur

Citera för svar

Rapportera Redigera

Citera flera Citera

2011-01-17 14:12

Permalänk

Alex87

Medlem

Plats: Falun
Registrerad: Feb 2010

●

Först gör du en funktion som ändrar på elementets 'style.backgroundPosition' värde, sen i body-taggens 'onLoad', så kallar du på din funktion med hjälp av 'window.setInterval()'. Kan skriva lite mer ingående när jag kommit hem från jobber

Rapportera Redigera

Citera flera Citera

2011-01-17 15:11

Permalänk

bimpsson

Medlem

Plats: mölndal
Registrerad: Dec 2010

●

Skrivet av Alex87:

Först gör du en funktion som ändrar på elementets 'style.backgroundPosition' värde, sen i body-taggens 'onLoad', så kallar du på din funktion med hjälp av 'window.setInterval()'. Kan skriva lite mer ingående när jag kommit hem från jobber

Gå till inlägget

Gör man verkligen en onload på body? vill bara göra det på en background på en speciell div ( header )

Visa signatur

Citera för svar

Rapportera Redigera

Citera flera Citera

2011-01-17 17:05

Permalänk

Alex87

Medlem

Plats: Falun
Registrerad: Feb 2010

●

onLoad använder du för att köra ett javascript efter det att bodyn har laddats (då brukar vanligtvis hela sidan laddat färdigt). Det betyder inte att javascriptet bara påverkar dokumentets body. Annars finns det fler sätt att göra det på, och jag kommer tillbaka till det snart.

Om man vill skapa en loop som körs kontinuerligt (precis vad du vill ha i det här fallet), så använder man window.setInterval(), och skickar sin loop/funktion som första argument. Nästa argument är hur många millisekunder du vill att sidan ska vänta mellan varje gång funktionen körs.

<script language="JavaScript">
    function helloWorld()
    {
        alert("Hello World!!!");
    }
</script>

<body onLoad="window.setInterval(helloWorld(), 1000)">
</body>

Här visar jag hur funktionen "helloWorld()" kommer köras en gång per sekund, men istället för att använda "alert", så vill du addera/subtrahera till/från din DIV's style.backgroundPosition. Det skulle kunna se ut såhär:

<script language="JavaScript">

	var xPos = 0;

	function update()
	{
		xPos += 4;
		document.getElementById('MyDiv').style.backgroundPosition = xPos+" 0";
	}

</script>

<body onLoad="window.setInterval('update()', 50)">

	<div id="MyDiv" style="border: 1px solid black; background: url('http://www.google.se/intl/sv_ALL/images/logos/images_logo_lg....'); width: 276; height: 110;">
	</div>

</body>

Klistra gärna in denna kod i ett nytt document så får du se hur effekten ser ut.

Och om du inte vill använda "onLoad" i bodyn, så kan du lägga till "window.onLoad = ..." i slutet på ditt script.

Rapportera Redigera

Citera flera Citera

2011-01-17 23:08

Permalänk

save

Medlem

Plats: Stockholm
Registrerad: Feb 2005

●

Om du använder http://getfirebug.com/ till Firefox så ser du i realtid vad som händer med koden när skriptet förändrar positionen. Ett litet tips bara.

Visa signatur

Rapportera Redigera

Citera flera Citera

2011-01-18 10:02

Permalänk

bimpsson

Medlem

Plats: mölndal
Registrerad: Dec 2010

●

Skrivet av Alex87:

onLoad använder du för att köra ett javascript efter det att bodyn har laddats (då brukar vanligtvis hela sidan laddat färdigt). Det betyder inte att javascriptet bara påverkar dokumentets body. Annars finns det fler sätt att göra det på, och jag kommer tillbaka till det snart.

Om man vill skapa en loop som körs kontinuerligt (precis vad du vill ha i det här fallet), så använder man window.setInterval(), och skickar sin loop/funktion som första argument. Nästa argument är hur många millisekunder du vill att sidan ska vänta mellan varje gång funktionen körs.

<script language="JavaScript">
    function helloWorld()
    {
        alert("Hello World!!!");
    }
</script>

<body onLoad="window.setInterval(helloWorld(), 1000)">
</body>

Här visar jag hur funktionen "helloWorld()" kommer köras en gång per sekund, men istället för att använda "alert", så vill du addera/subtrahera till/från din DIV's style.backgroundPosition. Det skulle kunna se ut såhär:

<script language="JavaScript">

	var xPos = 0;

	function update()
	{
		xPos += 4;
		document.getElementById('MyDiv').style.backgroundPosition = xPos+" 0";
	}

</script>

<body onLoad="window.setInterval('update()', 50)">

	<div id="MyDiv" style="border: 1px solid black; background: url('http://www.google.se/intl/sv_ALL/images/logos/images_logo_lg....'); width: 276; height: 110;">
	</div>

</body>

Klistra gärna in denna kod i ett nytt document så får du se hur effekten ser ut.

Och om du inte vill använda "onLoad" i bodyn, så kan du lägga till "window.onLoad = ..." i slutet på ditt script.

Gå till inlägget

Gjorde som du skrev men det händer ingenting ändå..

Visa signatur

Citera för svar

Rapportera Redigera

Citera flera Citera

2011-01-18 10:05

Permalänk

bimpsson

Medlem

Plats: mölndal
Registrerad: Dec 2010

●

Skrivet av save:

Om du använder http://getfirebug.com/ till Firefox så ser du i realtid vad som händer med koden när skriptet förändrar positionen. Ett litet tips bara.

Gå till inlägget

Jaa, det jag gjorde ju men jag ser bara att den ändras hela tiden

Visa signatur

Citera för svar

Rapportera Redigera

Citera flera Citera

2011-01-18 12:15

Permalänk

Alex87

Medlem

Plats: Falun
Registrerad: Feb 2010

●

Skrivet av bimpsson:

Gjorde som du skrev men det händer ingenting ändå..

Gå till inlägget

Okej. Nu har inte jag provat det i firefox.. Men i opera och IE så funkar det fint.

Rapportera Redigera

Citera flera Citera

2011-01-18 13:56

Permalänk

Alex87

Medlem

Plats: Falun
Registrerad: Feb 2010

●

Nu har jag testat det i även FireFox och Chrome, och det fungerar precis lika bra i dom, så jag kan inte svara på vad felet blir för dig.

Rapportera Redigera

Citera flera Citera

2011-03-18 21:26

Permalänk

-=|ZetaXtreme|=-

Medlem

Plats: Göteborg
Registrerad: Jan 2008

●

Skrivet av bimpsson:

http://jb-lan.eu/

Som ni ser på deras header, iaf som jag har förstått det så har dom en background med olika färger och sedan en bild över backgrounden med genomskinlig text så att backgrounden syns i texten, kollade med firebug hur dom gör så att backgrounden flyttar sig hela tiden (?) då såg jag att "background-position"ändras hela tiden, nu undrar jag, hur gör man så att backgrounden flyttar sig hela tiden?

Gå till inlägget

Vad jag gjorde på JB-lan.eu var att jag har ett script som körs med setinterval och sedan flyttar bakgrunden några pixlar hela tiden, framför bakgrunden ligger sen en png med transperanta områden där det ska "lysa igenom" vilket ger den effekten. Det var en rolig effekt jag kom på för några år sedan och nu hittade jag ett ställe där jag kunde testa att använda den någon stans. Eftersom att jag använde jquery en del på resten av sidan så har jag använt jquery även där men det är relativt lätt att göra utan jquery som Alex87 visade, dock en bug jag upptäckte var att om man kör den tillräckligt länge i vissa webbläsare så att det blir en enorm offset så buggar det och börjar blinka och ha sig, detta löste jag genom att den hela tiden går runt i stället med en reset vid slutet.

Här är js-koden som gör att det funkar (kräver jquery).

var c = 3095, bgwidth = 3095, hueDiv = $('div#wheel');
setInterval( "c = (c < 1) ? c+(bgwidth-3) : c-3; hueDiv.css('background-position', c + 'px 0px');", 120);

Jag cachar "hueDiv" då det känns onödigt att "leta" efter elementet tio gånger i sekunden, bgwidth och c används för att inte få buggen som jag berättade om innan. Om du inte kan javascript så rekommenderar jag att du lär dig det först.

Lite halvt off-topic men går du på John Bauergymnasiet i Ängelholm? I sådant fall vad heter du? Jag går i trean där nu.

Visa signatur

Rapportera Redigera

Citera flera Citera

header

header

Externa nyheter

Spelnyheter från FZ