5202

ein Blog über technische Fragen zu Blogger

Animierter Lese-Fortschrittsanzeiger

von
Deutsch wie in der Überschrift ist 'ne coole Sache - ich finde keinen besseren Begriff, worum es in dem Post hier geht ... gemeint ist das Gadget, mit dem auf Bücher-Blogs viele Blogger ihr Lesefortschritte anzeigen.

Ihr könnt das starr und statisch machen, oder dynamisch und smooooth ...

Proof of Conzept

Die Skizze ist mit purem CSS gebaut - kein Javascript. Sie funktioniert deshalb nur in richtigen Browsern, im IE ab 9+.

Ich möchte in der Skizze ein sinnvolles Konzept für 'Bewegung' demonstrieren. Auf seinen Blog irgendetwas zappeln zu lassen, nur weil's man kann, ist nicht sinnvoll.

Diskutabel ist dagegen, etwas was fortschreitet (nämlich seine Lektüre), mittels eines dynamischen Balkens zu visualisieren.

Beim Lesen nervt Bewegung - das ist keine Geschmacksfrage, sondern physiologisch so im Sehvorgang angelegt ... Aufmerksamkeit richtet sich immer auf Bewegung.

In diesem Fall hat die Bewegung eine Funktion und ist somit sinnvoll.

just my 2 cent ...

Die Skizze

Kommen wir zur Skizze selber.

Der Grundaufbau ist simpel - in einem Div-Container liegen drei Span Container mit Author, Titel und 'Lesefortschritt' von dem jeweiligen Buch:
<div class="tn-box tn-box-1">
     <span class="author">Jakob Boehme</span>
<span>Aurora</span><span class="se">270 von 410 Seiten</span>
     <div class="tn-progress"></div>
    </div>
    
    <div class="tn-box tn-box-2">
     <span class="author">Angelus Silesius</span>
<span>Cherubinischer Wandersmann</span><span class="se">36 von 185 Seiten</span>
     <div class="tn-progress"></div>
    </div>
    
    <div class="tn-box tn-box-3">
     <span class="author">Ignatius von Loyola</span>
<span>Exerzitien</span><span class="se">699 von 740 Seiten</span>
     <div class="tn-progress"></div>
    </div>
</div>
Ein weiterer Div-Container wird später zum animierten Fortschrittsanzeiger.
CSS: Grundlage
Geben wir den Bücher-Boxen zunächst ein einheitliches Grundstyling:
.tn-box {
 width: 490px;
 position: relative;
 margin: 0 auto 20px auto;
 padding: 25px 15px;
 text-align: left;
 border-radius: 5px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.6);  
}

.tn-box span {
 font-weight: bold;
 font-size: 16px;
 margin: 0;
 padding: 0 10px 0 60px;
 text-shadow: 0 1px 1px rgba(255,255,255,0.6);
}
Jede Box bekommt noch einen je eigenen Hintergrund und Schriftfarbe:
.tn-box-1{
 background: #f1c733;
 border: 1px solid #936915;
}
.tn-box-2{
 background: #7bd4f6;
 border: 1px solid #0c84b2;
}
.tn-box-3{
 background: #dd9aff;
 border: 1px solid #b367db;
}
.tn-box-1 span {
 color: #7d5912;
}
.tn-box-2 span {
 color: #074f6a;
}
.tn-box-3 span {
 color: #69288b;
}
Die Autorenbilder werden als Pseudoelement ::before eingesetzt:
.tn-box:before {
 position: absolute;
 margin-top: 20px;
 top: 0;
 left: 10px ;
}
.tn-box-1:before{
 content: url(http://goo.gl/U1jvZ);
}
.tn-box-2:before{
 content: url(http://goo.gl/H3qbq);
}
.tn-box-3:before{
 content: url(http://goo.gl/tVYGQ);
}
So weit erst mal die 'normale' CSS, smooth ist das noch nicht :=(.
Der Fortschrittsanzeiger
Geben wir der Progressbar zunächst a bisserl CSS:
.tn-progress {
 width: 0;
 height: 14px;
 background: rgba(255,255,255,0.3);
 position: absolute;
 bottom: 5px;
 left: 2%;
 border-radius: 3px;
 box-shadow: 
  inset 0 1px 1px rgba(0,0,0,0.05), 
  0 -1px 0 rgba(255,255,255,0.6);
}
Im Ausgangszustand ist die Weite des Anzeigers '0'.

Dann formulieren wir eine Regel für die Fortschrittsanzeiger in Box1:
@keyframes runProgress_1 {
 0%{ width: 0%; background: rgba(255,255,255,0.3); }
 100%{ width: 65%; background: rgba(255,255,255,1); }
}
Die Regel sagt, das die Anzeige im Zeitpunkt '0' bei '0%', im Zeitpunkt '100' dagegen bei '65%' liegt (d.i. 270[Seiten]/410[Seiten]*100).

Analog dazu formulieren wir Regeln für Box2 und Box3:
@keyframes runProgress_2 {
 0%{ width: 0%; background: rgba(255,255,255,0.3); }
 100%{ width: 20%; background: rgba(255,255,255,1); }
}
@keyframes runProgress_3 {
 0%{ width: 0%; background: rgba(255,255,255,0.3); }
 100%{ width: 94%; background: rgba(255,255,255,1); }
}
Zu diesen drei Regeln führen wir nun drei verschiedene Animationen durch:
.tn-box-1 .tn-progress {
           animation: runProgress_1 4s linear forwards 1.5s;
}
.tn-box-2 .tn-progress {
          animation: runProgress_2 3s linear forwards 1.5s;
}
.tn-box-3 .tn-progress {
         animation: runProgress_3 7s linear forwards 1.5s;
}
Die Animation für Box1 läuft 4s, für Box2 3s und für Box3 7s. Alle drei Animation starten mit einer Verzögerung von 1.5s und laufen 'linear vorwärts' ... ich denke das ist selbsterklärend.
Seitenzahl einlenden
Als letztes blenden wir noch smooth die Seitenzahl ein - dazu formulieren wir eine weitere Regel:
@keyframes fadein {
 0% { opacity: 0; }
 10% { opacity: 0; }
 90% { opacity: 0; transform: translateY(-30px);}
 99% { opacity: 1; transform: translateY(0px);}
 100% { opacity: 1; }
}
Bis zum Zeitpunkt '90' bleibt die Seitenzahl komplett ausgeblendet.

Dann verschieben wir die 'Seitenzahl' mit einem Sprung auf der y-Achse um 30px nach oben um sie dann bis zum Zeitpunkt '99' langsam wieder auf '0' einzublenden.

Die dazugehörige Animation:
.tn-box-1 .se {
         animation: fadein 5.5s linear forwards;
}
.tn-box-2 .se {
        animation: fadein 4.5s linear forwards;
}
.tn-box-3 .se {
         animation: fadein 9s linear forwards;
}
Jede Animation startet zum Ende der Animation runProgress ... dabei berechnen wir die 'Verzögerung' von 1.5s mit einer Laufzeit von 4s plus Verzögerung von 1.5s ergibt sich eine Gesamtlaufzeit von 5.5s für Box1.

Analog das selbe für Box2 und Box3.

Das war's - beachtet bitte, das für die Keyframes und CSS-Eigenschaft animation Vendor-Prefixe geschrieben werden müssen - die vollständige CSS findet ihr im Download.

Anmerkungen

Das ist eine Skizze - kein gebrauchsfertiges Plugin. Wer will, darf das zu jedem Zweck benützen ... wenn es Fragen dazu gibt, werde ich sie auch gerne beantworten ...

Was ich allerdings von Zeit und Aufwand nicht leisten kann, ist so eine Skizze in ein bestehendes Template einzubauen - sorry, aber das müsst ihr selber leisten :=)

Abgesehen davon, wie gefällt euch die Idee?