franconian
/
www.franconian.net
13
0
Fork 0
Code Pull Requests Releases Activity

implement parallax effect for dots
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Florian Sorg 2021-12-23 22:59:19 +01:00
parent e35730d75c
commit 260560e753
4 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
assets/style.scss
View File

@ -33,12 +33,20 @@ body {
scroll,
fixed;
background-size:
cover,
auto,
cover,
100% 100%,
cover;
background-repeat: no-repeat;
background-position: center;
background-repeat:
repeat-y,
no-repeat,
no-repeat,
no-repeat;
background-position:
50% calc(50% + 1px * 0.5 * var(--scrollTop)),
50% 50%,
50% 50%,
50% 50%;
color: $color-text;
display: flex;
flex-direction: column;
@ -60,6 +68,21 @@ body {
radial-gradient(transparent, transparent, rgba(0, 0, 0, 0.5));
}
&::before {
content: '';
display: block;
position: fixed;
opacity: 0.3;
top: 0;
left: 0;
height: 100%;
width: 100%;
pointer-events: none;
background-image: url('layout/fg_pixels.gif');
background-repeat: repeat-y;
background-position: 50% calc(50% + -1.4px * var(--scrollTop));
}
@media (min-width: $small) {
background-image:
url('layout/bg_pixels.gif'),

3
layouts/_default/baseof.html
View File

@ -1,6 +1,6 @@
{{ $currentPage := . }}
<!DOCTYPE html>
<html lang="{{ .Site.Language.Lang }}">
<html lang="{{ .Site.Language.Lang }}" style="--scrollTop: 0;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
@ -10,6 +10,7 @@
<link rel="icon" href="/franconianNet.svg" sizes="any" type="image/svg+xml">
{{ $style := resources.Get "style.scss" | resources.ToCSS (dict "outputStyle" "compressed") }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
<script src="/layout/scroll.js"></script>
</head>
<body>
<header>

BIN
static/layout/fg_pixels.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 765 KiB

1
static/layout/scroll.js Normal file
View File

@ -0,0 +1 @@
window.addEventListener('scroll', e => document.documentElement.style.setProperty('--scrollTop', window.scrollY));