noby/workadventure
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adding full screen (vh) story

Browse Source
This commit is contained in:
Hugo Averty 2020-06-14 13:29:47 +02:00
parent c53701288c
commit d54e884063
2 changed files with 72 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
website/dist/index.html vendored
View File

@ -86,11 +86,11 @@
</div>
</div>
</div>
<div class="title text-center">
<div class="title title-main text-center">
<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>
</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 start" href="/choose-map.html" title="PRIVATE MODE">
PRIVATE MODE
@ -112,6 +112,12 @@
</div>
</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" />
@ -153,16 +159,41 @@
<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()">
<p class="bubble-action"><a href="/choose-map.html">
<img src="static/images/playicon.png" />
START IN PRIVATE MODE
</span></p>
</a></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";
@ -177,11 +208,6 @@
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)
@ -206,7 +232,6 @@
x: -maxImageTranslateValue * (2/bubbleNumber),
onStart: function() {
document.getElementById("leymah").src = charWalkToRightImage;
moveMountains();
},
onComplete: function() {
document.getElementById("leymah").src = charStaticImage;
@ -223,7 +248,6 @@
x: -maxImageTranslateValue * (3/bubbleNumber),
onStart: function() {
document.getElementById("leymah").src = charWalkToRightImage;
moveMountains();
},
onComplete: function() {
document.getElementById("leymah").src = charStaticImage;
@ -240,7 +264,6 @@
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";

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

@ -75,10 +75,12 @@ header {
font-family: 'Karmatic Arcade';
font-size: 2.75rem;
margin-bottom: 1.25rem;
color: white;
}
h3 {
min-height: 200px;
padding: 1rem;
color: #106ca2;
}
@include media-breakpoint-down(xs) {
h3 {
@ -87,34 +89,34 @@ header {
}
}
}
.clouds {
content: "";
position: absolute;
bottom: 0;
right: 0;
height: 162px;
overflow: hidden;
width: 100%;
z-index: 1;
&.clouds-2 {
bottom: 25px;
.cloud {
transform: translateX(50px);
-webkit-animation-duration: 80s;
opacity: .6;
}
}
}
.clouds {
content: "";
position: absolute;
bottom: 0;
right: 0;
height: 162px;
overflow: hidden;
width: 100%;
z-index: 1;
&.clouds-2 {
bottom: 25px;
.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;
transform: translateX(50px);
-webkit-animation-duration: 80s;
opacity: .6;
}
}
.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 {
0% {
@ -124,6 +126,7 @@ header {
-webkit-transform: translateX(-400px);
}
}
.custom-link{
cursor: pointer;
font-family: "VCR OSD Mono";
@ -212,6 +215,7 @@ img{
.story-wrapper {
background: white;
position: relative;
height: 100vh;
min-height: calc(672px + 75px);
padding-top: 75px;
width: 100%;
@ -223,6 +227,7 @@ img{
max-width: none;
}
.sky {
margin-top: 8vh;
z-index: 1;
position: absolute;
top: 0;
@ -230,6 +235,12 @@ img{
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;
@ -242,6 +253,7 @@ img{
position: absolute;
z-index: 10;
left: 0;
bottom: 0;
overflow: hidden;
}
.character {