animated background

RebeccaLessay · 11-04-2009, 09:33 AM

Few questions about a background,

1) I have a tileable image (PNG) I want to move in the background (clouds, they move slowly from the right to the left) is this possible to do in HTML?

2) If question 1 is possible, can it still preserve the transparency?

Thanks in advance

project107 · 11-04-2009, 10:20 AM

It's possible with Javascript, although I have no idea how hard it would hit the client machine.

Swooter · 11-04-2009, 11:44 AM

Try this:

HTML Code:

<html>

  <head>
    <style type="text/css">
      div#cloud {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 453px;
        height: 283px;
        background-image: url("http://www.seul.org/~grumbel/tmp/cloud.png");
        z-index: 0;
      }
    </style>
  </head>
  <body>
    <div id="cloud"></div>
    <script type="text/javascript">
      var $cloud = document.getElementById("cloud");
      var $amount = 10;
      var $speed = 100;

      function moveLeft() {
        if ( $cloud.offsetLeft > 0 ) {
           $cloud.style.left = ($cloud.offsetLeft - $amount) + "px";
           setTimeout(moveLeft, $speed);
        } else {
           setTimeout(moveRight, $speed);
        }
      }

      function moveRight() {
        if ( $cloud.offsetLeft < (document.body.offsetWidth-$cloud.offsetWidth) ) {
           $cloud.style.left = ($cloud.offsetLeft + $amount) + "px";
           setTimeout(moveRight, $speed);
        } else {
           setTimeout(moveLeft, $speed);
        }
      }
      moveRight();
    </script>
  </body>
</html>

RebeccaLessay · 11-06-2009, 07:16 AM

Quote:

Originally Posted by Swooter

Try this:

HTML Code:

<html>
 
  <head>
    <style type="text/css">
      div#cloud {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 453px;
        height: 283px;
        background-image: url("http://www.seul.org/~grumbel/tmp/cloud.png");
        z-index: 0;
      }
    </style>
  </head>
  <body>
    <div id="cloud"></div>
    <script type="text/javascript">
      var $cloud = document.getElementById("cloud");
      var $amount = 10;
      var $speed = 100;
 
      function moveLeft() {
        if ( $cloud.offsetLeft > 0 ) {
           $cloud.style.left = ($cloud.offsetLeft - $amount) + "px";
           setTimeout(moveLeft, $speed);
        } else {
           setTimeout(moveRight, $speed);
        }
      }
 
      function moveRight() {
        if ( $cloud.offsetLeft < (document.body.offsetWidth-$cloud.offsetWidth) ) {
           $cloud.style.left = ($cloud.offsetLeft + $amount) + "px";
           setTimeout(moveRight, $speed);
        } else {
           setTimeout(moveLeft, $speed);
        }
      }
      moveRight();
    </script>
  </body>
</html>

thanks!
I knew this was possible in actionscript but wasnt sure if html had the this moving option too.

**simplistik** · 11-06-2009, 09:31 AM

Quote:

Originally Posted by RebeccaLessay

thanks!
I knew this was possible in actionscript but wasnt sure if html had the this moving option too.

it doesn't, but javascript does