akakiev/hello-world-s-move.markdown

## hello-world-s-move.markdown

      
    Raw
  

              hello-world-s-move.markdown
            
          
    Hello world's move

A Pen by Serhii on CodePen.
License.

  
## index.html
<html>
<head>
    <title>Coder</title>
  </head>
<body class="page">
    <div class="pagecontent">
        <h1 id="box">Hello World</h1>
        <p>My html goes here.</p>
        <p>It is my first web-page.</p>
    </div>
 </body>
  </html>

## script.js
window.onload = function() {

    //This code will run after your page loads
var pos=0;
var box=document.getElementById('box');
var t=setInterval(move, 10);

function move()
{
    if(pos>=550)
    {
        clearInterval(t);
        }
        else
        {
            pos +=1;
            box.style.left=pos+'px';
            }
    }
};

## style.css
.pagecontent {
    padding: 24px;
    background-color:yellow;
}
.page{
    background:blue;
    }
p{
    color:brown;
    }
#box{
    color:red;
    position:absolute;
    }
	<html>
	<head>
	<title>Coder</title>
	</head>
	<body class="page">
	<div class="pagecontent">
	<h1 id="box">Hello World</h1>
	<p>My html goes here.</p>
	<p>It is my first web-page.</p>
	</div>
	</body>
	</html>
	window.onload = function() {

	//This code will run after your page loads
	var pos=0;
	var box=document.getElementById('box');
	var t=setInterval(move, 10);

	function move()
	{
	if(pos>=550)
	{
	clearInterval(t);
	}
	else
	{
	pos +=1;
	box.style.left=pos+'px';
	}
	}
	};
	.pagecontent {
	padding: 24px;
	background-color:yellow;
	}
	.page{
	background:blue;
	}
	p{
	color:brown;
	}
	#box{
	color:red;
	position:absolute;
	}