new footer

_layouts/default.html

@@ -72,8 +72,10 @@
                 </section>
 
             </div><!-- wrapper -->
-
-            <div id="foot_image" title="Interf&eacute;rom&egrave;tre du plateau de Bure">
+            <div id="foot_image" title="Le Dévoluy, depuis le Mont Aiguille">
+                <img src="images/devoluy.png">
+                <img id="ski" src="images/ski.png">
+                <div id="clouds"></div>
             </div>
 
         </div>

_sass/screen.scss

@@ -92,8 +92,13 @@ ol li:hover { border-right: 3px solid $links; padding-right: 7px; }
 
 #wrapper { max-width: $in_width; margin: auto; }
 #outter-wrapper { width: 100%; height: auto; min-height: 100%; position: relative; }
-#foot_image { height: 150px; background-image: url('../images/antennes.png');
-              position: absolute; bottom: 0; width: 100%; }
+#foot_image { height: 150px; background-image: url('../images/backsky.png');
+          position: absolute; bottom: 0px; width: 100%; text-align: center; overflow: hidden; }
+#clouds { background-image: url('../images/clouds.png'); height: 150px; width: 200%;
+          position: relative; top: -150px; margin-bottom: -150px; }
+#foot_image:active #ski { visibility: visible; animation: ski 3s linear; }
+#clouds:hover { animation: clouds 100s infinite linear; }
+#ski { position: relative; visibility: hidden; top: -107px; left: -210px; }
 
 #portrait { margin: 0 15px 15px 0; width: 150px; display: inline-block; vertical-align:middle; }
 
@@ -112,3 +117,21 @@ body { padding: 0 $margin; }
 #foot_image { display: none; }
 footer { display: none; }
 }
+
+@keyframes clouds {
+    0% { transform: translate(0, 0); }
+    100% { transform: translate(-774px, 0); }
+}
+
+@keyframes ski {
+  0% { transform: translate(0, 0) rotate(0deg); }
+  10% { transform: translate(10px, 0) rotate(0deg); }
+  20% { transform: translate(10px, 8px) rotate(45deg); }
+  25% { transform: translate(25px, 16px) rotate(15deg); }
+  30% { transform: translate(55px, 32px) rotate(0deg); }
+  40% { transform: translate(90px, 20px) rotate(-20deg); }
+  50% { transform: translate(110px, 15px) rotate(-200deg); }
+  60% { transform: translate(130px, 35px) rotate(-380deg); }
+  68% { transform: translate(164px, 27px) rotate(-360deg); }
+  100% { transform: translate(300px, 66px) rotate(20deg); }
+}

stylesheets/screen.css

@@ -267,10 +267,37 @@ ol li:hover {
 
 #foot_image {
   height: 150px;
-  background-image: url("../images/antennes.png");
+  background-image: url("../images/backsky.png");
   position: absolute;
-  bottom: 0;
+  bottom: 0px;
   width: 100%;
+  text-align: center;
+  overflow: hidden;
+}
+
+#clouds {
+  background-image: url("../images/clouds.png");
+  height: 150px;
+  width: 200%;
+  position: relative;
+  top: -150px;
+  margin-bottom: -150px;
+}
+
+#foot_image:active #ski {
+  visibility: visible;
+  animation: ski 3s linear;
+}
+
+#clouds:hover {
+  animation: clouds 100s infinite linear;
+}
+
+#ski {
+  position: relative;
+  visibility: hidden;
+  top: -107px;
+  left: -210px;
 }
 
 #portrait {
@@ -321,3 +348,54 @@ ol li:hover {
     display: none;
   }
 }
+@keyframes clouds {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  100% {
+    transform: translate(-774px, 0);
+  }
+}
+
+@keyframes ski {
+  0% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+
+  10% {
+    transform: translate(10px, 0) rotate(0deg);
+  }
+
+  20% {
+    transform: translate(10px, 8px) rotate(45deg);
+  }
+
+  25% {
+    transform: translate(25px, 16px) rotate(15deg);
+  }
+
+  30% {
+    transform: translate(55px, 32px) rotate(0deg);
+  }
+
+  40% {
+    transform: translate(90px, 20px) rotate(-20deg);
+  }
+
+  50% {
+    transform: translate(110px, 15px) rotate(-200deg);
+  }
+
+  60% {
+    transform: translate(130px, 35px) rotate(-380deg);
+  }
+
+  68% {
+    transform: translate(164px, 27px) rotate(-360deg);
+  }
+
+  100% {
+    transform: translate(300px, 66px) rotate(20deg);
+  }
+}