From 856481f20255ad5cebf524dd8d280565863ce19f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C3=A9=C5=A5a=20Tom=C3=A1nek?= Date: Wed, 1 Nov 2023 10:06:48 +0100 Subject: [PATCH] Add parallax effect to the header (#21) # Short description Work in progress of having Parallax effect on the website as requested in #17. Closes #17. # Changes feat: use magic scrolling fix: fix missing github icon feat(static): add more layers feat: add background layers in idraw # Static visuals ## Macbook ![trim 692BC851-7156-4777-94AA-505ECA9C0CE4](https://github.com/DigitalExtinction/Website/assets/5700145/1ea24c44-b53b-465e-83d9-4903fe6ad967) ## iPhone ![trim 3AAE231D-54F9-4D94-B641-85030E565D10](https://github.com/DigitalExtinction/Website/assets/5700145/166ed9bd-3a02-4c12-bb62-1788c818b821) --- .gitattributes | 1 + sass/github.scss | 10 +++++++ sass/styles.scss | 61 ++++++++++++++++++++++++++++++++++---- static/header_1.svg | 3 ++ static/header_3.svg | 3 ++ static/header_4.svg | 3 ++ static/header_5.svg | 3 ++ static/header_6.svg | 3 ++ static/header_7.svg | 3 ++ static/header_wide.idraw | 3 ++ static/header_wide_0.svg | 3 ++ templates/base.html | 64 +++++++++++++++++++++++++++++++++++++--- 12 files changed, 151 insertions(+), 9 deletions(-) create mode 100644 static/header_1.svg create mode 100644 static/header_3.svg create mode 100644 static/header_4.svg create mode 100644 static/header_5.svg create mode 100644 static/header_6.svg create mode 100644 static/header_7.svg create mode 100644 static/header_wide.idraw create mode 100644 static/header_wide_0.svg diff --git a/.gitattributes b/.gitattributes index 0e6ea35..de48d9a 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1,2 +1,3 @@ static/*.svg filter=lfs diff=lfs merge=lfs -text static/*.ttf filter=lfs diff=lfs merge=lfs -text +static/*.idraw filter=lfs diff=lfs merge=lfs -text diff --git a/sass/github.scss b/sass/github.scss index 332ca00..16f6001 100755 --- a/sass/github.scss +++ b/sass/github.scss @@ -1,3 +1,13 @@ +#github { + z-index: 2; + fill: #151513; + color: #fff; + position: absolute; + top: 0; + border: 0; + right: 0; +} + .github-corner:hover .octo-arm { animation: octocat-wave 560ms ease-in-out } diff --git a/sass/styles.scss b/sass/styles.scss index 239e73a..993cd31 100644 --- a/sass/styles.scss +++ b/sass/styles.scss @@ -23,15 +23,63 @@ body { padding-bottom: 30px; } -div#header { - background: url("header_wide.svg") center repeat-x; - background-size: contain; - background-size: auto 100%; - height: 600px; +div#wrapper, div.bg { + height: 700px; +} + +div#wrapper { + overflow-y: hidden; + overflow-x: hidden; + perspective: 1px; +} + +div.bg { + background-position-x: center; + background-position-y: top; + background-repeat: repeat-x; + background-size: cover; + position: absolute; + top: 0; width: 100%; + object-fit: cover; + z-index: -1; +} + +div#background { + background-image: url("header_1.svg"); +} + +div#midground5 { + background-image: url("header_7.svg"); +} + +div#midground4 { + background-image: url("header_6.svg"); +} + +div#midground3 { + background-image: url("header_5.svg"); +} + +div#midground2 { + background-image: url("header_4.svg"); +} + +div#midground { + background-image: url("header_3.svg"); +} + +div#foreground { + background-image: url("header_wide_0.svg"); +} + +div#title { + z-index: 2; } div.middle { + z-index: 1; + position: relative; margin: 0 auto; width: 45%; min-width: 780px; @@ -130,6 +178,9 @@ div.middle { } @media only screen and (max-width: 800px) { + div#wrapper, div.bg { + height: 600px; + } div.middle { width: 80%; min-width: 350px; diff --git a/static/header_1.svg b/static/header_1.svg new file mode 100644 index 0000000..8b9454b --- /dev/null +++ b/static/header_1.svg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5870d1a2cc2c2887aa97b6f6d54a722cdc049b745f7aa57a88c4e420986bd738 +size 886 diff --git a/static/header_3.svg b/static/header_3.svg new file mode 100644 index 0000000..182a197 --- /dev/null +++ b/static/header_3.svg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b6ab54542b9614ecee0577c67ce239f5114bbbe1cadb2c1e55a2150a56aa1433 +size 31398 diff --git a/static/header_4.svg b/static/header_4.svg new file mode 100644 index 0000000..39ea036 --- /dev/null +++ b/static/header_4.svg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:27e4317f9d983700e4ea9fdea2a70f079d64a608e7bea3c549641fcd4b8fadf6 +size 15173 diff --git a/static/header_5.svg b/static/header_5.svg new file mode 100644 index 0000000..9c15c77 --- /dev/null +++ b/static/header_5.svg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:fb6cfeba449fb2296f84e402449cec66332fd1fd0b0d0a8bf31874a032206cfa +size 9067 diff --git a/static/header_6.svg b/static/header_6.svg new file mode 100644 index 0000000..981c079 --- /dev/null +++ b/static/header_6.svg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:334d6c97f882f0e8bb2168a431c18c147e151a94603e33468c451da0dae83ae6 +size 39650 diff --git a/static/header_7.svg b/static/header_7.svg new file mode 100644 index 0000000..4693830 --- /dev/null +++ b/static/header_7.svg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9e06fc4c7c079f8e3188fcae57e0c0f762dbded19a42d152783da882a1874f6f +size 5492 diff --git a/static/header_wide.idraw b/static/header_wide.idraw new file mode 100644 index 0000000..0213bee --- /dev/null +++ b/static/header_wide.idraw @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ebebc2cd08253a193cec05f6a9d491e2a5dceffc915c28875097affa923da690 +size 112307 diff --git a/static/header_wide_0.svg b/static/header_wide_0.svg new file mode 100644 index 0000000..31a1ea2 --- /dev/null +++ b/static/header_wide_0.svg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:56c437e1b99185a870b4ea071779e67740cd58bfa8ee9010ae7ca4e685e34cc5 +size 4991 diff --git a/templates/base.html b/templates/base.html index 9f9f460..a32c9d0 100755 --- a/templates/base.html +++ b/templates/base.html @@ -33,14 +33,70 @@ - -