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

split animations for text and background into 2 separate keyframe animations

Browse source
This commit is contained in:
imohkay 2021-10-22 17:31:38 +05:30
parent de2b0d9064
commit 4f625793d0
6 changed files with 21 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/static/css/partials/_film.scss
View file

@ -91,7 +91,7 @@ main > .film {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
animation: fadeIn 1s linear 0.4s forwards; animation: fade_in 1s linear 0.4s forwards;
opacity: 0; opacity: 0;
} }

19
app/static/css/partials/_layout.scss
View file

@ -13,20 +13,33 @@
@keyframes background_animation { @keyframes background_animation {
0%,100% { 0%,100% {
background-position: 0 0; background-position: 0 0;
//color: #ddd;
} }
50% { 50% {
background-position: 100% 0; background-position: 100% 0;
//color: #000;
} }
} }
@keyframes text_animation {
0%,100% {
color: #ddd;
}
50% {
color: #000;
}
}
body.animated { body.animated {
background: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4)); background: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4));
animation: background_animation 60s ease-in-out infinite; animation: background_animation 60s ease-in-out infinite;
background-size: 400% 100%; background-size: 400% 100%;
} }
body.animated-text {
animation: text_animation 60s ease-in-out infinite;
}
body { body {
color: #ddd; color: #ddd;
font-family: "noto_sans", sans-serif; font-family: "noto_sans", sans-serif;
@ -52,7 +65,7 @@ nav {
} }
// Animations: Fade In // Animations: Fade In
@keyframes fadeIn { @keyframes fade_in {
0% { 0% {
opacity: 0; opacity: 0;
} }

2
app/templates/films.html Normal file → Executable file
View file

@ -1,5 +1,5 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block body_class%}animated{% endblock %} {% block body_class%}animated animated-text{% endblock %}
{% block main %} {% block main %}
<div class="films"> <div class="films">
{% for film in films %} {% for film in films %}

2
app/templates/index.html Normal file → Executable file
View file

@ -1,5 +1,5 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block body_class%}animated{% endblock %} {% block body_class%}animated animated-text{% endblock %}
{% block main %} {% block main %}
<div class="index"> <div class="index">
Phantasmapolis<br> Phantasmapolis<br>

2
app/templates/page.html Normal file → Executable file
View file

@ -1,6 +1,6 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}{{ page.title }}– Phantas.ma/polis{% endblock title %} {% block title %}{{ page.title }}– Phantas.ma/polis{% endblock title %}
{% block body_class%}animated{% endblock %} {% block body_class%}animated animated-text{% endblock %}
{% block main %} {% block main %}
<div class="page {{ page.slug }}"> <div class="page {{ page.slug }}">
{{ page.body | safe }} {{ page.body | safe }}

2
app/templates/texts.html Normal file → Executable file
View file

@ -1,5 +1,5 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block body_class%}animated{% endblock %} {% block body_class%}animated animated-text{% endblock %}
{% block main %} {% block main %}
<div class="texts"> <div class="texts">