From 84eede76f54cf91da133333ddc6c685c0789aa93 Mon Sep 17 00:00:00 2001 From: j Date: Thu, 21 Oct 2021 17:10:13 +0100 Subject: [PATCH] animated title --- app/static/css/partials/_menu.scss | 6 +----- app/static/css/partials/_titleanimation.scss | 21 ++++++++++++++++++++ app/static/css/style.scss | 1 + app/static/js/animation.js | 12 +++++++++++ app/templates/base.html | 13 ++++++------ 5 files changed, 42 insertions(+), 11 deletions(-) create mode 100644 app/static/css/partials/_titleanimation.scss create mode 100644 app/static/js/animation.js diff --git a/app/static/css/partials/_menu.scss b/app/static/css/partials/_menu.scss index c0225c0..c951df4 100755 --- a/app/static/css/partials/_menu.scss +++ b/app/static/css/partials/_menu.scss @@ -33,10 +33,6 @@ font-size: 17px; margin-left: var(--spacing); - &:hover { - background-color: #ddd; - color: black; - } @media screen and (max-width: 799px) { &.title { display: block; @@ -57,4 +53,4 @@ font-weight: 700; padding-bottom: calc(var(--spacing) / 2); } -} \ No newline at end of file +} diff --git a/app/static/css/partials/_titleanimation.scss b/app/static/css/partials/_titleanimation.scss new file mode 100644 index 0000000..5fa2b01 --- /dev/null +++ b/app/static/css/partials/_titleanimation.scss @@ -0,0 +1,21 @@ + +@keyframes animated_title_animation { + 0%,100% { + background-position: 0 0; + } + + 50% { + background-position: 100% 0; + } +} + +.animated-title { + .text { + //background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff); + background: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4)); + background-clip: text; + color: transparent; + animation: animated_title_animation 60s ease-in-out infinite; + background-size: 400% 100%; + } +} diff --git a/app/static/css/style.scss b/app/static/css/style.scss index fc32fae..92d913e 100644 --- a/app/static/css/style.scss +++ b/app/static/css/style.scss @@ -1,5 +1,6 @@ @import "partials/reset"; @import "partials/layout"; +@import "partials/titleanimation"; @import "partials/menu"; @import "partials/film"; @import "partials/text"; diff --git a/app/static/js/animation.js b/app/static/js/animation.js new file mode 100644 index 0000000..6c85c89 --- /dev/null +++ b/app/static/js/animation.js @@ -0,0 +1,12 @@ +document.querySelectorAll('body.animated').forEach(element => { + var animationDuration = 60; + var randomDuration = Math.random() * animationDuration; + element.style.animationDelay = -randomDuration + 's'; +}) +document.querySelectorAll('.animated-title').forEach(element => { + var animationDuration = 60; + var randomDuration = Math.random() * animationDuration; + element.querySelectorAll('.text').forEach(text => { + text.style.animationDelay = -randomDuration + 's'; + } +}) diff --git a/app/templates/base.html b/app/templates/base.html index 19d1ef8..ed45816 100755 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -13,23 +13,24 @@
- -
+ +
Phantas.ma/polis: Looking Back to the Future
-
+
未之至城：回顧未來
{% block main %}{% endblock main %}
{% block end %}{% endblock end %} +