tyler/tylerperkins.xyz
1
0
Fork 0
mirror of https://github.com/Clortox/tylerperkins.xyz.git synced 2026-03-07 10:37:58 +00:00
Code Issues Actions Packages Projects Releases Wiki 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
Download Patch File Download Diff File Expand all files Collapse all files

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