Working desktop carousel
This commit is contained in:
Notoric
parent
9fa58ed4f9
commit
dc521d03c5
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 |
|
|
@ -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) {
|
||||
|
|
|
|||
22
index.html
22
index.html
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
|
||||
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);
|
||||
Loading…
Reference in New Issue