Changed background image to use colour selector
Notoric
|
Before Width: | Height: | Size: 13 MiB |
|
After Width: | Height: | Size: 7.0 MiB |
|
After Width: | Height: | Size: 1.6 MiB |
|
After Width: | Height: | Size: 2.2 MiB |
|
After Width: | Height: | Size: 1.9 MiB |
|
After Width: | Height: | Size: 4.2 MiB |
|
After Width: | Height: | Size: 3.7 MiB |
|
After Width: | Height: | Size: 4.3 MiB |
|
After Width: | Height: | Size: 3.1 MiB |
|
After Width: | Height: | Size: 3.1 MiB |
|
After Width: | Height: | Size: 3.4 MiB |
|
After Width: | Height: | Size: 969 KiB |
|
Before Width: | Height: | Size: 5.7 MiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 1.9 MiB |
|
Before Width: | Height: | Size: 547 KiB |
160
css/styles.css
|
|
@ -3,50 +3,101 @@
|
|||
/* applies to screens smaller than 500px (first breakpoint) */
|
||||
/* and above unless overwritten below */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600&display=swap');
|
||||
|
||||
:root {
|
||||
--background-color: #0d0d0d;
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
background: #fcc;
|
||||
font-family: 'Outfit', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-image: url(/assets/photos/winter-2080070.jpg);
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.textWindow {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
@keyframes fadeImage {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#textWindow {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-size: cover;
|
||||
transition: opacity 1s forwards; /*transition does not work for images*/
|
||||
position: relative;
|
||||
}
|
||||
|
||||
background-color: black;
|
||||
mix-blend-mode: multiply;
|
||||
#textWindow #background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
#textWindow #background-transition {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
transition: opacity 1s ease-in-out;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 18vw;
|
||||
color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-left: 2vw;
|
||||
padding-top: 10vh;
|
||||
font-family: 'Outfit', sans-serif;
|
||||
font-size: 10vw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1#title2 {
|
||||
padding-left: 8vw;
|
||||
padding-top: 0;
|
||||
#titleBanner {
|
||||
padding-left: 5%;
|
||||
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 */
|
||||
|
|
@ -54,24 +105,7 @@ h1#title2 {
|
|||
@media screen and (min-width: 500px) {
|
||||
|
||||
/* 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 */
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
35
index.html
|
|
@ -1,20 +1,23 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>P2672045</title>
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@600&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="textWindow">
|
||||
<h1 id="title1">Tom</h1>
|
||||
<h1 id="title2">Cornes</h1>
|
||||
</div>
|
||||
<div class="extraWindow"></div>
|
||||
</main>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>P2672045</title>
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div id="textWindow">
|
||||
<div id="background"></div>
|
||||
<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>
|
||||
</main>
|
||||
<script src="js/scripts.js"></script>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
102
js/scripts.js
|
|
@ -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")
|
||||