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, scroll,
fixed; fixed;
background-size: background-size:
cover, auto,
cover, cover,
100% 100%, 100% 100%,
cover; cover;
background-repeat: no-repeat; background-repeat:
background-position: center; 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; color: $color-text;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -60,6 +68,21 @@ body {
radial-gradient(transparent, transparent, rgba(0, 0, 0, 0.5)); 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) { @media (min-width: $small) {
background-image: background-image:
url('layout/bg_pixels.gif'), url('layout/bg_pixels.gif'),

3
layouts/_default/baseof.html
View File

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