0x2620/njpma
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

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

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

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/layout";
@import "partials/titleanimation";
@import "partials/menu";
@import "partials/film";
@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>
<body class="{% block body_class%}{% endblock %}">
<div class="topnav">
<a href="/polis" class="title">
<div class="title-text">
<a href="/polis" class="title animated-title">
<div class="title-text text">
Phantas.ma/polis<span class="hide-mobile">: Looking Back to the Future</span>
</div>
<div>
<div class="text">
未之至城<span class="hide-mobile">：回顧未來</span>
</div>
</a>
<nav>
<a href="{% url 'films'%}">films <span class="hide-mobile">-</span> 影片</a>
<a href="{% url 'texts' %}">assemblies <span class="hide-mobile">-</span> 组件</a>
<a href="{% url 'about' %}">about <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' %}" class="animated-title"><span class="text">assemblies <span class="hide-mobile">-</span> 组件</span></a>
<a href="{% url 'about' %}" class="animated-title"><span class="text">about <span class="hide-mobile">-</span> 關於</span></a>
</nav>
</div>
<main>
{% block main %}{% endblock main %}
</main>
{% block end %}{% endblock end %}
<script src="{% static 'js/animation.js' %}"></script>
</body>
</html>