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

Binary file not shown.

After

Width:  |  Height:  |  Size: 393 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 725 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 520 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 448 KiB

View File

@ -28,7 +28,7 @@ body {
}
}
#textWindow {
#landing {
width: 100vw;
height: 100vh;
display: flex;
@ -39,7 +39,7 @@ body {
position: relative;
}
#textWindow #background {
#landing #background {
position: absolute;
top: 0;
left: 0;
@ -48,7 +48,7 @@ body {
z-index: -2;
}
#textWindow #background-transition {
#landing #background-transition {
display: none;
position: absolute;
top: 0;
@ -85,7 +85,7 @@ h1 {
#colorSelector {
display: flex;
position: fixed;
position: absolute;
top: 0;
right: 0;
margin: 10px;
@ -104,6 +104,91 @@ h1 {
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 */
@media screen and (min-width: 500px) {

View File

@ -8,7 +8,7 @@
</head>
<body>
<main>
<div id="textWindow">
<div id="landing">
<div id="background"></div>
<div id="background-transition"></div>
<h1 id="titleBanner" class="black">Tom Cornes</h1>
@ -17,6 +17,26 @@
<input id="bgColour" type="color" value="#ffffff">
</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>
<script src="js/scripts.js"></script>
</body>

View File

@ -1,5 +1,7 @@
console.log("hello");
// COLOUR PICKER BACKGROUND
function changeBackground(R, G, B) {
const colours = [
[255, 255, 255],
@ -171,4 +173,36 @@ function transitionLake() {
transitionBackground("assets/photos/hintersee-3601004.jpg", "white");
}
// 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);