Permalänk
Medlem

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

Permalänk
Medlem

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

Permalänk
Medlem
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ö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

Permalänk
Medlem

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.

Permalänk
Medlem

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

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Permalänk
Medlem
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.

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

Visa signatur

Citera för svar

Permalänk
Medlem
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.

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

Visa signatur

Citera för svar

Permalänk
Medlem
Skrivet av bimpsson:

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

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

Permalänk
Medlem

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.

Permalänk
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?

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

[i7 2600k @ 5GHz| NH-D14, fläktar utbyta mot ljudlösa 120mm SySS 800| Asus P8P67| HD6870 DirectCU| Corsair 4x8GB (32GB) 1600MHz DDR3| Moddat Corsair 550VX | Mac Pro / G5 Chassi| 2x120GB raid0 Intel 520 sys+ 2x3TB slask & home (riktig lagring på 12TB ZRAID NAS som även home backuppas/rsyncas till) ] - Helt ljudlös om man inte lägger örat intill chassit
[ MacBook Pro Retina 13 | 16GB ram | 256GB PCIe SSD | OS X(main), Arch ]