From b1ed234e9aef333270a969676a1bce8aaf4be730 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Paul=20H=C3=A4nsch?= <paul@plutz.net>
Date: Wed, 24 Mar 2021 15:02:15 +0100
Subject: [PATCH] animated thumbnail show

---
 style.css    | 33 ++++++++++++++++++++++++++++++++-
 thumbnail.sh |  6 +++---
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/style.css b/style.css
index c757fdd..bdb7710 100644
--- a/style.css
+++ b/style.css
@@ -55,13 +55,44 @@ body {
   -padding: 0 .25em;
   margin: 0 .5%;
   margin-bottom: 1em;
+  overflow: hidden;
 }
 
 .itemlist .list img {
-  width: 100%; height: 11em;
+  width: 1000%; height: 11em;
+  max-width: unset;
   background-color: #111;
   object-fit: contain;
+  transform: translate(-00%, 0);
+}
+.itemlist .list img:hover {
+  animation-name: thumbscroll;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+}
+@keyframes thumbscroll {
+   0%   { transform: translate(-00%, 0); }
+   9.9% { transform: translate(-00%, 0); }
+  10%   { transform: translate(-10%, 0); }
+  19.9% { transform: translate(-10%, 0); }
+  20%   { transform: translate(-20%, 0); }
+  29.9% { transform: translate(-20%, 0); }
+  30%   { transform: translate(-30%, 0); }
+  39.9% { transform: translate(-30%, 0); }
+  40%   { transform: translate(-40%, 0); }
+  49.9% { transform: translate(-40%, 0); }
+  50%   { transform: translate(-50%, 0); }
+  59.9% { transform: translate(-50%, 0); }
+  60%   { transform: translate(-60%, 0); }
+  69.9% { transform: translate(-60%, 0); }
+  70%   { transform: translate(-70%, 0); }
+  79.9% { transform: translate(-70%, 0); }
+  80%   { transform: translate(-80%, 0); }
+  89.9% { transform: translate(-80%, 0); }
+  90%   { transform: translate(-90%, 0); }
+ 100%   { transform: translate(-90%, 0); }
 }
+
 .itemlist .list label {
   display: block;
   font-weight: bolder;
diff --git a/thumbnail.sh b/thumbnail.sh
index f6d212c..d1b5ff5 100644
--- a/thumbnail.sh
+++ b/thumbnail.sh
@@ -13,10 +13,10 @@ gen_thumb(){
       | sed -rn 's:ID_LENGTH=(.*)(\..*)$:\1:p;' \
     )"
   
-    chunk="$((${l:-10} / 5))"
+    chunk="$((${l:-10} / 11))"
     
     tmp="$(mktemp -d)"
-    for cnt in 1 2 3 4; do
+    for cnt in 1 2 3 4 5 6 7 8 9 10; do
       printf '' \
       | mplayer -input nodefault-bindings -nosound -benchmark \
                 -noconfig all -really-quiet \
@@ -29,7 +29,7 @@ gen_thumb(){
     printf '' \
     | mplayer -input nodefault-bindings -nosound -benchmark \
               -noconfig all -really-quiet \
-              -vf scale=159:-2,tile=2:2:4:0:2 \
+              -vf scale=320:-2,tile=10:1:10:0:0 \
               -vo jpeg:quality=96:outdir="${tmp}"\
               "mf://$tmp/_*.jpg" 2>&-
   
-- 
2.39.2