Background now changes on transition with colourpicker

This commit is contained in:
Notoric 2024-02-19 22:13:06 +00:00
parent 92fe5f550b
commit 9fa58ed4f9
3 changed files with 80 additions and 3 deletions

View File

@ -57,7 +57,7 @@ body {
height: 100%; height: 100%;
z-index: -1; z-index: -1;
opacity: 0; opacity: 0;
transition: opacity 1s ease-in-out; transition: opacity 1s;
} }
h1 { h1 {
@ -90,6 +90,10 @@ h1 {
right: 0; right: 0;
margin: 10px; margin: 10px;
align-items: center; align-items: center;
padding: 10px;
background-color: #ffffff50;
border-radius: 10px;
} }
#colorSelector input { #colorSelector input {

View File

@ -13,8 +13,8 @@
<div id="background-transition"></div> <div id="background-transition"></div>
<h1 id="titleBanner" class="black">Tom Cornes</h1> <h1 id="titleBanner" class="black">Tom Cornes</h1>
<div id="colorSelector"> <div id="colorSelector">
<label for="bgColor">Background Color:</label> <label for="bgColour">Background Color:</label>
<input id="bgColor" type="color" value="#ffffff"> <input id="bgColour" type="color" value="#ffffff">
</div> </div>
</div> </div>
</main> </main>

View File

@ -18,19 +18,92 @@ function changeBackground(R, G, B) {
[60, 90, 20] [60, 90, 20]
] ]
let closestDistance = 500;
let closest = 0;
for (let i = 0; i < colours.length; i++) {
distance = Math.abs(R - colours[i][0]) +
Math.abs(G - colours[i][1]) +
Math.abs(B - colours[i][2]);
if (distance < closestDistance) {
closestDistance = distance;
closest = i;
} }
}
switch (closest) {
case 0:
transitionFog();
break;
case 1:
transitionSunset();
break;
case 2:
transitionSunsetPurple();
break;
case 3:
transitionSunsetYellow();
break;
case 4:
transitionRoadOrange();
break;
case 5:
transitionRoadRed();
break;
case 6:
transitionClouds();
break;
case 7:
transitionForest();
break;
case 8:
transitionAvenue();
break;
case 9:
transitionMountain();
break;
case 10:
transitionGalaxy();
break;
case 11:
transitionThunderstorm();
break;
case 12:
transitionAurora();
break;
case 13:
transitionLake();
break;
default:
transitionFog();
break;
}
}
bgColour.addEventListener("input", () => {
const R = parseInt(bgColour.value.substring(1, 3), 16);
const G = parseInt(bgColour.value.substring(3, 5), 16);
const B = parseInt(bgColour.value.substring(5, 7), 16);
changeBackground(R, G, B);
});
function transitionBackground(newUrl, blackwhite) { function transitionBackground(newUrl, blackwhite) {
const background = document.getElementById("background"); const background = document.getElementById("background");
const transitionLayer = document.getElementById("background-transition"); const transitionLayer = document.getElementById("background-transition");
const title = document.getElementById("titleBanner"); const title = document.getElementById("titleBanner");
transitionLayer.removeEventListener("transitionend", () => {});
title.className = blackwhite; title.className = blackwhite;
transitionLayer.style.background = `url(${newUrl}) 50% 50% / cover`; transitionLayer.style.background = `url(${newUrl}) 50% 50% / cover`;
transitionLayer.style.display = "block"; transitionLayer.style.display = "block";
transitionLayer.style.opacity = "0"; transitionLayer.style.opacity = "0";
setTimeout(() => {
transitionLayer.style.opacity = '0';
}, 10);
setTimeout(() => { setTimeout(() => {
transitionLayer.style.opacity = '1'; transitionLayer.style.opacity = '1';
}, 10); }, 10);