diff --git a/www/css/style.css b/www/css/style.css index 3632c6f..afdf387 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -9,8 +9,18 @@ */ .scroll-content { + background: url("../img/background.svg"); + background-size: cover; + color: #333; + font: 100% Arial, Sans Serif; + height: 100vh; + margin: 0; + padding: 0; + overflow-x: hidden; +} - +/* +.scroll-content { background: url("../img/background.svg"); -webkit-animation: backgroundScroll 50s linear infinite; -webkit-background-size: cover; @@ -23,7 +33,18 @@ animation: backgroundScroll 50s linear infinite; from {background-position: 0 0;} to {background-position: -2000px 0;} } - + */ +.baumhaus { + background: url("../img/treehouse.svg"); + background-size: cover; + position:fixed; + bottom:0; + left:0; + width: 256px; + height: 256px; + overflow: hidden; +} + .myborder{ display: inline-block; border-radius: 6px; @@ -40,23 +61,33 @@ to {background-position: -2000px 0;} } .mentorborder { - position:fixed; - bottom:0; - left:0; - width: 256px; - height: 256px; + position: absolute; + top: 122px; + left: 120px; + width: 32px; + height: 32px; overflow: hidden; } -.mentor { - width: 256px; - height: 2560px; - background: url('../img/mentor.png') left center; - -webkit-animation: mentorsprite 3.8s steps(10) infinite; + +.mentorborderbaumhaus { + position: absolute; + top: 122px; + left: 120px; + width: 32px; + height: 32px; + overflow: hidden; } -@-webkit-keyframes mentorsprite { - 100% { background-position: 0 -2560px; } +.mentorbaumhaus { + width: 32px; + height: 320px; + background: url('../img/mentor_32px.png') left center; + -webkit-animation: mentorspritebaumhaus 3.8s steps(10) infinite; +} + +@-webkit-keyframes mentorspritebaumhaus { + 100% { background-position: 0 -320px; } } @@ -80,3 +111,149 @@ to {background-position: -2000px 0;} 100% { background-position: 0 -1024px; } } + + +#background-wrap { + bottom: 0; + left: 0; + padding-top: 50px; + position: fixed; + right: 0; + top: 0; + z-index: -1; +} + +/* KEYFRAMES */ +/* Wolken */ +@-webkit-keyframes animateCloud { + 0% { + margin-left: -500px; + } + 100% { + margin-left: 100%; + } +} + +@-moz-keyframes animateCloud { + 0% { + margin-left: -500px; + } + 100% { + margin-left: 100%; + } +} + +@keyframes animateCloud { + 0% { + margin-left: -500px; + } + 100% { + margin-left: 100%; + } +} + +/* ANIMATIONS */ + +.x1 { + -webkit-animation: animateCloud 35s linear infinite; + -moz-animation: animateCloud 35s linear infinite; + animation: animateCloud 35s linear infinite; + + -webkit-transform: scale(0.65); + -moz-transform: scale(0.65); + transform: scale(0.65); +} + +.x2 { + -webkit-animation: animateCloud 20s linear infinite; + -moz-animation: animateCloud 20s linear infinite; + animation: animateCloud 20s linear infinite; + + -webkit-transform: scale(0.3); + -moz-transform: scale(0.3); + transform: scale(0.3); +} +/* +.x3 { + -webkit-animation: animateCloud 30s linear infinite; + -moz-animation: animateCloud 30s linear infinite; + animation: animateCloud 30s linear infinite; + + -webkit-transform: scale(0.5); + -moz-transform: scale(0.5); + transform: scale(0.5); +} + +.x4 { + -webkit-animation: animateCloud 18s linear infinite; + -moz-animation: animateCloud 18s linear infinite; + animation: animateCloud 18s linear infinite; + + -webkit-transform: scale(0.4); + -moz-transform: scale(0.4); + transform: scale(0.4); +} + +.x5 { + -webkit-animation: animateCloud 25s linear infinite; + -moz-animation: animateCloud 25s linear infinite; + animation: animateCloud 25s linear infinite; + + -webkit-transform: scale(0.55); + -moz-transform: scale(0.55); + transform: scale(0.55); +} +*/ +/* OBJECTS */ + +.cloud { + background: #fff; + background: -moz-linear-gradient(top, #fff 5%, #f1f1f1 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#fff), color-stop(100%,#f1f1f1)); + background: -webkit-linear-gradient(top, #fff 5%,#f1f1f1 100%); + background: -o-linear-gradient(top, #fff 5%,#f1f1f1 100%); + background: -ms-linear-gradient(top, #fff 5%,#f1f1f1 100%); + background: linear-gradient(top, #fff 5%,#f1f1f1 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 ); + + -webkit-border-radius: 100px; + -moz-border-radius: 100px; + border-radius: 100px; + + -webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); + box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); + + height: 120px; + position: relative; + width: 350px; +} + +.cloud:after, .cloud:before { + background: #fff; + content: ''; + position: absolute; + z-indeX: -1; +} + +.cloud:after { + -webkit-border-radius: 100px; + -moz-border-radius: 100px; + border-radius: 100px; + + height: 100px; + left: 50px; + top: -50px; + width: 100px; +} + +.cloud:before { + -webkit-border-radius: 200px; + -moz-border-radius: 200px; + border-radius: 200px; + + width: 180px; + height: 180px; + right: 50px; + top: -90px; +} \ No newline at end of file diff --git a/www/img/background.svg b/www/img/background.svg index 12365fa..b3d34a2 100644 --- a/www/img/background.svg +++ b/www/img/background.svg @@ -1,972 +1,128 @@ - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + diff --git a/www/img/background1.svg b/www/img/background1.svg deleted file mode 100644 index 13d6f87..0000000 --- a/www/img/background1.svg +++ /dev/null @@ -1,1092 +0,0 @@ - - - -image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/www/img/mentor_32px.png b/www/img/mentor_32px.png new file mode 100644 index 0000000..52b8ef9 Binary files /dev/null and b/www/img/mentor_32px.png differ diff --git a/www/img/mentor_64px.png b/www/img/mentor_64px.png new file mode 100644 index 0000000..bbdbd94 Binary files /dev/null and b/www/img/mentor_64px.png differ diff --git a/www/img/treehouse.svg b/www/img/treehouse.svg new file mode 100644 index 0000000..53180c2 --- /dev/null +++ b/www/img/treehouse.svg @@ -0,0 +1,756 @@ + + + + tree house + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + Openclipart + + + tree house + 2011-06-19T06:29:41 + + https://openclipart.org/detail/146071/tree-house-by-tzunghaor + + + tzunghaor + + + + + building + child + childhood + house + nature + plank + plant + tree + wood + + + + + + + + + + + diff --git a/www/index.html b/www/index.html index 591bb3b..7e7efd6 100644 --- a/www/index.html +++ b/www/index.html @@ -42,7 +42,6 @@ - diff --git a/www/js/services.js b/www/js/services.js index d630b56..acb1db8 100644 --- a/www/js/services.js +++ b/www/js/services.js @@ -19,6 +19,8 @@ angular.module('kinderspiel.services', []) function loopbackgroundmusic(){ if (inbackground == false){ + backgroundmusic.release(); + backgroundmusic=mybackground_music; backgroundmusic.play(); backgroundmusic.setVolume('0.3'); } diff --git a/www/templates/home.html b/www/templates/home.html index 8cf1bb5..be1789e 100644 --- a/www/templates/home.html +++ b/www/templates/home.html @@ -6,8 +6,22 @@ -
-
+
+
+
+
+
+
+
+
+ +
+
+
+ +
+ +