Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Connect With Other SilverStripe Members /

For all SilverStripe-related topics that don't fit into any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Bakground Auto-Scrolling-Down


Reply


2 Posts   1467 Views

Avatar
Drummo

Community Member, 2 Posts

27 February 2010 at 12:12am

Edited: 27/02/2010 12:42am

Hi to all,
im new there, i wanna use silverstripe cms for make my personal site:

i need to move the Bakground automactly, like climbing down of the rain,
i found surfing the internet this VB script ... but i cant introduce it on my cms site.
the script who i found have the problem that it can run only on IE, but i need it work on all platform.
who can help me ???
thanks

Quiero hacer un sitio cuyo fondo que se está moviendo, ello hacia abajo como la lluvia.. pero en css.
jo encontrado un VBScript pero no sé cómo hacer lo mismo en CSS. Cómo puedo convertir Vb script en CSS ??
Te envío un ejemplo de esso, que funciona sólo en IE, me gustaría que esto funcione en Firefox tambien.

the script whit a little html is:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

</head>

<body style="background-image: url('http://conme.files.wordpress.com/2007/06/goccia-luna-rossa.jpg')">

</body>

<SCRIPT language=VBScript>

dim MoveItX, MoveItY, mnumfond
MoveItY=0
MoveItX=0
numfond=document.body.sourceIndex
SUB SF
MoveItY=MoveItY-1
MoveItX=MoveItX+0
Document.all(numfond).style.BackgroundPosition= MoveItX & " " & MoveItY
id=SetTimeOut("SF",10,"VBScript")
End Sub
SF

</SCRIPT>

</html>

Avatar
Drummo

Community Member, 2 Posts

27 February 2010 at 2:42am

what do you think about that??

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fondo animado</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<style type="text/css" media="screen">
body{
background-color: #C0DEED;
margin:0;
padding:0;
}

#header{
height:180px;
background: #8EC1DA url(http://conme.files.wordpress.com/2007/06/goccia-luna-rossa.jpg) repeat-y scroll left top;
text-align:center;
margin-top:-30px;
}

#header h1{
padding-top:35px;
font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
color:white;
font-size:45px;
}

#content{
background-color:#fff;
height:500px;
width:980px;
margin:25px auto 0 auto;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
</style>

<script type="text/javascript" charset="utf-8">
var scrollSpeed = 70;
var step = 1;
var current = 0;
var imageWidth = 2247;
var headerWidth = 800;

var restartPosition = -(imageWidth - headerWidth);

function scrollBg(){
current -= step;
if (current == restartPosition){
current = 0;
}

$('#header').css("background-position",current+"px 0");
}

var init = setInterval("scrollBg()", scrollSpeed);
</script>

</head>

<body>
<div id="container">
<div id="header">
<h1>Animated Background Image</h1>
</div><!-- #header -->

<div id="content">
<!-- Your content will go here -->
</div><!-- #content -->
</div><!-- #container -->

</body>
</html>