Variable Visions

Articles iOS iOS-Winterboard-Live-Wallpaper-using-pure-CSS


tutorials - iOS and Web-Development.

iOS Winterboard Live Wallpaper using pure CSS

Published Sat. Sep. 22, 2012


Place this code into a Wallpaper.html fiie in your Winterboard theme folder

Click Here for the demo...if your using Safari
I add a live digital clock Widget.html file next time as we build our iOS Winterboard Theme.

 

<?xml version="1.0" encoding="UTF-16"?>
<html>
<head>
<!--meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=1.0"/-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css"> 
body {
    margin: 0;
}
@-webkit-keyframes fade {
  0%   { opacity: 0; }
  10%  { opacity: 0.8; }
  100% { opacity: 0; }
}
@-webkit-keyframes slide {
  0% {top: 0%; left: 0%;}
  50% {top: 20%; left: 0%;}
  100% {top: 100%; left: 0%;}  
}
#slide01 {
    margin: 0;
    padding: 0px;
    height: 480px;
    width: 320px;
    background: url(http://variablevisions.com/images/ALT-Wallpaper@2x.png);
    -webkit-background-size: cover;
    -webkit-background-size: cover;
    -webkit-animation-name:fade;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 15s;
    -webkit-animation-iteration-count: infinite;
    position: relative;
}
#slide02{
    margin: 0;
    height: 480px;
    width: 320px;
    background: url(http://variablevisions.com/images/STARS-Wallpaper@2x.png);
    -webkit-background-size: cover;
    -webkit-animation-name:slide, fade;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
     position: absolute;   
}
</style>
</head>
<body>
    <div id="slide01">
        <div id="slide02"></div>
    </div>   
</body>
</html>


Tag(s): iOS, Winterboard, Webkit transitions, Live Wallpaper