12.9.12
Animierter Lese-Fortschrittsanzeiger
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:
Ein weiterer Div-Container wird später zum animierten Fortschrittsanzeiger.
<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>
CSS: Grundlage
Geben wir den Bücher-Boxen zunächst ein einheitliches Grundstyling:Jede Box bekommt noch einen je eigenen Hintergrund und Schriftfarbe:
.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);
}
Die Autorenbilder werden als Pseudoelement
.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;
}
::before eingesetzt: So weit erst mal die 'normale' CSS, smooth ist das noch nicht :=(.
.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);
}
Der Fortschrittsanzeiger
Geben wir der Progressbar zunächst a bisserl CSS:Im Ausgangszustand ist die Weite des Anzeigers '0'.
.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);
}
Dann formulieren wir eine Regel für die Fortschrittsanzeiger in Box1:
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).
@keyframes runProgress_1 {
0%{ width: 0%; background: rgba(255,255,255,0.3); }
100%{ width: 65%; background: rgba(255,255,255,1); }
}
Analog dazu formulieren wir Regeln für Box2 und Box3:
Zu diesen drei Regeln führen wir nun drei verschiedene Animationen durch:
@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); }
}
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.
.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;
}
Seitenzahl einlenden
Als letztes blenden wir noch smooth die Seitenzahl ein - dazu formulieren wir eine weitere Regel:Bis zum Zeitpunkt '90' bleibt die Seitenzahl komplett ausgeblendet.
@keyframes fadein {
0% { opacity: 0; }
10% { opacity: 0; }
90% { opacity: 0; transform: translateY(-30px);}
99% { opacity: 1; transform: translateY(0px);}
100% { opacity: 1; }
}
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:
Jede Animation startet zum Ende der 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;
}
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?