Add parallax effect to background

content/_index.md

@@ -6,4 +6,4 @@ date: 2023-06-27
 
 # Hi, I'm Tyler
 
-I'm a software engineer that does a little bit of everything
+Software engineer, aspiring postmath

content/posts/test-1.md

@@ -0,0 +1,59 @@
+---
+title: "My first post"
+date: 2023-07-15
+banner: "https://s3.clortox.com/static-assets/boat.jpg"
+---
+
+This is my first test post This is my other test post.
+
+{{< figure src="https://s3.clortox.com/static-assets/boat.jpg" alt="Boat"
+caption="My caption" class="figure-left">}}
+
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post

content/posts/test-2.md

@@ -0,0 +1,54 @@
+---
+title: 'My other post'
+date: 2023-07-15
+---
+
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post
+This is my other test post

data/header.json

@@ -15,10 +15,6 @@
         {
             "name": "Utilities",
             "url": "/utilities/"
-        },
-        {
-            "name": "About",
-            "url": "/about/"
         }
     ],
     "RightHandSide": [

static/css/background.css

@@ -1,16 +1,13 @@
-@keyframes animatedBackground {
+.background {
-    from { background-position: 0 0; }
-    to { background-position: 0 100%; }
-}
-@keyframes rotateBackground {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
-}
-
-body {
     background-image: url("/img/webb-dark.png");
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
 
     background-position: center;
-    background-repeat: cover;
+    background-repeat: repeat;
-    background-attachment: fixed;
+    background-attachment: auto;
 }
+
+

static/css/footer.css

@@ -6,10 +6,7 @@ footer {
   padding: 15px;
   text-align: center;
   padding-top: 3vh;
-}
+  z-index: 100;
-
-.footer-fade {
-    background: linear-gradient(rgba(11,11,12,0.2) 0%, rgba(11,11,12,1) 35%);
 }
 
 .footer-sections {
@@ -46,6 +43,7 @@ footer {
 
 .footer-header {
     margin-top: 5px;
+    max-width: 100%;
 
 }
 
@@ -53,3 +51,9 @@ small {
     font-size: 0.8em;
     color: rgba(255,255,255,0.5);
 }
+
+@media only screen and (max-width: 768px) {
+    .footer-sections {
+        grid-template-columns: 1fr;
+    }
+}

static/css/styles.css

@@ -14,6 +14,7 @@ body {
     margin: 0;
     height: 100%;
     padding-bottom: 0px;
+    background-color: rgba(11,11,12,1);
 }
 
 h1, h2, h3, h4 {
@@ -48,11 +49,6 @@ html {
     max-width: 100%;
     height: 100vh;
 
-    display: grid;
-    align-content: center;
-    justify-content: center;
-    justify-items: center;
-    align-items: center;
 }
 
 .top-fade {
@@ -69,8 +65,12 @@ html {
 
 .intro-content {
     text-align: center;
-}
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 
+}
 
 .page-header {
     text-align: center;
@@ -119,8 +119,13 @@ article a {
     padding: 50px;
     height: 30vh;
     padding-bottom: 25px;
-    background: linear-gradient(rgba(11,11,12,1) 0%, rgba(11,11,12,0.9) 50%, rgba(0,0,0,0) 100%);
     overflow: hidden;
+    background: linear-gradient(rgba(11,11,12,1) 0%, rgba(11,11,12,0.9) 50%, rgba(0,0,0,0) 100%);
+}
+
+article a:hover {
+    background: linear-gradient(rgba(11,11,12,1) 0%, rgba(11,11,12,0.9) 50%, rgba(32,42,68,0.5) 100%);
+    transition: 300ms linear;
 }
 
 .post {

themes/clortox/layouts/_default/baseof.html

@@ -2,6 +2,7 @@
 <html>
     {{- partial "head.html" . -}}
     <body>
+        <div class="parallax background"></div>
         {{- partial "header.html" . -}}
         <div id="content">
         {{- block "main" . }}{{- end }}

themes/clortox/layouts/_default/list.html

@@ -5,7 +5,7 @@
 </div>
 {{ range.Pages }}
     <article class="light-dashed-bottom">
-        <a href="{{ .Permalink }}" onmouseover="scrambleLetters(document.querySelector('#{{ .Title | anchorize }}'))">
+        <a href="{{ .Permalink }}">
             {{ if .Params.banner }}
             <div class="post-list-body-container">
             {{ else }}

themes/clortox/layouts/partials/footer.html

@@ -1,4 +1,4 @@
-<footer class="footer-fade">
+<footer>
     <div class="footer-sections">
         <div class="footer-list" style="width: 85%">
             <h4 id="contact" class="footer-header" style="margin-bottom: 5px">Contact</h4>

themes/clortox/layouts/partials/head.html

@@ -4,6 +4,6 @@
     <link rel="stylesheet" href="{{ "css/footer.css" | relURL }}">
 
     <link rel="stylesheet" href="{{ "css/background.css" | relURL }}">
-    <script src="{{ "js/scramble.js" | relURL }}"></script>
+    <script src="{{ "js/script.js" | relURL }}"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>

themes/clortox/static/js/script.js

@@ -4,6 +4,13 @@ window.onload = function() {
     document.querySelectorAll(".scramble").forEach(item => {
         item.addEventListener("mouseover", scramble);
     });
+
+    window.addEventListener('scroll', function() {
+        const parallax = document.querySelector('.parallax')
+        let scrollPosition = window.pageYOffset;
+
+        parallax.style.transform = 'translateY(' + scrollPosition * .5 + 'px)';
+    })
 }
 
 function scramble(event){