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

Adding gif and modifying text

Browse source
This commit is contained in:
Hugo Averty 2020-06-24 15:42:44 +02:00
parent 4552f26413
commit 99a8b42924
2 changed files with 27 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
website/dist/index.html vendored
View file

@ -132,23 +132,21 @@
<img class="bird bird-7" src="static/images/story/bird.gif" /> <img class="bird bird-7" src="static/images/story/bird.gif" />
<img class="bird bird-8" src="static/images/story/bird.gif" /> <img class="bird bird-8" src="static/images/story/bird.gif" />
</div> </div>
<div class="bubble bubble-1" style="width: 320px;height: 164px;"> <div class="bubble bubble-1" style="width: 320px;height: 209px;">
<div> <div>
<p><strong>Hello World !</strong></p> <p>WorkAdventure is a video-conference application that lets people hold multiple parallel conversations in a virtual universe. </p>
<p>I'm Leymah of WorkAdventure.</p> <p>Walk in, out, speak to anyone just like in real-life!</p>
<p>During COVID-19, we were missing our office…</p>
</div> </div>
</div> </div>
<div class="bubble bubble-2 b-revert" style="height: 164px;"> <div class="bubble bubble-thinking" style="width: 269px;height: 211px;">
<div> <div class="demo-gif">
<p>So our team of developer decided to build a platform so we can be together..</p> <img src="static/images/story/WA-Demo.gif" />
<p>This is how I was born.</p>
</div> </div>
</div> </div>
<div class="bubble bubble-3" style="height: 164px;"> <div class="bubble bubble-3" style="height: 209px;">
<div> <div>
<p>With WorkAdventure, you can meet people and discuss with them.</p> <p>Remote work? Friend party? Use WorkAdventure as you prefer.</p>
<p class="bubble-legend">To try, press button public mode</p> <p>Click the button below to come and say hi!</p>
<p class="bubble-action"><span onclick="startGame()"> <p class="bubble-action"><span onclick="startGame()">
<img src="static/images/playicon.png" /> <img src="static/images/playicon.png" />
START IN PUBLIC MODE START IN PUBLIC MODE
@ -224,7 +222,7 @@
document.getElementById("leymah").src = charStaticImage; document.getElementById("leymah").src = charStaticImage;
} }
}) })
.to(".bubble-1", { .to(".bubble-1, .bubble-thinking", {
opacity: 1, opacity: 1,
y: 0 y: 0
}) })
@ -237,23 +235,7 @@
document.getElementById("leymah").src = charStaticImage; document.getElementById("leymah").src = charStaticImage;
} }
}) })
.to(".bubble-1", { .to(".bubble-1, .bubble-thinking", {
opacity: 0
})
.to(".bubble-2", {
opacity: 1,
y: 0
})
.to(".story-1", {
x: -maxImageTranslateValue * (3/bubbleNumber),
onStart: function() {
document.getElementById("leymah").src = charWalkToRightImage;
},
onComplete: function() {
document.getElementById("leymah").src = charStaticImage;
}
})
.to(".bubble-2", {
opacity: 0 opacity: 0
}) })
.to(".bubble-3", { .to(".bubble-3", {
@ -277,7 +259,7 @@
y: 0 y: 0
}) })
.to(".character, .bubble-4", { .to(".character, .bubble-4", {
x: "51vw", x: "53vw",
onStart: function() { onStart: function() {
document.getElementById("leymah").src = "static/images/story/character-walk-right.gif"; document.getElementById("leymah").src = "static/images/story/character-walk-right.gif";
}, },

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

@ -318,7 +318,7 @@ img{
padding: 5px; padding: 5px;
background: black; background: black;
transform: translateY(25px); transform: translateY(25px);
& > div { & > div:not(.demo-gif) {
padding: 15px 15px 30px; padding: 15px 15px 30px;
position: relative; position: relative;
width: 100%; width: 100%;
@ -346,6 +346,20 @@ img{
} }
} }
&.bubble-thinking {
background: url(../images/story/thinking.png) no-repeat bottom right;
left: -406px;
& > .demo-gif {
width: 241px;
border-radius: 15px;
img {
width: calc(100% + 1px);
border-radius: 16px;
margin-top: -1px;
margin-left: -1px;
}
}
}
&.b-revert { &.b-revert {
left: -363px; left: -363px;
& > div:before { & > div:before {