0x2620/phantasma
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

animated title

Browse source
This commit is contained in:
j 2021-10-21 17:10:13 +01:00
parent b9d956d072
commit 84eede76f5
5 changed files with 42 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/static/css/partials/_menu.scss
View file

@ -33,10 +33,6 @@
font-size: 17px; font-size: 17px;
margin-left: var(--spacing); margin-left: var(--spacing);
&:hover {
background-color: #ddd;
color: black;
}
@media screen and (max-width: 799px) { @media screen and (max-width: 799px) {
&.title { &.title {
display: block; display: block;
@ -57,4 +53,4 @@
font-weight: 700; font-weight: 700;
padding-bottom: calc(var(--spacing) / 2); padding-bottom: calc(var(--spacing) / 2);
} }
} }

21
app/static/css/partials/_titleanimation.scss Normal file
View file

@ -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%;
}
}

1
app/static/css/style.scss
View file

@ -1,5 +1,6 @@
@import "partials/reset"; @import "partials/reset";
@import "partials/layout"; @import "partials/layout";
@import "partials/titleanimation";
@import "partials/menu"; @import "partials/menu";
@import "partials/film"; @import "partials/film";
@import "partials/text"; @import "partials/text";

12
app/static/js/animation.js Normal file
View file

@ -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';
}
})

13
app/templates/base.html
View file

@ -13,23 +13,24 @@
</head> </head>
<body class="{% block body_class%}{% endblock %}"> <body class="{% block body_class%}{% endblock %}">
<div class="topnav"> <div class="topnav">
<a href="/polis" class="title"> <a href="/polis" class="title animated-title">
<div class="title-text"> <div class="title-text text">
Phantas.ma/polis<span class="hide-mobile">: Looking Back to the Future</span> Phantas.ma/polis<span class="hide-mobile">: Looking Back to the Future</span>
</div> </div>
<div> <div class="text">
未之至城<span class="hide-mobile">：回顧未來</span> 未之至城<span class="hide-mobile">：回顧未來</span>
</div> </div>
</a> </a>
<nav> <nav>
<a href="{% url 'films'%}">films <span class="hide-mobile">-</span> 影片</a> <a href="{% url 'films'%}" class="animated-title"><span class="text">films <span class="hide-mobile">-</span> 影片</span></a>
<a href="{% url 'texts' %}">assemblies <span class="hide-mobile">-</span> 组件</a> <a href="{% url 'texts' %}" class="animated-title"><span class="text">assemblies <span class="hide-mobile">-</span> 组件</span></a>
<a href="{% url 'about' %}">about <span class="hide-mobile">-</span> 關於</a> <a href="{% url 'about' %}" class="animated-title"><span class="text">about <span class="hide-mobile">-</span> 關於</span></a>
</nav> </nav>
</div> </div>
<main> <main>
{% block main %}{% endblock main %} {% block main %}{% endblock main %}
</main> </main>
{% block end %}{% endblock end %} {% block end %}{% endblock end %}
<script src="{% static 'js/animation.js' %}"></script>
</body> </body>
</html> </html>