lots of new feature

braydenNP · Jun 19, 2024 · 43a63d6 · 43a63d6
1 parent 007ae2b
commit 43a63d6
Show file tree

Hide file tree

Showing 10 changed files with 160 additions and 22 deletions.
diff --git a/images/Image (1).jpeg b/images/Image (1).jpeg
diff --git a/images/china_oip.jpeg b/images/china_oip.jpeg
diff --git a/images/fop.jpeg b/images/fop.jpeg
diff --git a/images/network_diagram.jpeg b/images/network_diagram.jpeg
diff --git a/images/nyc-camp.jpeg b/images/nyc-camp.jpeg
diff --git a/images/overflow_workshop.jpeg b/images/overflow_workshop.jpeg
diff --git a/images/plainblack.jpg b/images/plainblack.jpg
diff --git a/index.html b/index.html
@@ -8,16 +8,75 @@
 </head>
 <body>
     <div id="image-track" data-mouse-down-at="0" data-prev-percentage="0">
-        <img class="image" src="images/china_oip.jpeg" data-info= "This is some cool information on the thing that I did" data-title="China OIP" draggable="false"/>
-        <img class="image" src="images/bytehacks.jpeg" data-info= "This is some cool information on the thing that I did" data-title="Bytehackz" draggable="false"/>
-        <img class="image" src="images/tfscale.jpeg" data-info= "This is some cool information on the thing that I did" data-title="TF Scale" draggable="false"/>
-        <img class="image" src="images/church_camp.jpeg" data-info= "This is some cool information on the thing that I did" data-title="Church Camp" draggable="false"/>
-        <img class="image" src="images/fop_camp.jpeg" data-info= "This is some cool information on the thing that I did" data-title="FOP Camp" draggable="false"/>
-        <img class="image" src="images/network_diagram.jpeg" data-info= "This is some cool information on the thing that I did" data-title="Network Diagram" draggable="false"/>
-        <img class="image" src="images/overflow_workshop.jpeg" data-info= "This is some cool information on the thing that I did" data-title="Overflow Workshop" draggable="false"/>
-        <img class="image" src="images/tcp_program.jpeg" data-info= "This is some cool information on the thing that I did" data-title="TCP Program" draggable="false"/>
+        <div>
+            <img class="image" src="images/plainblack.jpg" data-info= "This is some cool information on the thing that I did" data-title="China OIP" draggable="false"/>
+            <div id="info" class="info" data-index=0>
+                <div id="title" class="title" style="text-align: center;"></div>
+                <div id="date" class="date" style="text-align: center;"></div>
+            </div>
+        </div>
+        <div>
+            <img class="image" src="images/china_oip.jpeg" data-info= "This is some cool information on the thing that I did" data-title="China OIP" draggable="false"/>
+            <div id="info" class="info" data-index=0>
+                <div id="title" class="title" style="text-align: center;">ICT OIP to Shenzhen</div>
+                <div id="date" class="date" style="text-align: center;">September 2023</div>
+            </div>
+        </div>
+        <div>
+            <img class="image" src="images/church_camp.jpeg" data-info= "This is some cool information on the thing that I did" data-title="Church Camp" draggable="false"/>
+            <div id="info" class="info" data-index=4>
+                <div id="title" class="title" style="text-align: center;">Random Picture</div>
+                <div id="date" class="date" style="text-align: center;">December 2023</div>
+            </div>
+        </div>
+        <div>
+            <img class="image" src="images/fop_camp.jpeg" data-info= "This is some cool information on the thing that I did" data-title="FOP Camp" draggable="false"/>
+            <div id="info" class="info" data-index=5>
+                <div id="title" class="title" style="text-align: center;">Empowerment Camp</div>
+                <div id="date" class="date" style="text-align: center;">December 2023</div>
+            </div>
+        </div>
+        <div>
+            <img class="image" src="images/bytehacks.jpeg" data-info= "This is some cool information on the thing that I did" data-title="Bytehackz" draggable="false"/>
+            <div id="info" class="info" data-index=0>
+                <div id="title" class="title" style="text-align: center;">Bytehackz hackathon</div>
+                <div id="date" class="date" style="text-align: center;">January 2024</div>
+            </div>
+        </div>
+        <div>
+            <img class="image" src="images/tfscale.jpeg" data-info= "This is some cool information on the thing that I did" data-title="TF Scale" draggable="false"/>
+            <div id="info" class="info" data-index=3>
+                <div id="title" class="title" style="text-align: center;">TF SCALE '24</div>
+                <div id="date" class="date" style="text-align: center;">February-March 2024</div>
+            </div>
+        </div>
+
+        <div>
+            <img class="image" src="images/Image (1).jpeg" data-info= "Participated in a coding challenge with my friend and won first place" data-title="GIT Coding Challenge" draggable="false"/>
+            <div id="info" class="info" data-index=6>
+                <div id="title" class="title" style="text-align: center;">GiT Coding Challenge</div>
+                <div id="date" class="date" style="text-align: center;">March 2023</div>
+            </div>
+        </div>
+        <div>
+            <img class="image" src="images/fop.jpeg" data-info= "Did OGL for ICT SOCIETY FOP24" data-title="FOP" draggable="false"/>
+            <div id="info" class="info" data-index=7>
+                <div id="title" class="title" style="text-align: center;">FOP '24</div>
+                <div id="date" class="date" style="text-align: center;">April 2024</div>
+            </div>
+        </div>
+        <div>
+            <img class="image" src="images/nyc-camp.jpeg" data-info= "Did OGL for ICT SOCIETY FOP24" data-title="FOP" draggable="false"/>
+            <div id="info" class="info" data-index=7>
+                <div id="title" class="title" style="text-align: center;">NYC CAMP</div>
+                <div id="date" class="date" style="text-align: center;">June 2024</div>
+            </div>
+        </div>
+
+
     </div>
-    <div id="info-box" class="info-box"></div>
+    <div id="info-box" class="info-box" style="text-align: center;"></div>
+    <div id="progress-bar" class="progress-bar"></div>
     <script src="script.js"></script> 
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,6 +1,21 @@
 const track = document.getElementById("image-track");
 const infoBox = document.getElementById("info-box");
-const infoDiv = infoBox.querySelector("#info");
+//const infoDiv = infoBox.querySelector("#info");
+const progressBar = document.getElementById("progress-bar");
+const info = document.getElementById("info");
+
+const img_count = 9;
+
+document.addEventListener('DOMContentLoaded', () => {
+    var i = 0;
+    for (const info of track.getElementsByClassName("info")) {
+        info.dataset.index = i;
+        i++ 
+    }
+    img_count = i+2;
+})
+
+
 window.onmousedown = e => {
     track.dataset.mouseDownAt = e.clientX;  
 }
@@ -20,23 +35,52 @@ window.onmousemove = e => {
     }, {duration: 1200, fill: "forwards"});
 
     for(const image of track.getElementsByClassName("image")) {
+        const rect = image.getBoundingClientRect();
+        const distanceFromLeft = rect.left;
+        const viewportWidth = window.innerWidth;
         image.animate({
-            objectPosition: `${100 + nextPercentage}% center`
+            objectPosition: `${100 * (distanceFromLeft/viewportWidth)}% center`
         }, { duration: 1200, fill: "forwards" });
     }
+
+    for (const info of track.getElementsByClassName("info")) {
+        const index = info.dataset.index;
+        console.log("nextpercentage: " + nextPercentage);
+        if (index * (-100 / img_count) >= nextPercentage && nextPercentage > (index + 1) * (-100 / img_count)) {
+            info.animate({
+                transform: `translate(0%,0%)`
+            }, {duration: 1200, fill: "forwards" });
+            console.log("index true: " + index);
+        }
+        else{
+            info.animate({
+                transform: `translate(0%,60%)`
+            }, {duration: 1200, fill: "forwards" });
+            console.log("index false: " + index);
+        }
+    }
+
+    progressBar.animate({
+        width: `${(nextPercentage*-1)}%`
+    }, {duration: 1200, fill:"forwards"});
 }
 window.onmouseup = () => {
     track.dataset.mouseDownAt = "0";
     track.dataset.prevPercentage = track.dataset.percentage;
 }
 
+
+
+/*
 const images = document.querySelectorAll('.image');
 images.forEach(image => {
     image.addEventListener('mouseover', (e) => {
         infoBox.style.display = 'block';
-        infoBox.innerHTML  = `${e.target.dataset.title}<br />${e.target.dataset.info}`;
-    });
-
+        infoBox.innerHTML  = `<span style="display: block; font-size: 3vmin; font-weight: bold;">${e.target.dataset.title}</span>
+    <span style="display: block; font-size: 1.5vmin; margin-top: 1vmin;">${e.target.dataset.info}</span>`;
+        
+    }); 
+    
     image.addEventListener('mousemove', (e) => {
         infoBox.style.left = `${e.clientX + 10}px`;
         infoBox.style.top = `${e.clientY + 10}px`;
@@ -45,4 +89,4 @@ images.forEach(image => {
     image.addEventListener('mouseout', () => {
         infoBox.style.display = 'none';
     });
-});
+}); */
diff --git a/styles.css b/styles.css
@@ -7,20 +7,25 @@ body {
     margin: 0rem;
     overflow: hidden;
 } 
-#image-track > .image {
-    width: 55vmin;
+#image-track > div {
+    height: 60vmin;
+}
+#image-track > div > .image {
+    width: 40vmin;
     height: 56vmin;
     object-fit: cover;
-    object-position: center;
+    object-position: center center;
     user-select: none;
+    transform: translateX(-50%);
+    transition: width 0.4s ease-in-out;
 
 }
+
 #image-track {
     display: flex;
     gap: 4vmin;
     position: absolute;
-    left: 50%;
-    top: 50%; transform: translate(0%, -50%);
+    left: 50%; top: 50%; transform: translate(0%, -50%);
 }
 .info-box {
     position: absolute;
@@ -34,6 +39,36 @@ body {
     font-size: 100px;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-weight: bold;
-    height: 30vmin;
-    width: 14vmin; 
+    height: 14vmin;
+    width: 18vmin; 
+}
+.progress-bar{
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    background-color: white;
+    padding: 10px;
+    z-index: 10;
+    height: 0.5vmin;
+    width: 0px; 
+}
+.title{
+    left: 50%;
+    color: white;
+    font-size: 100px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-weight: bold;
+    height: 14vmin;
+    width: 40vmin; 
+    transform: translate(-50%,50%);
+}
+.date{
+    left: 50%;
+    color: white;
+    font-size: 50px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-weight: bold;
+    height: 14vmin;
+    width: 40vmin; 
+    transform: translate(-50%, 0);
 }