lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Adding fixed bubbles

Browse source
This commit is contained in:
Hugo Averty 2020-06-16 13:51:25 +02:00
parent d54e884063
commit 8e67a41063
2 changed files with 26 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
website/dist/index.html vendored
View file

@ -225,9 +225,6 @@
opacity: 1,
y: 0
})
.to(".bubble-1", {
opacity: 0
})
.to(".story-1", {
x: -maxImageTranslateValue * (2/bubbleNumber),
onStart: function() {
@ -237,13 +234,13 @@
document.getElementById("leymah").src = charStaticImage;
}
})
.to(".bubble-1", {
opacity: 0
})
.to(".bubble-2", {
opacity: 1,
y: 0
})
.to(".bubble-2", {
opacity: 0
})
.to(".story-1", {
x: -maxImageTranslateValue * (3/bubbleNumber),
onStart: function() {
@ -253,13 +250,13 @@
document.getElementById("leymah").src = charStaticImage;
}
})
.to(".bubble-2", {
opacity: 0
})
.to(".bubble-3", {
opacity: 1,
y: 0
})
.to(".bubble-3", {
opacity: 0
})
.to(".story-1", {
x: -maxImageTranslateValue,
onStart: function() {
@ -269,10 +266,19 @@
document.getElementById("leymah").src = "static/images/story/character-static.png";
}
})
.to(".bubble-3", {
opacity: 0
})
.to(".bubble-4", {
opacity: 1,
y: 0
})
.to(".character, .bubble-4", {
x: "51vw",
onStart: function() {
document.getElementById("leymah").src = "static/images/story/character-walk-right.gif";
},
})
.to(".bubble-4", {
opacity: 0
});

16
website/src/sass/styles.scss
View file

@ -21,6 +21,12 @@
font-family: 'VCR OSD Mono';
src: url('../fonts/VCR_OSD.ttf') format('truetype');
}
@function randomNum($min, $max) {
$rand: random();
$randomNum: $min + floor($rand * (($max - $min) + 1));
@return $randomNum;
}
header {
background: #28A7FC url("../images/sky.jpg") no-repeat bottom;
@ -275,20 +281,20 @@ img{
transform: translate(0px, 0px);
}
25% {
transform: translate(#{25+random(50)}px, #{10+random(35)}px);
transform: translate(#{randomNum(0, 50)}px, #{randomNum(0, 50)}px);
}
50% {
transform: translate(#{25+random(50)}px, #{10+random(35)}px);
transform: translate(#{randomNum(0, 50)}px, #{randomNum(0, 50)}px);
}
75% {
transform: translate(#{25+random(50)}px, #{10+random(35)}px);
transform: translate(#{randomNum(0, 50)}px, #{randomNum(0, 50)}px);
}
100% {
transform: translate(#{25+random(50)}px, #{10+random(35)}px);
transform: translate(#{randomNum(0, 50)}px, #{randomNum(0, 50)}px);
}
}
.bird-#{$i} {
margin: 0 #{random(7)}vw;
margin: 0 #{randomNum(0, 10)}vw;
transition-timing-function: cubic-bezier(0.150, -0.600, 0.155, 1.650);
animation-duration: 15s;
animation-name: fly-#{$i};