Notoric
/
FEWD-CTEC3905
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changed background image to use colour selector

This commit is contained in:
Notoric 2024-02-19 20:42:24 +00:00
parent c3cdabf39f
commit 7b59a3e70a
19 changed files with 199 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/photos/ai-generated-8432825-dgstudios.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 MiB

BIN
assets/photos/aurora-1197753.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 MiB

BIN
assets/photos/avenue-815297.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
assets/photos/clouds-8459053.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 MiB

BIN
assets/photos/field-6574455.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
assets/photos/forest-3622519.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 MiB

BIN
assets/photos/hintersee-3601004.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 MiB

BIN
assets/photos/milky-way-1845068.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 MiB

BIN
assets/photos/mountain-landscape-2031539.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 MiB

BIN
assets/photos/road-1072821.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 MiB

BIN
assets/photos/road-8395119.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 MiB

BIN
assets/photos/sunset-1373171.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 969 KiB

BIN
assets/photos/sunset-2582687-dreamypixel.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.7 MiB

BIN
assets/photos/sunset-404072.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
assets/photos/thunderstorm-3625405.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
assets/photos/winter-2080070.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 547 KiB

152
css/styles.css
View File

@ -3,50 +3,101 @@
/* applies to screens smaller than 500px (first breakpoint) */ /* applies to screens smaller than 500px (first breakpoint) */
/* and above unless overwritten below */ /* and above unless overwritten below */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600&display=swap');
:root { :root {
--background-color: #0d0d0d;
} }
body { body {
background: #fcc; font-family: 'Outfit', sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box;
} }
main { @keyframes fadeImage {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#textWindow {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-image: url(/assets/photos/winter-2080070.jpg); display: flex;
justify-content: center;
align-items: center;
background-size: cover; background-size: cover;
overflow: hidden; transition: opacity 1s forwards; /*transition does not work for images*/
position: relative;
} }
.textWindow { #textWindow #background {
margin: 0; position: absolute;
padding: 0; top: 0;
width: auto; left: 0;
width: 100%;
height: 100%; height: 100%;
z-index: -2;
}
display: flex; #textWindow #background-transition {
flex-direction: column; display: none;
position: absolute;
background-color: black; top: 0;
mix-blend-mode: multiply; left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0;
transition: opacity 1s ease-in-out;
} }
h1 { h1 {
font-size: 18vw; font-size: 10vw;
color: white; text-align: center;
margin: 0;
padding: 0;
padding-left: 2vw;
padding-top: 10vh;
font-family: 'Outfit', sans-serif;
} }
h1#title2 { #titleBanner {
padding-left: 8vw; padding-left: 5%;
padding-top: 0; padding-right: 5%;
transition: color 1s, background-color 1s;
}
.black {
background-color: #000;
color: #fff;
mix-blend-mode: multiply;
}
.white {
background-color: #fff;
color: #000;
mix-blend-mode: lighten;
}
#colorSelector {
display: flex;
position: fixed;
top: 0;
right: 0;
margin: 10px;
align-items: center;
}
#colorSelector input {
margin-left: 10px;
}
#colorSelector label {
font-size: 1.5em;
} }
/* TABLET STYLES */ /* TABLET STYLES */
@ -54,24 +105,7 @@ h1#title2 {
@media screen and (min-width: 500px) { @media screen and (min-width: 500px) {
/* applies to screens wider than 499px */ /* applies to screens wider than 499px */
.textWindow {
justify-content: center;
}
h1 {
font-size: 20vw;
padding-left: 2vw;
padding-top: 0vh;
}
h1#title2 {
padding-left: 10vw;
padding-top: 0;
}
body {
background: #cfc;
}
} }
@ -82,40 +116,4 @@ h1#title2 {
/* applies to screens wider than 999px */ /* applies to screens wider than 999px */
body {
background: #ccf;
}
main {
display: grid;
grid-template-areas: "left right";
}
.textWindow {
grid-column: left;
width: 50vw;
height: 100vh;
}
.extraWindow {
grid-column: right;
width: 50vw;
height: 100vh;
background-image: url(/assets/photos/ai-generated-8432825-dgstudios.png);
filter: saturate(50%) ;
background-size: cover;
mix-blend-mode: darken;
}
h1 {
font-size: 12vw;
padding-left: 2vw;
padding-top: 0vh;
}
h1#title2 {
padding-left: 8vw;
padding-top: 0;
}
} }

13
index.html
View File

@ -5,15 +5,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>P2672045</title> <title>P2672045</title>
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@600&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<main> <main>
<div class="textWindow"> <div id="textWindow">
<h1 id="title1">Tom</h1> <div id="background"></div>
<h1 id="title2">Cornes</h1> <div id="background-transition"></div>
<h1 id="titleBanner" class="black">Tom Cornes</h1>
<div id="colorSelector">
<label for="bgColor">Background Color:</label>
<input id="bgColor" type="color" value="#ffffff">
</div>
</div> </div>
<div class="extraWindow"></div>
</main> </main>
<script src="js/scripts.js"></script> <script src="js/scripts.js"></script>
</body> </body>

100
js/scripts.js
View File

@ -1 +1,101 @@
console.log("hello"); console.log("hello");
function changeBackground(R, G, B) {
const colours = [
[255, 255, 255],
[210, 100, 110],
[90, 65, 125],
[210, 160, 100],
[220, 100, 15],
[210, 15, 0],
[100, 125, 150],
[100, 140, 90],
[20, 40, 20],
[220, 140, 180],
[0, 0, 0],
[0, 140, 220],
[0, 255, 160],
[60, 90, 20]
]
}
function transitionBackground(newUrl, blackwhite) {
const background = document.getElementById("background");
const transitionLayer = document.getElementById("background-transition");
const title = document.getElementById("titleBanner");
title.className = blackwhite;
transitionLayer.style.background = `url(${newUrl}) 50% 50% / cover`;
transitionLayer.style.display = "block";
transitionLayer.style.opacity = "0";
setTimeout(() => {
transitionLayer.style.opacity = '1';
}, 10);
transitionLayer.addEventListener("transitionend", () => {
background.style.background = `url(${newUrl}) 50% 50% / cover`;
transitionLayer.style.display = "none";
transitionLayer.style.opacity = "0";
}, {once: true});
}
function transitionFog() {
transitionBackground("assets/photos/fog-8519076-nordseher.jpg", "black");
}
function transitionSunset() {
transitionBackground("assets/photos/sunset-5928907-lizzymay.jpg", "white");
}
function transitionSunsetPurple() {
transitionBackground("assets/photos/sunset-1373171.jpg", "black");
}
function transitionSunsetYellow() {
transitionBackground("assets/photos/sunset-404072.jpg", "black");
}
function transitionRoadOrange() {
transitionBackground("assets/photos/road-1072821.jpg", "white");
}
function transitionRoadRed() {
transitionBackground("assets/photos/road-8395119.jpg", "white");
}
function transitionClouds() {
transitionBackground("assets/photos/clouds-8459053.jpg", "black");
}
function transitionForest() {
transitionBackground("assets/photos/forest-3622519.jpg", "black");
}
function transitionAvenue() {
transitionBackground("assets/photos/avenue-815297.jpg", "black");
}
function transitionMountain() {
transitionBackground("assets/photos/mountain-landscape-2031539.jpg", "black");
}
function transitionGalaxy() {
transitionBackground("assets/photos/milky-way-1845068.jpg", "white");
}
function transitionThunderstorm() {
transitionBackground("assets/photos/thunderstorm-3625405.jpg", "black");
}
function transitionAurora() {
transitionBackground("assets/photos/aurora-1197753.jpg", "black");
}
function transitionLake() {
transitionBackground("assets/photos/hintersee-3601004.jpg", "white");
}
transitionBackground("assets/photos/fog-8519076-nordseher.jpg", "black")