Save point: Buttons renamed to CREATOR/BUILDER/DEVELOPER, WHERE DO YOU FIT IN? fades in split second after buttons
This commit is contained in:
65
index.html
65
index.html
@@ -169,6 +169,18 @@
|
|||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#scene3FitInText {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 42%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: #00ff00;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: opacity 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
#scene2Lines {
|
#scene2Lines {
|
||||||
display: none;
|
display: none;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -311,9 +323,10 @@
|
|||||||
<span id="scene3RecruitText4"></span>
|
<span id="scene3RecruitText4"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button id="creatorBtn" class="choiceBtn">CREATORS</button>
|
<div id="scene3FitInText"></div>
|
||||||
<button id="builderBtn" class="choiceBtn">BUILDERS</button>
|
<button id="creatorBtn" class="choiceBtn">CREATOR</button>
|
||||||
<button id="developerBtn" class="choiceBtn">DEVELOPERS</button>
|
<button id="builderBtn" class="choiceBtn">BUILDER</button>
|
||||||
|
<button id="developerBtn" class="choiceBtn">DEVELOPER</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="sceneCreator" class="scene">
|
<div id="sceneCreator" class="scene">
|
||||||
@@ -754,20 +767,34 @@
|
|||||||
blinkCursor(cursor, 3, () => {
|
blinkCursor(cursor, 3, () => {
|
||||||
typeCalmly(rt1, "THE LAB IS CONNECTING WITH PEOPLE WHO SEE WHAT'S HAPPENING — WHO KNOW CHANGE ISN'T OPTIONAL ANYMORE. WE'RE LOOKING FOR THOSE READY TO STEP IN AND SHAPE THE FUTURE.", () => {
|
typeCalmly(rt1, "THE LAB IS CONNECTING WITH PEOPLE WHO SEE WHAT'S HAPPENING — WHO KNOW CHANGE ISN'T OPTIONAL ANYMORE. WE'RE LOOKING FOR THOSE READY TO STEP IN AND SHAPE THE FUTURE.", () => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
choiceBtns.forEach(btn => {
|
choiceBtns.forEach(btn => {
|
||||||
btn.style.display = 'block';
|
btn.style.display = 'block';
|
||||||
btn.style.visibility = 'visible';
|
btn.style.visibility = 'visible';
|
||||||
let btnOpacity = 0;
|
let btnOpacity = 0;
|
||||||
const btnFadeIn = setInterval(() => {
|
const btnFadeIn = setInterval(() => {
|
||||||
btnOpacity += 0.02;
|
btnOpacity += 0.02;
|
||||||
if (btnOpacity >= 1) {
|
if (btnOpacity >= 1) {
|
||||||
btnOpacity = 1;
|
btnOpacity = 1;
|
||||||
clearInterval(btnFadeIn);
|
clearInterval(btnFadeIn);
|
||||||
btn.style.pointerEvents = 'auto';
|
btn.style.pointerEvents = 'auto';
|
||||||
}
|
}
|
||||||
btn.style.opacity = btnOpacity;
|
btn.style.opacity = btnOpacity;
|
||||||
}, 30);
|
}, 30);
|
||||||
});
|
});
|
||||||
|
setTimeout(() => {
|
||||||
|
const fitInText = document.getElementById('scene3FitInText');
|
||||||
|
fitInText.textContent = 'WHERE DO YOU FIT IN?';
|
||||||
|
fitInText.style.visibility = 'visible';
|
||||||
|
let fiOpacity = 0;
|
||||||
|
const fiFadeIn = setInterval(() => {
|
||||||
|
fiOpacity += 0.05;
|
||||||
|
if (fiOpacity >= 1) {
|
||||||
|
fiOpacity = 1;
|
||||||
|
clearInterval(fiFadeIn);
|
||||||
|
}
|
||||||
|
fitInText.style.opacity = fiOpacity;
|
||||||
|
}, 30);
|
||||||
|
}, 500);
|
||||||
}, 3000);
|
}, 3000);
|
||||||
}, 20, 50);
|
}, 20, 50);
|
||||||
});
|
});
|
||||||
@@ -852,6 +879,10 @@
|
|||||||
btn.style.opacity = '1';
|
btn.style.opacity = '1';
|
||||||
btn.style.pointerEvents = 'auto';
|
btn.style.pointerEvents = 'auto';
|
||||||
});
|
});
|
||||||
|
const fitInText = document.getElementById('scene3FitInText');
|
||||||
|
fitInText.textContent = 'WHERE DO YOU FIT IN?';
|
||||||
|
fitInText.style.visibility = 'visible';
|
||||||
|
fitInText.style.opacity = '1';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user