Jump to:

385 Posts in 211 Topics by 198 members

Connect With Other SilverStripe Members

SilverStripe Forums » Connect With Other SilverStripe Members » Bakground Auto-Scrolling-Down

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

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

Page: 1
Go to End
Author Topic: 1402 Views
  • Drummo
    Avatar
    Community Member
    2 Posts

    Bakground Auto-Scrolling-Down Link to this post

    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>

  • Drummo
    Avatar
    Community Member
    2 Posts

    Re: Bakground Auto-Scrolling-Down Link to this post

    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>

    1402 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.