Neuer Hintergrund Wolken, Baumhaus, Mentor im Baumhaus

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;
@@ -22,6 +32,17 @@ animation: backgroundScroll 50s linear infinite;
 @-webkit-keyframes backgroundScroll {
 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{
@@ -40,23 +61,33 @@ to {background-position: -2000px 0;}
 }
 
 .mentorborder {
-  position:fixed;
+  position: absolute;
-  bottom:0;
+  top: 122px;
-  left:0;  
+  left: 120px;
-  width: 256px;
+  width: 32px;
-  height: 256px;
+  height: 32px;
   overflow: hidden;
 }
 
-.mentor {
+
-  width: 256px;
+.mentorborderbaumhaus {
-  height: 2560px;
+  position: absolute;
-  background:  url('../img/mentor.png') left center;
+  top: 122px;
-  -webkit-animation: mentorsprite 3.8s steps(10) infinite;
+  left: 120px;
+  width: 32px;
+  height: 32px;
+  overflow: hidden;
 }
 
-@-webkit-keyframes mentorsprite {
+.mentorbaumhaus {
-    100% { background-position: 0 -2560px; }
+  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;
+}

www/index.html

@@ -42,7 +42,6 @@
     <script src="js/services.js"></script>
   </head>
   <body ng-app="kinderspiel">
-
     <ion-nav-view></ion-nav-view>
   </body>
 </html>

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');
       }

www/templates/home.html

@@ -6,8 +6,22 @@
         <img class="myborder" src="img/elefant.jpg" height="128" width="128" ng-click="spiel1_intro()">
       </div>
     </div>
-    <div class="mentorborder" ng-show="showmentor">
+    <div class="baumhaus">        
-        <div class="mentor"></div>
+        <div class="mentorborderbaumhaus" ng-show="showmentor">
+            <div class="mentorbaumhaus"></div>
         </div>
+    </div>
+<div id="background-wrap">
+    <div class="x1">
+        <div class="cloud"></div>
+    </div>
+
+    <div class="x2">
+        <div class="cloud"></div>
+    </div>
+
+</div>
+
+
   </ion-content>
 </ion-view>