Added parallax background effect

Notebook.md

@@ -408,6 +408,7 @@ For the projects section I want to highlight two personal projects, maybe includ
 To accomplish stacking the different projet sections I am going to introduce some grid organization into the projects section. Withe simple CSS we can achieve a nice staked layout within our projects section.
 
 **CSS**
+
 ```
 .grid-container {
   display: grid;
@@ -427,7 +428,9 @@ To accomplish stacking the different projet sections I am going to introduce som
   align-items: center;
 }
 ```
+
 **HTML**
+
 ```
     <section id="projects" class="projects-section">
       <div class="project-box">
@@ -524,8 +527,7 @@ In this section I want to showcase a really cool program I built that generates
 
 To showcase this I would like to create a user form that allows the user to input the parameters and the hit a button that says "generate". As the program runs it will give some indication as to what it is doing and play each waveform. It will then prompt the user if they woudl like to save the generated wav file.
 
-*This is actually going to be quite difficult I think... To be continued...*
-
+_This is actually going to be quite difficult I think... To be continued..._
 
 ---
 
@@ -576,7 +578,6 @@ To make each card a link I can add an `<a>` tag element,
 
 and add the following CSS to create a nice effect when hovering above each card.
 
-
 ```
 .work-card-link {
   text-decoration: none;
@@ -700,8 +701,12 @@ Although this would be really cool I've decided it is outside the scope of this
 
 **12/08/2024**
 
-Another fun idea I had that is defintely within the scope is to create a parallaxing background. I think this will give a really cool user experience and highlight my love of game development.
+Another fun idea I had that is defintely within the scope is to create a parallax background. I think this will give a really cool user experience and highlight my love of art and game development.
 
-As the user scrolls to the bottom of the page there will be layered background elements that move at different speeds giving the effect that the view is descending into a pixel at view of the background. The parallaxing will give a depth and movement effect that will be fun for the user experience.
+As the user scrolls to the bottom of the page there will be layered background elements that move at different speeds giving the effect that the view is descending into a pixel art view of the background. The parallaxing will give a depth and movement effect that will be fun for the user experience.
 
 We have already done some of the work for this with our dynamic scrolling.
+
+**The plan**
+
+We are going to create additional _background_ layers that will be layered on top of the actual background. We will update our JavaScript scroll event listener to control the scroll speed of each of these layers. Finally we will use CSS to ensure the layers are styled correctly to get our parallax effect.

site.html

@@ -24,6 +24,7 @@
           <a href="#projects" class="nav-link">Projects</a>
           <a href="#work" class="nav-link">Work</a>
           <a href="#contact" class="nav-link">Contact</a>
+          <a href="#credits" class="nav-link">Credits</a>
         </div>
       </nav>
     </header>
@@ -234,6 +235,13 @@
       </section>
 
       <section class="page-bottom-section"></section>
+      <section id="credits" class="credits-section">
+        <div class="credits-box">
+          <div class="title-text">
+            <p>I made this website! Copyright Jesse M. Ellis 2024 &#128522</p>
+          </div>
+        </div>
+      </section>
     </div>
   </body>
 </html>

site.js

@@ -14,22 +14,51 @@ document.addEventListener("DOMContentLoaded", () => {
     const navBar = document.querySelector(".navbar");
     const titleBox = document.querySelector(".title-box");
     const aboutSection = document.querySelector("#about");
+    const contactSection = document.querySelector("#contact");
     const scrollY = window.scrollY;
-    const aboutTop = aboutSection.getBoundingClientRect().top + window.scrollY;
+    const aboutTop = aboutSection.getBoundingClientRect().top + scrollY;
+    const contactTop = contactSection.getBoundingClientRect().top + scrollY;
     const slowScrollRate = 0.5;
 
-    // move title-box if it's above the viewport and not yet touching about-section
+    // Get viewport height for parallax background offsets
+    const viewportHeight = window.innerHeight;
+
+    // Move title-box if it's above the viewport and not yet touching about-section
     if (scrollY < aboutTop) {
-      const opacity = scrollY / aboutTop;
-      // adjust opacity of navbar
-      navBar.style.opacity = Math.min(0.7 + opacity, 1);
-      // Adjust position and opacity of title box
+      const opacity1 = scrollY / aboutTop;
       titleBox.style.transform = `translateY(${scrollY * slowScrollRate}px)`;
-      titleBox.style.opacity = Math.max(1 - opacity, 0);
+      titleBox.style.opacity = Math.max(1 - opacity1, 0);
     } else {
       titleBox.style.transform = "translateY(0)";
       titleBox.style.opacity = 0;
     }
+
+    // Adjust navbar opacity when below the contact section
+    const contactBottom = contactTop + contactSection.offsetHeight;
+    if (scrollY > contactBottom) {
+      // Calculate opacity based on how far below the contact section we are
+      const fadeDistance = 100;
+      const distanceBelow = scrollY - contactBottom;
+      const opacity2 = Math.max(1 - distanceBelow / fadeDistance, 0);
+      navBar.style.opacity = opacity2;
+    } else {
+      navBar.style.opacity = 1;
+    }
+
+    // Parallax background scroll rates
+    const body = document.body;
+    const bridgeScrollRate = 0.4;
+    const treesScrollRate = 0.5;
+    const castleScrollRate = 0.7;
+    const cloudsScrollRate = 0.9;
+
+    body.style.backgroundPosition = `
+      left ${scrollY * bridgeScrollRate + viewportHeight * 3.05}px, 
+      left ${scrollY * treesScrollRate + viewportHeight * 2.55}px,
+      left ${scrollY * castleScrollRate + viewportHeight * 1.5}px,
+      left ${scrollY * cloudsScrollRate + viewportHeight * 0.4}px, 
+      left 0px
+    `;
   });
 
   // Function to load text from a file into an html component

style.css

@@ -1,10 +1,13 @@
 body {
   margin: 0;
   font-family: Arial, sans-serif;
-  background-image: url("../images/Clouds.png");
-  background-size: cover;
-  background-position: left;
-  background-attachment: fixed;
+  background-image: url("../images/Bridge.png"), url("../images/Trees.png"),
+    url("../images/Castle.png"), url("../images/Clouds.png"),
+    url("../images/Moon.png");
+  background-size: auto, auto, auto, auto, cover;
+  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
+  background-attachment: scroll, scroll, scroll, scroll, fixed;
+  background-position: left 300vh, left 300vh, left 300vh, left 350vh, left top;
   min-width: 768px;
 }
 
@@ -66,8 +69,7 @@ body {
   margin-top: 2rem;
 }
 
-.title-section,
-.page-bottom-section {
+.title-section {
   position: relative;
   height: 70vh;
   display: flex;
@@ -77,6 +79,26 @@ body {
   align-items: center;
 }
 
+.page-bottom-section {
+  height: 90vh;
+  margin-top: 3rem;
+}
+
+.credits-section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.credits-box {
+  display: flex;
+  background: rgba(0, 0, 0, 1);
+  border-radius: 100px;
+  width: 400px;
+  padding: 10px;
+  margin-bottom: 2rem;
+}
+
 .title-box {
   display: flex;
   align-items: center;
@@ -149,7 +171,7 @@ body {
   display: flex;
   margin-top: 10rem;
   gap: 2rem;
-  background: rgba(0, 0, 0, 0.9);
+  background: rgba(0, 0, 0, 0.8);
   border-radius: 20px;
   padding: 2rem;
   width: 95%;
@@ -194,7 +216,7 @@ body {
   display: none;
   height: 400px;
   width: 95%;
-  margin: 10PX;
+  margin: 10px;
   justify-content: center;
   align-items: center;
 }
@@ -248,13 +270,11 @@ button:hover {
 
 /* Projects Box */
 
-
-
 .project-box {
   display: flex;
   margin-top: 10rem;
   gap: 2rem;
-  background: rgba(0, 0, 0, 0.9);
+  background: rgba(0, 0, 0, 0.8);
   border-radius: 20px;
   padding: 2rem;
   width: 95%;
@@ -421,11 +441,12 @@ button:hover {
   font-weight: bold;
 }
 
-.contact-form input, .contact-form textarea {
+.contact-form input,
+.contact-form textarea {
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
-  font-family: 'Courier New', Courier, monospace;
+  font-family: "Courier New", Courier, monospace;
 }
 
 .form-buttons {
@@ -451,7 +472,6 @@ button[type="reset"] {
   color: white;
 }
 
-
 /* Media Queries */
 
 @media (min-width: 1440px) {