_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add story of Leymah to landing page

Browse Source
This commit is contained in:
Hugo Averty 2020-06-14 11:32:15 +02:00
parent 281df16704
commit 5c8aa80b24
14 changed files with 282 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -3,3 +3,4 @@
.vagrant
Vagrantfile
docker-compose.override.yaml
*.DS_Store

147
website/dist/index.html vendored
View File

@ -56,6 +56,9 @@
window.location.assign(playUrl);
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js" integrity="sha256-MVs0yHYDQBhIRZrNeWB1YaNMrGbFwowIEPIl3um5MZE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/ScrollTrigger.min.js" integrity="sha256-FEFPM9cOclVyq+lIim2xnU/dAgrALF+g4M8kYm2tbX0=" crossorigin="anonymous"></script>
</head>
<body>
@ -108,6 +111,150 @@
<div class="cloud"></div>
</div>
</header>
<section class="story-wrapper">
<div class="sky"></div>
<div class="mountains"></div>
<img src="static/images/story/story-map-1.png" height="672" class="story-1" />
<img src="static/images/story/character-static.png" class="character" id="leymah" />
<div class="birds">
<img class="bird bird-1" src="static/images/story/bird.gif" />
<img class="bird bird-2" src="static/images/story/bird.gif" />
<img class="bird bird-3" src="static/images/story/bird.gif" />
<img class="bird bird-4" src="static/images/story/bird.gif" />
<img class="bird bird-5" src="static/images/story/bird.gif" />
<img class="bird bird-6" 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" />
</div>
<div class="bubble bubble-1" style="width: 320px;height: 164px;">
<div>
<p><strong>Hello,</strong></p>
<p>I'm Leymah of WorkAdventure !</p>
<p>During COVID, everybody were far from each other.</p>
</div>
</div>
<div class="bubble bubble-2 b-revert" style="height: 164px;">
<div>
<p>So, my developper’s team decide to build a plateform to keep proximity.</p>
<p>This is how I’m born.</p>
</div>
</div>
<div class="bubble bubble-3" style="height: 164px;">
<div>
<p>With WorkAdventure, you can meet people and discuss with them.</p>
<p class="bubble-legend">To try, press button public mode</p>
<p class="bubble-action"><span onclick="startGame()">
<img src="static/images/playicon.png" />
START IN PUBLIC MODE
</span></p>
</div>
</div>
<div class="bubble bubble-4 b-revert" style="height: 164px;">
<div>
<p>You can also create a private room with your friends or your team ! </p>
<p class="bubble-legend">To try, press button private mode</p>
<p class="bubble-action"><span onclick="startGame()">
<img src="static/images/playicon.png" />
START IN PRIVATE MODE
</span></p>
</div>
</div>
<!-- PRELOADING (hidden elements) -->
<img src="static/images/story/character-walk-right.gif" style="display:none;" />
</section>
<script>
var maxImageTranslateValue = 3507 - window.innerWidth;
var bubbleNumber = document.getElementsByClassName("bubble").length;
var charWalkToRightImage = "static/images/story/character-walk-right.gif";
var charStaticImage = "static/images/story/character-static.png";
var storyScrollTrigger = gsap.timeline({
scrollTrigger: {
trigger: ".story-wrapper",
pin: true, // pin the trigger element while active
start: "top top", // when the top of the trigger hits the top of the viewport
//end: "+=500", // end after scrolling 500px beyond the start
scrub: 1, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar
}
});
var moveMountains = function() {
storyScrollTrigger.to(".mountains", {
x: -100
})
};
storyScrollTrigger.to(".birds", {
x: (-window.innerWidth -200)
});
storyScrollTrigger.from(".character", {
x: -maxImageTranslateValue * (1/bubbleNumber),
onStart: function() {
document.getElementById("leymah").src = charWalkToRightImage;
},
onComplete: function() {
document.getElementById("leymah").src = charStaticImage;
}
})
.to(".bubble-1", {
opacity: 1,
y: 0
})
.to(".bubble-1", {
opacity: 0
})
.to(".story-1", {
x: -maxImageTranslateValue * (2/bubbleNumber),
onStart: function() {
document.getElementById("leymah").src = charWalkToRightImage;
moveMountains();
},
onComplete: function() {
document.getElementById("leymah").src = charStaticImage;
}
})
.to(".bubble-2", {
opacity: 1,
y: 0
})
.to(".bubble-2", {
opacity: 0
})
.to(".story-1", {
x: -maxImageTranslateValue * (3/bubbleNumber),
onStart: function() {
document.getElementById("leymah").src = charWalkToRightImage;
moveMountains();
},
onComplete: function() {
document.getElementById("leymah").src = charStaticImage;
}
})
.to(".bubble-3", {
opacity: 1,
y: 0
})
.to(".bubble-3", {
opacity: 0
})
.to(".story-1", {
x: -maxImageTranslateValue,
onStart: function() {
document.getElementById("leymah").src = "static/images/story/character-walk-right.gif";
moveMountains();
},
onComplete: function() {
document.getElementById("leymah").src = "static/images/story/character-static.png";
}
})
.to(".bubble-4", {
opacity: 1,
y: 0
})
.to(".bubble-4", {
opacity: 0
});
</script>
<div class="section bg-white how-to">
<div class="desktop-only text-center d-block d-md-none d-lg-none d-xl-none">
<img src="static/images/desktop.png" width="64" /><br />

BIN
website/dist/static/images/playicon.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 684 B

BIN
website/dist/static/images/story/Story-map-1.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 724 KiB

BIN
website/dist/static/images/story/bird.gif vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 912 B

BIN
website/dist/static/images/story/character-static.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
website/dist/static/images/story/character-walk-right.gif vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
website/src/images/story/bubble-border-bottom-left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 500 B

BIN
website/src/images/story/bubble-border-bottom-right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 628 B

BIN
website/src/images/story/bubble-revert.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
website/src/images/story/bubble.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
website/src/images/story/mountains.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

BIN
website/src/images/story/sky.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 570 KiB

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

@ -125,6 +125,7 @@ header {
}
}
.custom-link{
cursor: pointer;
font-family: "VCR OSD Mono";
font-size: 1.125rem;
letter-spacing: 5px;
@ -208,6 +209,138 @@ img{
}
}
.story-wrapper {
background: white;
position: relative;
min-height: calc(672px + 75px);
padding-top: 75px;
width: 100%;
overflow: hidden;
@include media-breakpoint-down(sm) {
display: none;
}
img {
max-width: none;
}
.sky {
z-index: 1;
position: absolute;
top: 0;
width: 100%;
height: 242px;
background: url(../images/story/sky.jpg) repeat-x top left;
}
.mountains {
z-index: 5;
position: absolute;
bottom: 200px;
width: calc(100% + 200px);
height: 242px;
background: url(../images/story/mountains.png) repeat-x top center;
}
.story-1 {
position: absolute;
z-index: 10;
left: 0;
overflow: hidden;
}
.character {
position: absolute;
z-index: 15;
bottom: 75px;
left: 0;
right: 0;
margin: auto;
}
.birds {
position: absolute;
z-index: 20;
right: -200px;
$birds: 8;
@for $i from 1 through $birds {
@keyframes fly-#{$i} {
0% {
transform: translate(0px, 0px);
}
25% {
transform: translate(#{25+random(50)}px, #{10+random(35)}px);
}
50% {
transform: translate(#{25+random(50)}px, #{10+random(35)}px);
}
75% {
transform: translate(#{25+random(50)}px, #{10+random(35)}px);
}
100% {
transform: translate(#{25+random(50)}px, #{10+random(35)}px);
}
}
.bird-#{$i} {
margin: 0 #{random(7)}vw;
transition-timing-function: cubic-bezier(0.150, -0.600, 0.155, 1.650);
animation-duration: 15s;
animation-name: fly-#{$i};
animation-iteration-count: infinite;
animation-direction: alternate;
}
}
}
.bubble {
color: black;
position: absolute;
z-index: 25;
bottom: 160px;
left: 263px;
right: -50px;
margin: auto;
opacity: 0;
height: 151px;
width: 289px;
line-height: 22px;
padding: 5px;
background: black;
transform: translateY(25px);
& > div {
padding: 15px 15px 30px;
position: relative;
width: 100%;
height: 100%;
background: white;
&:before {
content: "";
position: absolute;
background: url(../images/story/bubble-border-bottom-left.png) no-repeat bottom left;
left: -4px;
width: 28px;
height: 25px;
bottom: -20px;
}
p {
&.bubble-legend {
font-size: 12px;
color: grey;
margin: 0;
}
&.bubble-action {
cursor: pointer;
text-decoration: underline
}
}
}
&.b-revert {
left: -363px;
& > div:before {
left: auto;
right: -4px;
background: url(../images/story/bubble-border-bottom-right.png) no-repeat bottom left;
}
}
}
}
.pin-spacer {
background: white;
}
.section{
padding-top: 2rem;
padding-bottom: 5rem;