Modifications to welcome view, smoothing welcome transitions.

Disabled clouds on welcome.ejs. Added some welcome text to replace the lorem ipsum. The alignment was also changed from center to justify, to make the UI look sharper. Transitions between each view was changed from 250ms to 500ms.

Removed some testing code from login.ejs.
This commit is contained in:
Daniel Scalzi
2018-04-07 19:58:23 -04:00
parent 5a8ae0485a
commit a16a22e2e1
3 changed files with 25 additions and 14 deletions

View File

@@ -1,12 +1,14 @@
<div id="welcomeContainer" style="display: none;">
<div class="cloudDiv">
<!--<div class="cloudDiv">
<div class="cloudTop"></div>
<div class="cloudBottom"></div>
</div>
</div>-->
<div id="welcomeContent">
<img id="welcomeImageSeal" src="assets/images/WesterosSealCircle.png"/>
<span id="welcomeHeader">WELCOME TO WESTEROSCRAFT</span>
<span id="welcomeDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
<span id="welcomeDescription">Our mission is to recreate the universe imagined by author George RR Martin in his book series, A Song of Ice and Fire, as accurately and precisely as possible within Minecraft. The world we are creating is yours to explore. Journey from Sunspear to the Last Hearth, and if you aren't afraid, beyond the wall. Best not delay. House Stark is always right eventually, winter is coming.</span>
<br>
<span id="welcomeDescCTA">You are just a few clicks away from Westeros.</span>
<button id="welcomeButton">
<div id="welcomeButtonContent">
CONTINUE
@@ -25,8 +27,8 @@
const welcomeButton = document.getElementById('welcomeButton')
welcomeButton.addEventListener('click', e => {
$('#welcomeContainer').fadeOut(250, () => {
$('#loginContainer').fadeIn(250)
$('#welcomeContainer').fadeOut(500, () => {
$('#loginContainer').fadeIn(500)
})
})