Added initial project structure and the bouncing ball screensaver.

bryanbraun · Mar 3, 2014 · c1c85b6 · c1c85b6
commit c1c85b6
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 0 deletions.
diff --git a/base.css b/base.css
@@ -0,0 +1,15 @@
+/* apply a natural box layout model to all elements */
+*,
+*:before,
+*:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+html,
+body {
+  background-color: #111;
+  margin: 0;
+  height: 100%;
+}
diff --git a/bouncing-ball.html b/bouncing-ball.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Bouncing Ball | After Dark in CSS</title>
+  <link rel="stylesheet" href="base.css" />
+  <style>
+  /* screen styling */
+  .screen  {
+    margin: 0 auto;
+    background-color: black;
+    position: relative;
+    overflow: hidden;
+    /* gotta see if I can find a way to use % widths... */
+    width: 100%;
+    height: 100%;
+  }
+
+  /* ball styling */
+  b {
+    display: block;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: white;
+    position: absolute;
+    /* ball animation */
+    -webkit-animation: moveX 3s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
+    -moz-animation: moveX 3s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
+    -o-animation: moveX 3s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
+    animation: moveX 3s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate ;
+  }
+
+  /* animation keyframes */
+  @-webkit-keyframes moveX {
+    /* 460px = screen width - width of ball. Maybe do this with calc() */
+    from { left: 0; } to { left: calc(100% - 40px); }
+  }
+  @-moz-keyframes moveX {
+    from { left: 0; } to { left: calc(100% - 40px); }
+  }
+  @-o-keyframes moveX {
+    from { left: 0; } to { left: calc(100% - 40px); }
+  }
+  @keyframes moveX {
+    from { left: 0; } to { left: calc(100% - 40px); }
+  }
+  @-webkit-keyframes moveY {
+    from { top: 0; } to { top: calc(100% - 40px); }
+  }
+  @-moz-keyframes moveY {
+    from { top: 0; } to { top: calc(100% - 40px); }
+  }
+  @-o-keyframes moveY {
+    from { top: 0; } to { top: calc(100% - 40px); }
+  }
+  @keyframes moveY {
+    from { top: 0; } to { top: calc(100% - 40px); }
+  }
+  </style>
+</head>
+<body>
+  <div class="screen">
+    <b></b>
+  </div>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>After Dark in CSS</title>
+    <style>
+
+    </style>
+</head>
+<body>
+    <div class="content">
+      <h1>After Dark in CSS</h1>
+      <ul>
+        <li><a href="toasters.html">Flying Toasters</a></li>
+        <li><a href="bouncing-ball.html">Bouncing Ball</a></li>
+        <li><a href="warp.html">Warp</a></li>
+        <li><a href="clocks.html">Clocks</a></li>
+        <li><a href="messages.html">Messages</a></li>
+      </ul>
+    </div>
+</body>
+</html>