Neuer Hintergrund Wolken, Baumhaus, Mentor im Baumhaus
This commit is contained in:
Carsten Hilmer
parent
562e25fa3d
commit
52d822c7ee
@ -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;
|
||||
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;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 5.0 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 263 KiB |
BIN
www/img/mentor_32px.png
Normal file
BIN
www/img/mentor_32px.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
BIN
www/img/mentor_64px.png
Normal file
BIN
www/img/mentor_64px.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
756
www/img/treehouse.svg
Normal file
756
www/img/treehouse.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 96 KiB |
@ -42,7 +42,6 @@
|
||||
<script src="js/services.js"></script>
|
||||
</head>
|
||||
<body ng-app="kinderspiel">
|
||||
|
||||
<ion-nav-view></ion-nav-view>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -19,6 +19,8 @@ angular.module('kinderspiel.services', [])
|
||||
|
||||
function loopbackgroundmusic(){
|
||||
if (inbackground == false){
|
||||
backgroundmusic.release();
|
||||
backgroundmusic=mybackground_music;
|
||||
backgroundmusic.play();
|
||||
backgroundmusic.setVolume('0.3');
|
||||
}
|
||||
|
||||
@ -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="mentor"></div>
|
||||
<div class="baumhaus">
|
||||
<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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user