Add story of Leymah to landing page
3
.gitignore
vendored
@ -2,4 +2,5 @@
|
||||
.idea
|
||||
.vagrant
|
||||
Vagrantfile
|
||||
docker-compose.override.yaml
|
||||
docker-compose.override.yaml
|
||||
*.DS_Store
|
147
website/dist/index.html
vendored
@ -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
After Width: | Height: | Size: 684 B |
BIN
website/dist/static/images/story/Story-map-1.png
vendored
Normal file
After Width: | Height: | Size: 724 KiB |
BIN
website/dist/static/images/story/bird.gif
vendored
Normal file
After Width: | Height: | Size: 912 B |
BIN
website/dist/static/images/story/character-static.png
vendored
Normal file
After Width: | Height: | Size: 4.4 KiB |
BIN
website/dist/static/images/story/character-walk-right.gif
vendored
Normal file
After Width: | Height: | Size: 6.5 KiB |
BIN
website/src/images/story/bubble-border-bottom-left.png
Normal file
After Width: | Height: | Size: 500 B |
BIN
website/src/images/story/bubble-border-bottom-right.png
Normal file
After Width: | Height: | Size: 628 B |
BIN
website/src/images/story/bubble-revert.png
Normal file
After Width: | Height: | Size: 2.4 KiB |
BIN
website/src/images/story/bubble.png
Normal file
After Width: | Height: | Size: 2.4 KiB |
BIN
website/src/images/story/mountains.png
Normal file
After Width: | Height: | Size: 79 KiB |
BIN
website/src/images/story/sky.jpg
Normal file
After Width: | Height: | Size: 570 KiB |
@ -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;
|
||||
|