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

Working desktop carousel

This commit is contained in:
Notoric 2024-02-23 23:56:16 +00:00
parent 9fa58ed4f9
commit dc521d03c5
7 changed files with 145 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/photos/fantasy-2770468_1920.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 393 KiB

BIN
assets/photos/science-fiction-2907434_1920.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 725 KiB

BIN
assets/photos/space-4678686_1920.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 520 KiB

BIN
assets/photos/universe-1622107_1920.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 448 KiB

93
css/styles.css
View File

@ -28,7 +28,7 @@ body {
} }
} }
#textWindow { #landing {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
display: flex; display: flex;
@ -39,7 +39,7 @@ body {
position: relative; position: relative;
} }
#textWindow #background { #landing #background {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -48,7 +48,7 @@ body {
z-index: -2; z-index: -2;
} }
#textWindow #background-transition { #landing #background-transition {
display: none; display: none;
position: absolute; position: absolute;
top: 0; top: 0;
@ -85,7 +85,7 @@ h1 {
#colorSelector { #colorSelector {
display: flex; display: flex;
position: fixed; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
margin: 10px; margin: 10px;
@ -104,6 +104,91 @@ h1 {
font-size: 1.5em; font-size: 1.5em;
} }
#carousel {
height: 910px;
background-color: #0d0d0d;
position: relative;
display: flex;
}
#carousel-container {
display: flex;
width: 100%;
padding: 50px;
}
.carousel-item {
position: relative;
display:block;
height: 800px;
width: 150px;
min-width: 150px;
margin-inline: 12px;
border-radius: 81px;
border: 5px solid black;
overflow: hidden;
transition: width 1s ease;
}
.carousel-item .carousel-id {
position: absolute;
bottom: 0;
left: 0;
transform: translate(10px, 0);
width: 120px;
height: 120px;
background-color: #202020;
border-radius: 70px;
text-align: center;
line-height: 120px;
font-size: 100px;
margin: 0;
margin-bottom: 15px;
color: white;
border: 5px solid black;
text-shadow: black 5px 5px 5px;
}
.carousel-item .carousel-title {
position: absolute;
bottom: 0;
left: 0;
transform: translate(180px, -50px);
color: white;
font-size: 50px;
margin: 0;
text-shadow: black 3px 3px 3px;
}
#carousel-container .active {
width:100%;
}
#carousel-container #carousel-1 {
background-image: url("/assets/photos/space-4678686_1920.jpg");
background-size: cover;
background-position: center;
}
#carousel-container #carousel-2 {
background-image: url("/assets/photos/universe-1622107_1920.jpg");
background-size: cover;
background-position: center;
}
#carousel-container #carousel-3 {
background-image: url("/assets/photos/science-fiction-2907434_1920.jpg");
background-size: cover;
background-position: center;
}
#carousel-container #carousel-4 {
background-image: url("/assets/photos/fantasy-2770468_1920.jpg");
background-size: cover;
background-position: center;
}
/* TABLET STYLES */ /* TABLET STYLES */
@media screen and (min-width: 500px) { @media screen and (min-width: 500px) {

22
index.html
View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<main> <main>
<div id="textWindow"> <div id="landing">
<div id="background"></div> <div id="background"></div>
<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>
@ -17,6 +17,26 @@
<input id="bgColour" type="color" value="#ffffff"> <input id="bgColour" type="color" value="#ffffff">
</div> </div>
</div> </div>
<div id="carousel">
<div id="carousel-container">
<div class="carousel-item" id="carousel-1">
<p class="carousel-id">1</p>
<p class="carousel-title">Night Trees</p>
</div>
<div class="carousel-item" id="carousel-2">
<p class="carousel-id">2</p>
<p class="carousel-title">Rocket Head</p>
</div>
<div class="carousel-item" id="carousel-3">
<p class="carousel-id">3</p>
<p class="carousel-title">Spaceship</p>
</div>
<div class="carousel-item" id="carousel-4">
<p class="carousel-id">4</p>
<p class="carousel-title">Fantasy Archer</p>
</div>
</div>
</div>
</main> </main>
<script src="js/scripts.js"></script> <script src="js/scripts.js"></script>
</body> </body>

36
js/scripts.js
View File

@ -1,5 +1,7 @@
console.log("hello"); console.log("hello");
// COLOUR PICKER BACKGROUND
function changeBackground(R, G, B) { function changeBackground(R, G, B) {
const colours = [ const colours = [
[255, 255, 255], [255, 255, 255],
@ -171,4 +173,36 @@ function transitionLake() {
transitionBackground("assets/photos/hintersee-3601004.jpg", "white"); transitionBackground("assets/photos/hintersee-3601004.jpg", "white");
} }
transitionBackground("assets/photos/fog-8519076-nordseher.jpg", "black") // ACCORDIAN IMAGES
function carouselExpand(i) {
const carousel = document.getElementById(`carousel-container`);
const carouselItems = carousel.getElementsByClassName("carousel-item");
i = i - 1;
if (i < carouselItems.length) {
for (let j = 0; j < carouselItems.length; j++) {
carouselItems[j].className = "carousel-item";
}
carouselItems[i].className = "carousel-item active";
}
}
function initCarousel() {
const carousel = document.getElementById(`carousel-container`);
const carouselItems = carousel.getElementsByClassName("carousel-item");
for (let i = 0; i < carouselItems.length; i++) {
carouselItems[i].addEventListener("mouseover", () => {
carouselExpand(i + 1);
});
}
}
// INITIALIZATION
transitionBackground("assets/photos/fog-8519076-nordseher.jpg", "black")
initCarousel();
carouselExpand(1);