unimelb-projects/ccdp10003-project01
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fade intro out, fade controls in

Browse source
This commit is contained in:
Rory Healy 2023-04-18 19:17:40 +10:00
parent 287c588ec6
commit 4a3a4a4dd1
Signed by: roryhealy
GPG key ID: 610ED1098B8F435B
3 changed files with 69 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
index.html
View file

@ -8,25 +8,24 @@
</head>
<body>
<main class="wrapper">
<main>
<section class="centre">
<button id="button" onclick="begin()">Click to begin</button>
<button id="begin" onclick="begin()">Click to begin</button>
</section>
</main>
<footer>
<p id="title">The Myrtle Tree - A game about sound and reliving memories.</p>
<p class="credits" id="title">The Myrtle Tree - A pitch for a game about sound and reliving memories.</p>
<section class="controls">
<button id="playPause" class="controlButton" onclick="playPauseAudio()">
<button id="playPause" class="controlButtonOff" onclick="playPauseAudio()">
<img class="controlImage" src="public/images/play.svg" alt="play"></img>
</button>
<button id="stop" class="controlButton" onclick="stopAudio()">
<button id="stop" class="controlButtonOff" onclick="stopAudio()">
<img class="controlImage" src="public/images/stop.svg" alt="stop"></img>
</button>
<audio id="backgroundAudio" src="public/audio/roli.weba" type="audio/weba">
</section>
<p id="credits">By Rory Healy.</p>
</footer>
</main>
<script src="main.js"></script>
<p class="credits" id="credits">By Rory Healy.</p>
</footer> <script src="main.js"></script>
</body>
</html>

24
main.js
View file

@ -1,6 +1,6 @@
const backgroundAudio = document.getElementById("backgroundAudio");
const playPauseButton = document.getElementById("playPause")
let audioPlaying = false
const playPauseButton = document.getElementById("playPause");
let audioPlaying = false;
const playPauseAudio = () => {
if (audioPlaying === true) {
@ -21,10 +21,18 @@ const stopAudio = () => {
};
const begin = () => {
// First pause the audio
playPauseAudio();
// Then fade everything out
// Finally, load in the new content
// Switch credits to media controls
document.querySelector('#begin').id = 'beginOff';
for (let element of document.querySelectorAll('.credits')) {
element.id = 'creditsOff';
}
setTimeout(() => {
for (let element of document.querySelectorAll('.credits')) {
element.style.display = 'none';
}
for (let element of document.querySelectorAll('.controlButtonOff')) {
element.className = 'controlButtonOn';
}
}, 1000);
playPauseAudio()
};

47
styles.css
View file

@ -12,24 +12,27 @@
--card-border-rgb: 131, 134, 135;
}
* {
margin: 0;
padding: 0;
}
body {
color: rgb(var(--foreground-rgb));
background: rgb(var(--background-rgb));
}
.wrapper {
main {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
margin: 10dvh 10dvw;
}
.centre {
margin: 25vh 0;
margin: 40vh 0;
}
.centre #button {
.centre #begin {
background: rgb(var(--card-rgb));
border: 1px solid rgb(var(--card-border-rgb));
border-radius: var(--border-radius);
@ -37,10 +40,22 @@ body {
transition: background 200ms, border 200ms;
}
.centre #beginOff {
visibility: none;
opacity: 0;
transition: visibility 0.3s, opacity 0.3s linear;
background: rgb(var(--card-rgb));
border: 1px solid rgb(var(--card-border-rgb));
border-radius: var(--border-radius);
padding: 1rem 1.2rem;
}
footer {
display: grid;
position: fixed;
width: 100%;
grid-template-columns: repeat(3, 1fr);
bottom: 5dvh;
display: flex;
justify-content: space-evenly;
align-items: center;
}
@ -48,11 +63,25 @@ footer section {
justify-self: center;
}
footer #credits {
#credits {
text-align: right;
}
.controlButton {
#creditsOff {
visibility: none;
opacity: 0;
transition: visibility 0.3s, opacity 0.3s linear;
}
.controlButtonOff {
visibility: none;
opacity: 0;
}
.controlButtonOn {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
border-radius: var(--border-radius);
background: none;
border: none;