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

Merge pull request #183 from thecodingmachine/landing-nip

Browse Source 
Adding storytelling block to landing page
This commit is contained in:
David Négrier 2020-06-24 18:31:52 +02:00 committed by GitHub
commit 9962ca2d48
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 362 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -2,4 +2,5 @@
.idea .idea
.vagrant .vagrant
Vagrantfile Vagrantfile
docker-compose.override.yaml docker-compose.override.yaml
*.DS_Store

BIN
README-INTRO.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 386 KiB

4
README.md
View File

@ -1,5 +1,9 @@
![](https://github.com/thecodingmachine/workadventure/workflows/Continuous%20Integration/badge.svg) ![](https://github.com/thecodingmachine/workadventure/workflows/Continuous%20Integration/badge.svg)
![WorkAdventure landscape image](README-INTRO.jpg)
Demo here : [https://workadventu.re/](https://workadventu.re/).
# Work Adventure # Work Adventure
## Work in progress ## Work in progress

175
website/dist/index.html vendored
View File

@ -65,6 +65,9 @@
window.open('https://twitter.com/share?text=Your workplace but better!&url=https://workadventu.re/&hashtags=thecodingmachine', '_blank', 'width=500,height=500'); window.open('https://twitter.com/share?text=Your workplace but better!&url=https://workadventu.re/&hashtags=thecodingmachine', '_blank', 'width=500,height=500');
} }
</script> </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> </head>
<body> <body>
@ -92,21 +95,21 @@
</div> </div>
</div> </div>
</div> </div>
<div class="title text-center"> <div class="title title-main text-center">
<h1>Your workplace<br/>but better</h1> <h1>Your workplace<br/>but better</h1>
<h3>You are impatient to discover this new world? Click on "Play online" and meet new people or share this adventure with your colleagues and friends by clicking on "Private mode"</h3> <h3>You are impatient to discover this new world? Click on "Play online" and meet new people or share this adventure with your colleagues and friends by clicking on "Private mode"</h3>
</div> </div>
<div class="row justify-content-md-center pt-5"> <div class="row buttons-row justify-content-md-center pt-5">
<div class="col col-lg-3">
<a class="custom-link play" onclick="startGame()" title="PLAY ONLINE">
PLAY ONLINE
</a>
</div>
<div class="col col-lg-3"> <div class="col col-lg-3">
<a class="custom-link start" href="/choose-map.html" title="PRIVATE MODE"> <a class="custom-link start" href="/choose-map.html" title="PRIVATE MODE">
PRIVATE MODE PRIVATE MODE
</a> </a>
</div> </div>
<div class="col col-lg-3">
<a class="custom-link play" target="_BLANK" onclick="startGame()" title="PLAY ONLINE">
PLAY ONLINE
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -117,6 +120,164 @@
<div class="cloud"></div> <div class="cloud"></div>
</div> </div>
</header> </header>
<section class="story-wrapper">
<div class="clouds clouds-2">
<div class="cloud"></div>
</div>
<div class="clouds">
<div class="cloud"></div>
</div>
<div class="sky"></div>
<div class="mountains"></div>
<img src="static/images/story/story-map-bg.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: 209px;">
<div>
<p>WorkAdventure is a video-conference application that lets people hold multiple parallel conversations in a virtual universe. </p>
<p>Walk in, out, speak to anyone just like in real-life!</p>
</div>
</div>
<div class="bubble bubble-thinking" style="width: 269px;height: 211px;">
<div class="demo-gif">
<img src="static/images/story/WA-Demo.gif" />
</div>
</div>
<div class="bubble bubble-3" style="height: 209px;">
<div>
<p>Remote work? Friend party? Use WorkAdventure as you prefer.</p>
<p>Click the button below to come and say hi!</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: 254px;">
<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"><a href="/choose-map.html">
<img src="static/images/playicon.png" />
START IN PRIVATE MODE
</a></p>
<p>
Don’t forget to activate your mic and camera, let’s play
</p>
</div>
</div>
<!-- PRELOADING (hidden elements) -->
<img src="static/images/story/character-walk-right.gif" style="display:none;" />
</section>
<script>
gsap.to(".title-main", {
//y:-1000,
scale: 0,
opacity: 0,
ease: "none",
scrollTrigger: {
trigger: "header",
start: "top top", // the default values
// end: "bottom top",
scrub: true
},
});
gsap.to(".over-image .clouds", {
y: 100,
ease: "none",
scrollTrigger: {
trigger: "header",
start: "top top", // the default values
// end: "bottom top",
scrub: true
},
});
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
}
});
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, .bubble-thinking", {
opacity: 1,
y: 0
})
.to(".story-1", {
x: -maxImageTranslateValue * (2/bubbleNumber),
onStart: function() {
document.getElementById("leymah").src = charWalkToRightImage;
},
onComplete: function() {
document.getElementById("leymah").src = charStaticImage;
}
})
.to(".bubble-1, .bubble-thinking", {
opacity: 0
})
.to(".bubble-3", {
opacity: 1,
y: 0
})
.to(".story-1", {
x: -maxImageTranslateValue,
onStart: function() {
document.getElementById("leymah").src = "static/images/story/character-walk-right.gif";
},
onComplete: function() {
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: "53vw",
onStart: function() {
document.getElementById("leymah").src = "static/images/story/character-walk-right.gif";
},
})
.to(".bubble-4", {
opacity: 0
});
</script>
<div class="section bg-white how-to"> <div class="section bg-white how-to">
<div class="desktop-only text-center d-block d-md-none d-lg-none d-xl-none"> <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 /> <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/WA-Demo.gif vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

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/dist/static/images/story/story-map-bg.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/thinking.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
website/src/images/story/WA-Demo.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

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

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

213
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;
@ -87,34 +93,34 @@ header {
} }
} }
} }
.clouds {
content: ""; }
position: absolute; .clouds {
bottom: 0; content: "";
right: 0; position: absolute;
height: 162px; bottom: 0;
overflow: hidden; right: 0;
width: 100%; height: 162px;
z-index: 1; overflow: hidden;
&.clouds-2 { width: 100%;
bottom: 25px; z-index: 1;
.cloud { &.clouds-2 {
transform: translateX(50px); bottom: 25px;
-webkit-animation-duration: 80s;
opacity: .6;
}
}
.cloud { .cloud {
background: url('../images/cloud.png') repeat-x; transform: translateX(50px);
height: 162px; -webkit-animation-duration: 80s;
width: 4000px; opacity: .6;
-webkit-animation-name: prop-600;
-webkit-animation-duration: 50s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction:alternate;
} }
} }
.cloud {
background: url('../images/cloud.png') repeat-x;
height: 162px;
width: 4000px;
-webkit-animation-name: prop-600;
-webkit-animation-duration: 50s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction:alternate;
}
} }
@-webkit-keyframes prop-600 { @-webkit-keyframes prop-600 {
0% { 0% {
@ -124,7 +130,9 @@ header {
-webkit-transform: translateX(-400px); -webkit-transform: translateX(-400px);
} }
} }
.custom-link{ .custom-link{
cursor: pointer;
font-family: "VCR OSD Mono"; font-family: "VCR OSD Mono";
font-size: 1.125rem; font-size: 1.125rem;
letter-spacing: 5px; letter-spacing: 5px;
@ -216,6 +224,161 @@ img{
} }
} }
.story-wrapper {
background: white;
position: relative;
height: 100vh;
min-height: calc(672px + 75px);
padding-top: 75px;
width: 100%;
overflow: hidden;
@include media-breakpoint-down(sm) {
display: none;
}
img {
max-width: none;
}
.sky {
margin-top: 8vh;
z-index: 1;
position: absolute;
top: 0;
width: 100%;
height: 242px;
background: url(../images/story/sky.jpg) repeat-x top left;
}
.clouds {
bottom: auto;
top: 0;
z-index: 2;
transform: scaleY(-1);
}
.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;
bottom: 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(#{randomNum(0, 50)}px, #{randomNum(0, 50)}px);
}
50% {
transform: translate(#{randomNum(0, 50)}px, #{randomNum(0, 50)}px);
}
75% {
transform: translate(#{randomNum(0, 50)}px, #{randomNum(0, 50)}px);
}
100% {
transform: translate(#{randomNum(0, 50)}px, #{randomNum(0, 50)}px);
}
}
.bird-#{$i} {
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};
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:not(.demo-gif) {
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
}
}
}
&.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 {
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{ .section{
padding-top: 2rem; padding-top: 2rem;
padding-bottom: 5rem; padding-bottom: 5rem;