summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMatthew Kosarek <mattkae@protonmail.com>2021-10-05 07:23:29 -0400
committerMatthew Kosarek <mattkae@protonmail.com>2021-10-05 07:23:29 -0400
commitb1388b40b138e4440cda121b8044b26ae35759ef (patch)
tree121b9ab7d80256f69a7389e8199edae181081282
parent2fff4c30c18a1b89c3240222cd915e7607563896 (diff)
Minified images and added better scroll code to the canvas
-rw-r--r--images/dog_and_me-min.jpgbin0 -> 719525 bytes
-rw-r--r--images/friends-min.jpgbin0 -> 1078187 bytes
-rw-r--r--images/portrait-min.jpgbin0 -> 897904 bytes
-rw-r--r--index.css3
-rw-r--r--index.html6
-rw-r--r--index.js5
6 files changed, 6 insertions, 8 deletions
diff --git a/images/dog_and_me-min.jpg b/images/dog_and_me-min.jpg
new file mode 100644
index 0000000..984996c
--- /dev/null
+++ b/images/dog_and_me-min.jpg
Binary files differ
diff --git a/images/friends-min.jpg b/images/friends-min.jpg
new file mode 100644
index 0000000..2f39ff6
--- /dev/null
+++ b/images/friends-min.jpg
Binary files differ
diff --git a/images/portrait-min.jpg b/images/portrait-min.jpg
new file mode 100644
index 0000000..391267f
--- /dev/null
+++ b/images/portrait-min.jpg
Binary files differ
diff --git a/index.css b/index.css
index 32bd838..69187fe 100644
--- a/index.css
+++ b/index.css
@@ -72,9 +72,7 @@ header > nav > ul a:hover {
/* Carousel styling */
#carousel {
width: 100%;
- height: 360px;
position: relative;
- overflow: hidden;
}
#carousel > button {
@@ -100,7 +98,6 @@ header > nav > ul a:hover {
}
#image_container {
- position: absolute;
width: 100%;
display: flex;
flex-direction: row;
diff --git a/index.html b/index.html
index cb90b2d..a85ca65 100644
--- a/index.html
+++ b/index.html
@@ -28,19 +28,19 @@
<div id='carousel'>
<div id='image_container'>
<figure class='carousel_image'>
- <img src='images/portrait.jpg' />
+ <img src='images/portrait-min.jpg' />
<figcaption>
Me in front of my desktop, circa August 2021.
</figcaption>
</figure>
<figure class='carousel_image'>
- <img src='images/dog_and_me.jpg' />
+ <img src='images/dog_and_me-min.jpg' />
<figcaption>
Hanging with my dog named Rizzy, circa May 2020.
</figcaption>
</figure>
<figure class='carousel_image'>
- <img src='images/friends.jpg' />
+ <img src='images/friends-min.jpg' />
<figcaption>
Hanging with my friends, circa July 2019.
</figcaption>
diff --git a/index.js b/index.js
index 4d29466..3397c30 100644
--- a/index.js
+++ b/index.js
@@ -36,7 +36,9 @@ function runCarousel() {
}
function updateCarousel() {
- var children = imageContainer.children;
+ var children = imageContainer.children,
+ selectedChildPosition = -imageContainer.children[carouselPosition].offsetLeft + 240;
+ imageContainer.style.transform = 'translate(' + selectedChildPosition + 'px, 0)';
for (var i = 0; i < children.length; i++) {
var image = children[i];
if (i !== carouselPosition) {
@@ -52,7 +54,6 @@ function runCarousel() {
}
}
- imageContainer.style.left = 'calc(' + (-carouselPosition * 252) + 'px + 50% - 120px)';
rightButton.style.visibility = (carouselPosition === numImages - 1) ? 'hidden' : 'visible';
leftButton.style.visibility = (carouselPosition === 0) ? 'hidden' : 'visible';
}