testing animation through .png files

UND-ARC · Mar 26, 2024 · 1eb8c01 · 1eb8c01
1 parent a1fd3ad
commit 1eb8c01
Show file tree

Hide file tree

Showing 24 changed files with 359 additions and 49 deletions.
diff --git a/0000.png b/0000.png
diff --git a/0001.png b/0001.png
diff --git a/0002.png b/0002.png
diff --git a/0003.png b/0003.png
diff --git a/0004.png b/0004.png
diff --git a/0005.png b/0005.png
diff --git a/0006.png b/0006.png
diff --git a/0007.png b/0007.png
diff --git a/0008.png b/0008.png
diff --git a/0009.png b/0009.png
diff --git a/0010.png b/0010.png
diff --git a/0011.png b/0011.png
diff --git a/0012.png b/0012.png
diff --git a/0013.png b/0013.png
diff --git a/0014.png b/0014.png
diff --git a/0015.png b/0015.png
diff --git a/0016.png b/0016.png
diff --git a/0017.png b/0017.png
diff --git a/0018.png b/0018.png
diff --git a/0019.png b/0019.png
diff --git a/0020.png b/0020.png
diff --git a/index.html b/index.html
@@ -1,28 +1,164 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Transparent Header Website</title>
-    <link rel="stylesheet" type="text/css" href="style.css">
-
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CAD Design Showcase</title>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      overflow-x: hidden;
+      font-family: Arial, sans-serif;
+      position: relative; /* Ensure proper positioning of elements */
+    }
+    nav {
+      background-color: #333;
+      color: #fff;
+      padding: 10px 20px;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      z-index: 1000;
+    }
+    nav a {
+      color: #fff;
+      text-decoration: none;
+      margin-right: 20px;
+    }
+    nav a:hover {
+      color: #ccc;
+    }
+    .background-container {
+      position: relative; /* Ensure overlay text positioning */
+      width: 100%;
+      height: 100vh; /* Adjust as needed */
+      background-size: cover;
+      background-position: center;
+      z-index: -1; /* Ensure background is behind other content */
+    }
+    .overlay-text {
+      position: absolute;
+      top: 20%;
+      right: 5%;
+      width: 200px;
+      background-color: rgba(0, 0, 0, 0.5);
+      color: #fff;
+      padding: 10px;
+      border-radius: 5px;
+    }
+    .footer {
+      background-color: #333;
+      color: #fff;
+      padding: 10px;
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      text-align: center;
+    }
+    .content {
+      padding: 20px;
+      margin-top: 100vh; /* Ensure content starts below the full viewport height */
+      background-color: rgba(255, 255, 255, 0.8);
+    }
+  </style>
 </head>
 <body>
+  <nav>
+    <a href="#home">Home</a>
+    <a href="#about">About</a>
+    <a href="#contact">Contact</a>
+    <!-- Add more links as needed -->
+  </nav>
+  <div class="background-container" id="background-container"></div>
+  <div class="overlay-text" id="overlay-text-1">
+    <p>This is overlay text 1.</p>
+  </div>
+  <div class="overlay-text" id="overlay-text-2">
+    <p>This is overlay text 2.</p>
+  </div>
+  <!-- Add more overlay text containers as needed -->
+  <div class="footer">
+    <p>This is the footer.</p>
+  </div>
+
+  <script>
+    const backgroundContainer = document.getElementById('background-container');
+    const overlayText1 = document.getElementById('overlay-text-1');
+    const overlayText2 = document.getElementById('overlay-text-2');
+    // Add more overlay text elements as needed
+
+    let currentImageIndex = 1; // Initial image index
+    const maxImages = 20; // Assuming there are 20 images
+
+    // Function to preload images
+    function preloadImages() {
+      for (let i = 1; i <= maxImages; i++) {
+        const imageUrl = `0000${i}`.slice(-4) + '.png'; // Format index with leading zeros
+        const img = new Image();
+        img.src = imageUrl;
+      }
+    }
+
+    // Function to update background image
+    function updateBackgroundImage() {
+      const imageUrl = `0000${currentImageIndex}`.slice(-4) + '.png'; // Format index with leading zeros
+      backgroundContainer.style.backgroundImage = `url('${imageUrl}')`;
+    }
+
+    // Function to update overlay text visibility
+    function updateOverlayText() {
+      // Hide all overlay text elements
+      const overlayTextElements = document.querySelectorAll('.overlay-text');
+      overlayTextElements.forEach(textElement => {
+        textElement.style.display = 'none';
+      });
+
+      // Show overlay text for specific images
+      if (currentImageIndex === 1) {
+        overlayText1.style.display = 'block';
+      } else if (currentImageIndex === 2) {
+        overlayText2.style.display = 'block';
+      }
+      // Add more conditions to show overlay text for other images
+    }
+
+    // Function to handle mouse scroll event
+    function handleScroll(event) {
+      // Detect scroll direction
+      const delta = Math.sign(event.deltaY); // -1 for scroll up, 1 for scroll down
+
+      // Update current image index based on scroll direction
+      currentImageIndex += delta;
+
+      // Ensure currentImageIndex stays within the range of available images
+      if (currentImageIndex < 1) {
+        currentImageIndex = 1;
+      } else if (currentImageIndex > maxImages) {
+        currentImageIndex = maxImages;
+      }
+
+      // Update background image
+      updateBackgroundImage();
+
+      // Update overlay text visibility
+      updateOverlayText();
+
+      // Prevent default scroll behavior to stop the page from scrolling
+      event.preventDefault();
+    }
+
+    // Add scroll event listener to the document
+    document.addEventListener('wheel', handleScroll, { passive: false });
 
-<header>
-    <nav>
-        <a href="#">Home</a>
-        <a href="#">About</a>
-        <a href="#">Services</a>
-        <a href="#">Contact</a>
-    </nav>
-</header>
-
-<div class="container">
-    <h1>Welcome to Our Website</h1>
-    <p>This is a sample homepage with a transparent header.</p>
-    <img src="https://via.placeholder.com/800x400" alt="Sample Image">
-</div>
+    // Preload images when the page loads
+    window.addEventListener('load', preloadImages);
 
+    // Initially set the background image and overlay text
+    updateBackgroundImage();
+    updateOverlayText();
+  </script>
 </body>
 </html>
diff --git a/style.css b/style.css
@@ -1,30 +1,52 @@
-        body {
-            margin: 0;
-            font-family: Arial, sans-serif;
-        }
-        header {
-            background-color: rgba(0, 0, 0, 0.5); /* Transparent black background */
-            color: white;
-            padding: 20px;
-            text-align: center;
-        }
-        nav {
-            display: inline-block;
-        }
-        nav a {
-            color: white;
-            text-decoration: none;
-            margin: 0 10px;
-        }
-        nav a:hover {
-            text-decoration: underline;
-        }
-        .container {
-            padding: 20px;
-            text-align: center;
-        }
-        .container img {
-            width: 100%;
-            max-width: 800px;
-            height: auto;
-        }
+
+    body {
+      margin: 0;
+      padding: 0;
+      overflow-x: hidden;
+      font-family: Arial, sans-serif;
+    }
+    nav {
+      background-color: #333;
+      color: #fff;
+      padding: 10px 20px;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      z-index: 1000;
+    }
+    nav a {
+      color: #fff;
+      text-decoration: none;
+      margin-right: 20px;
+    }
+    nav a:hover {
+      color: #ccc;
+    }
+    .background-container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-size: cover;
+      background-position: center;
+      z-index: -1; /* Ensure background is behind other content */
+    }
+    .overlay-text {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: rgba(0, 0, 0, 0.5);
+      color: #fff;
+      padding: 10px;
+      border-radius: 5px;
+      display: none; /* Initially hidden */
+    }
+    .content {
+      padding: 20px;
+      margin-top: 100vh; /* Ensure content starts below the full viewport height */
+      background-color: rgba(255, 255, 255, 0.8);
+    }
+