more animations

2 files changed, 26 insertions, 18 deletions

diff --git a/share/templates/default/header.tmpl b/share/templates/default/header.tmpl
index 29f994d..29c24d1 100644
--- a/share/templates/default/header.tmpl
+++ b/share/templates/default/header.tmpl
@@ -22,7 +22,6 @@ cat <<END
             padding: 10px;
             margin-top: 10px;
             margin-bottom: 10px;
-            width: auto;
         }
 
         img {
@@ -49,13 +48,21 @@ cat <<END
         }
 
         .animate-none{}
-        .animate-fading{animation:fading 10s}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
-        .animate-opacity{animation:opac 2.0s}@keyframes opac{from{opacity:0} to{opacity:1}}
-        .animate-top{position:relative;animation:animatetop 3.0s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
-        .animate-left{position:relative;animation:animateleft 3.0s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
-        .animate-right{position:relative;animation:animateright 3.0s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
-        .animate-bottom{position:relative;animation:animatebottom 3.0s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
-        .animate-zoom {animation:animatezoom 3.0s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+        .animate-fading {animation:fading 10s}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
+
+        .animate-opacity-slow {animation:opac 3.0s}@keyframes opac{from{opacity:0} to{opacity:1}}
+        .animate-top-slow {position:relative;animation:animatetop 3.0s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
+        .animate-left-slow {position:relative;animation:animateleft 3.0s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
+        .animate-right-slow {position:relative;animation:animateright 3.0s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
+        .animate-bottom-slow {position:relative;animation:animatebottom 3.0s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
+        .animate-zoom-slow {animation:animatezoom 3.0s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+
+        .animate-opacity-fast {animation:opac 0.5s}@keyframes opac{from{opacity:0} to{opacity:1}}
+        .animate-top-fast {position:relative;animation:animatetop 0.5s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
+        .animate-left-fast {position:relative;animation:animateleft 0.5s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
+        .animate-right-fast {position:relative;animation:animateright 0.5s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
+        .animate-bottom-fast {position:relative;animation:animatebottom 0.5s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
+        .animate-zoom-fast {animation:animatezoom 0.5s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
     </style>
 </head>
 
@@ -64,7 +71,7 @@ END
 
 if [ "${show_header_bar}" = 'yes' ]; then
 cat <<END
-<div class="header">
+<div class="header animate-opacity">
     Site generated at $(date) with <a href="https://codeberg.org/foozone/photoalbum">codeberg.org/foozone/photoalbum</a>
     -
     &copy; by Paul Buetow
diff --git a/src/photoalbum.sh b/src/photoalbum.sh
index d4c6bd1..882b437 100755
--- a/src/photoalbum.sh
+++ b/src/photoalbum.sh
@@ -93,14 +93,15 @@ randomphoto () {
 }
 
 random_animation_css_class () {
+    local -r speed="$1"; shift
     cat <<END | grep -v fading | sort -R | head -n 1
-animate-fading
-animate-opacity
-animate-top
-animate-left
-animate-right
-animate-bottom
-animate-zoom
+animate-fading-$speed
+animate-opacity-$speed
+animate-top-$speed
+animate-left-$speed
+animate-right-$speed
+animate-bottom-$speed
+animate-zoom-$speed
 END
 }
 
@@ -150,7 +151,7 @@ albumhtml () {
         fi
 
         # Preview page
-        export animation_class=$(random_animation_css_class)
+        export animation_class=$(random_animation_css_class slow)
         template preview "$name.html"
 
         # View page
@@ -158,7 +159,7 @@ albumhtml () {
         export show_header_bar='no'
         template header "$num-$i.html"
 
-        export animation_class='animate-none'
+        export animation_class=$(random_animation_css_class fast)
         template view "$num-$i.html"
         template footer "$num-$i.html"