animated title
This commit is contained in:
parent
b9d956d072
commit
84eede76f5
5 changed files with 42 additions and 11 deletions
|
@ -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;
|
||||||
|
|
21
app/static/css/partials/_titleanimation.scss
Normal file
21
app/static/css/partials/_titleanimation.scss
Normal 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,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
12
app/static/js/animation.js
Normal 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,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>
|
||||||
|
|
Loading…
Reference in a new issue