Add start menu with animation

2018-05-11 14:18:14 +02:00
parent 9875e043e9
commit 9c9780593f
3 changed files with 134 additions and 20 deletions
--- a/index.html
+++ b/index.html
@@ -10,20 +10,94 @@
            overflow: hidden;
        }

-        #minesweeper-overlay, #minesweeper-overlay2 {
+        body {
+            font-family: Roboto, Helvetica, Arial, sans-serif;
+            font-size: 1.4em;
+        }
+
+        .start-background {
+            width: 100vw;
+            height: 100vh;
+            background-color: #333;
+            -webkit-transition: background-color .5s;
+            -moz-transition: background-color .5s;
+            -o-transition: background-color .5s;
+            transition: background-color .5s;
+        }
+        
+        .start-background.transparent {
+            background-color: transparent;
+        }
+
+        .start-container {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            -webkit-transform: translate(-50%, -50%);
+            -moz-transform: translate(-50%, -50%);
+            -ms-transform: translate(-50%, -50%);
+            -o-transform: translate(-50%, -50%);
+            transform: translate(-50%, -50%);
+            color: #fff;
+            text-align: center;
+        }
+
+        .start-container.slideDown {
+            animation: slideDown .5s ease-in-out forwards;
+        }
+
+        @keyframes slideDown {
+            0% {
+                top: 50%;
+            }
+
+            100% {
+                top: 150%;
+            }
+        }
+
+        .start-container h3 {
+            font-weight: lighter;
+        }
+
+        .start-container button {
+            border: none;
+            border-radius: 10px;
+            box-shadow: none;
+            background-color: #2272ff;
+            color: #fff;
+            padding: 20px 40px;
+            font-size: 28px;
+            -webkit-transition: all .2s;
+            -moz-transition: all .2s;
+            -o-transition: all .2s;
+            transition: all .2s;
+            cursor: pointer;
+        }
+
+        .start-container button:hover {
+            box-shadow: 0 10px 20px rgba(0,0,0,.18);
+            transform: translateY(-5px);
+        }
+
+        .start-container button:active {
+            background-color: #1e64cd;
+        }
+
+        .overlay {
            position: absolute;
            top: 0;
            left: 0;
        }

-        #game-container {
+        .game-container {
            position: absolute;
            bottom: 2.5%;
            left: 50%;
            transform: translateX(-50%);
        }

-        #game-stats {
+        .game-stats {
            position: absolute;
            top: calc(2.5vh / 2);
            left: 50%;
@@ -49,10 +123,36 @@
        #time, #bombs {
            margin: 0 15px;
        }
+
+        .main-container {
+            position: absolute;
+            top: -100%;
+            width: 100%;
+            height: 100%;
+            animation: slideIn .5s ease-in-out forwards;
+        }
+
+        @keyframes slideIn {
+            from {
+                top: -100%;
+            }
+
+            to {
+                top: 0;
+            }
+        }
    </style>
 </head>
 <body style="margin: 0">

+<div class="start-background">
+    <div class="start-container">
+        <h1>Minesweeper.js</h1>
+        <h3>A sweet, tasty, little Minesweeper game written in JavaScript with HTML5 &lt;canvas&gt; Element</h3>
+        <button id="startgame">Play!</button>
+    </div>
+</div>
+
 <script type="text/javascript" src="animations/click.js"></script>
 <script type="text/javascript" src="animations/victory.js"></script>
 <script type="text/javascript" src="game.js"></script>