✔ Banner nach links schieben

DarkRaver

DarkRaver

Erfahrenes Mitglied
Hallo!
Ich habe ganz ehrlich keine ahnung von JS aber ich bräuchte ein Script.
Ich habe einen banner namens "header.jpg" und dieser soll von Links nach Rechts scrollen. Direkt im Anschluss sollte der gleiche Banner kommen und das ganze in einem loop. Ich möchte kein Flash einbauen aber ich hab hier mal was zusammengebastelt:
Scrolling-Header

Die Schrift ist ein seperates File namens "font.png" und sollte auch vorne so fest angezeigt werden wie es ist.
Leider scaliert sich das Flash in der Höhe und deshalb möchte ich ganz gerne das ganze ohne Flash machen.
Der Header an sich hat die Maße 2000x250. Leute mit einer Bildschirmauflösung unter 1680x1050 werden die Balken links und rechts sehen schätze ich mal. Diese möchte ich ja weghaben deswegen ja JS :D
Vielen Dank schonmal im voraus.
 
Du nimmst ein Div
HTML: 
<div id="scroll"></div>
mit etwa folgendem css
CSS: 
#scroll {
background-repeat:repeat-x;
background-position:0px 0px;
background-image:url(bild.jpg);
width:100%;
height:250px;
}
und etwa folgendes JS
Javascript: 
body.onload = function() {
        var SPEED = 5;
        var x = 0;
        var obj = document.getElementById("scroll");

        window.setInterval(function() {
                x+=SPEED;
               obj.style.backgroundPosition = x+"px 0px";
        },33);
}
 
Es ist window.onload und nicht body.onload. Hab das ganze aus dem Kopf runtergetippt ohne test.

Edit: Beweis: http://www.cpoly-design.de/scroll/

Quelltext:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>scroll</title>
<script type="text/javascript">
/* <![CDATA[ */
	window.onload = function() {
        var SPEED = 5;
        var x = 0;
        var obj = document.getElementById("scroll");
 
        window.setInterval(function() {
                x+=SPEED;
               obj.style.backgroundPosition = x+"px 0px";
        },33);
	}
/* ]]> */
</script>

<style>
#scroll {
	background-repeat:repeat-x;
	background-position:0px 0px;
	background-image:url(bild.jpg);
	width:100%;
	height:250px;
}
</style>
</head>

<body>	
	<div id="scroll"></div>
</body>

</html>
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück