_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki 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, opacity: 1,
y: 0 y: 0
}) })
.to(".bubble-1", {
opacity: 0
})
.to(".story-1", { .to(".story-1", {
x: -maxImageTranslateValue * (2/bubbleNumber), x: -maxImageTranslateValue * (2/bubbleNumber),
onStart: function() { onStart: function() {
@ -237,13 +234,13 @@
document.getElementById("leymah").src = charStaticImage; document.getElementById("leymah").src = charStaticImage;
} }
}) })
.to(".bubble-1", {
opacity: 0
})
.to(".bubble-2", { .to(".bubble-2", {
opacity: 1, opacity: 1,
y: 0 y: 0
}) })
.to(".bubble-2", {
opacity: 0
})
.to(".story-1", { .to(".story-1", {
x: -maxImageTranslateValue * (3/bubbleNumber), x: -maxImageTranslateValue * (3/bubbleNumber),
onStart: function() { onStart: function() {
@ -253,13 +250,13 @@
document.getElementById("leymah").src = charStaticImage; document.getElementById("leymah").src = charStaticImage;
} }
}) })
.to(".bubble-2", {
opacity: 0
})
.to(".bubble-3", { .to(".bubble-3", {
opacity: 1, opacity: 1,
y: 0 y: 0
}) })
.to(".bubble-3", {
opacity: 0
})
.to(".story-1", { .to(".story-1", {
x: -maxImageTranslateValue, x: -maxImageTranslateValue,
onStart: function() { onStart: function() {
@ -269,10 +266,19 @@
document.getElementById("leymah").src = "static/images/story/character-static.png"; document.getElementById("leymah").src = "static/images/story/character-static.png";
} }
}) })
.to(".bubble-3", {
opacity: 0
})
.to(".bubble-4", { .to(".bubble-4", {
opacity: 1, opacity: 1,
y: 0 y: 0
}) })
.to(".character, .bubble-4", {
x: "51vw",
onStart: function() {
document.getElementById("leymah").src = "static/images/story/character-walk-right.gif";
},
})
.to(".bubble-4", { .to(".bubble-4", {
opacity: 0 opacity: 0
}); });

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

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