Infrastructure/tylerperkins.xyz
2
1
Fork 0
Code Issues Pull Requests Packages Activity

Add parallax effect to background

Browse Source
This commit is contained in:
Tyler Perkins 2023-07-17 23:17:11 -04:00
parent 21d70b4a8a
commit b2f80c3a92
12 changed files with 155 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
content/_index.md
View File

@ -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

59
content/posts/test-1.md Normal file
View File

@ -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

54
content/posts/test-2.md Normal file
View File

@ -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

4
data/header.json
View File

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

21
static/css/background.css
View File

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

12
static/css/footer.css
View File

@ -6,10 +6,7 @@ footer {
padding: 15px;
text-align: center;
padding-top: 3vh;
}
.footer-fade {
background: linear-gradient(rgba(11,11,12,0.2) 0%, rgba(11,11,12,1) 35%);
z-index: 100;
}
.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;
}
}

19
static/css/styles.css
View File

@ -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 {

1
themes/clortox/layouts/_default/baseof.html
View File

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

2
themes/clortox/layouts/_default/list.html
View File

@ -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 }}

2
themes/clortox/layouts/partials/footer.html
View File

@ -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>

2
themes/clortox/layouts/partials/head.html
View File

@ -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>

7
themes/clortox/static/js/scramble.js → themes/clortox/static/js/script.js
View File

@ -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){