Background now changes on transition with colourpicker
This commit is contained in:
parent
92fe5f550b
commit
9fa58ed4f9
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in New Issue