Follow along with the video below to see how to install our site as a web app on your home screen.
Бележка: This feature may not be available in some browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css" media="screen">
body{
background-color: #1D1D1D;
margin:0;
padding:0;
}
#header{
height:141px;
background: #1D1D1D url(stars.jpg) repeat-x 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;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>text</h1>
</div>
<div id="content">
</div>
</div>
</body>
<script src="jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var scrollSpeed = 70; // Speed in milliseconds
var step = 1; // How many pixels to move per step
var current = 0; // The current pixel row
var imageWidth = 1444; // Background image width
var headerWidth = 638; // How wide the header is.
//The pixel row where to start a new loop
var restartPosition = -(imageWidth - headerWidth);
function scrollBg(){
//Go to next pixel row.
current -= step;
//If at the end of the image, then go to the top.
if (current == restartPosition){
current = 0;
}
//Set the CSS of the header.
$('#header').css("background-position",current+"px 0");
}
//Calls the scrolling function repeatedly
var init = setInterval("scrollBg()", scrollSpeed);
</script>
</html>