diff --git a/_layouts/default.html b/_layouts/default.html index 5c87c96..9247490 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -72,8 +72,10 @@ - -
+
+ + +
diff --git a/_sass/screen.scss b/_sass/screen.scss index c3ed9ca..e0fb512 100644 --- a/_sass/screen.scss +++ b/_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); } +} diff --git a/images/antennes.png b/images/antennes.png deleted file mode 100644 index f0c0d68..0000000 Binary files a/images/antennes.png and /dev/null differ diff --git a/images/backsky.png b/images/backsky.png new file mode 100644 index 0000000..b6697c8 Binary files /dev/null and b/images/backsky.png differ diff --git a/images/clouds.png b/images/clouds.png new file mode 100644 index 0000000..304d12d Binary files /dev/null and b/images/clouds.png differ diff --git a/images/devoluy.png b/images/devoluy.png new file mode 100644 index 0000000..0a49a38 Binary files /dev/null and b/images/devoluy.png differ diff --git a/images/ski.png b/images/ski.png new file mode 100644 index 0000000..67c243f Binary files /dev/null and b/images/ski.png differ diff --git a/stylesheets/screen.css b/stylesheets/screen.css index a6d2c15..bd21cc2 100644 --- a/stylesheets/screen.css +++ b/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); + } +}