5202

ein Blog über technische Fragen zu Blogger

Ein Keyframe Menu

von
Heute mal wieder Zeit für eine Skizze - Thema: Bewegung!

Seid bei Bewegung auf Websites vorsichtig - unsere Wahrnehmung gibt Bewegung immer Priorität, insofern lenkt ihr mit dauerhaften Bewegung vom Inhalt ab (animierte .gifs sind etwa no-go > my oppinnion).

Die Idee hinter dieser Skizze ist einfach - beim öffnen der Seite wird durch das 'reinfliegen' der Tabs die Aufmerksamkeit auf das Menü gelenkt. Durch das klar definierte Anfang und Ende der Animation, wirkt das ganze trotzdem entspannt.

Was Neues

Ich habe mit dieser Skizze a bisserl was neues ausprobiert. Alle bisherigen Skizzen sind mit dem Smultron entstanden, hier habe ich zum ersten mal mit Coda2 gearbeitet, einem deutlich 'mächtigeren' Tool.

Den Editor zu wechseln war keine leichte Entscheidung für mich - ein Editor ist ein sehr persönliches Werkzeug und um damit effizient zu arbeiten, braucht's viel Übung. Ich bin mir noch nicht sicher, ob Coda2 wirklich mein neuer Editor wird, fremdle noch a bisserl :).

Zweitens ist das meine erste auf GoogleDrive gehostete Skizze - was ich jetzt schon sagen kann, es ist um Welten einfacher, da zu arbeiten, als auf Blogger - shame on you, Blogger!

Die Skizze

Die Skizze selber ist denkbar simpel aufgebaut - die Navigation ist eine normale unsortierte Liste mit Anker Elememten drin:
 <nav>
       <ul>
               <li>
                       <a href="index.html">Demo 1</a>
               </li>
               <li>
                       <a href="index2.html">Demo 2</a>
               </li>
               <li>
                       <a href="index3.html">Demo 3</a>
               </li>
               <li>
                       <a href="index4.html">Demo 4</a>
               </li>
               <li>
                       <a href="index5.html">Demo 5</a>
               </li>
               <li>
                       <a href="index6.html">Demo 6</a>
               </li>
       </ul>
 </nav> 
Mit CSS geben wir dem Menü ein kleines Grundstyling - wichtig ist, das die einzelnen Listenpunkt relativ positioniert werden und eine fixe Weite bekommen:
nav li {
    display: inline-block;
    width: 80px;
    padding-top: 10px;
    list-style: none;
    position: relative;
}
Die Ankerelemente werden absolute positioniert und dann um 1000px nach links verschoben - damit liegen sie beim öffnen der Seite außerhalb des Blickfelds.
nav li a {
        display: inline-block;
        margin: 10px;
        color: #666;
        font-weight: 700;
        line-height: 30px;
        border-bottom: 4px solid transparent;
        position: absolute;
        left: -1000px;
    }

Animation

So weit so unspektakulär - jetzt kommt der Trick an der Sache. Wir schreiben eine kleine Keyframe Funktion, die die einzelnen Listenpunkt in die Seite schiebt.

Beachtet bitte, dass ich hier alles _ohne_ Vendor Präfix schreibe. Für die vollständige CSS müsst ihr auf die Download Seite schauen:
@keyframes fly1 { 
        0% { left: -1000px }
        100% { left: 0 }
}
Die Funktion ist super-simpel - muss ich dazu was erklären?

Zu dieser Funktion schreiben wir jetzt eine Animation - beginnen wir mit dem letzten (sechsten) Tab:
nav li:nth-of-type(6) a {
    animation-name: fly1;
    animation-delay: .5s;
    animation-duration: .5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}
Die Animation hat beim Start eine Verzögerung von .5s, damit sich die Seite erst richtig aufbaut, bevor die Animation startet. Die Dauer ist .5s und das ganze läuft nur einmal ab. Wichtig ist der animation-fill-mode: forwards - damit springt die Animation nach dem Durchlauf nicht auf den Ausgangspunkt zurück.

Für den vorletzten (fünften) Listenpunkt schreiben wir die Animation so:
nav li:nth-of-type(5) a {
    animation-name: fly1;
    animation-delay: .7s;
    animation-duration: .5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}
Exakt das gleich wie vorher, nur das wir hier eine Verzögerung um .7s geben, d.h. dieser Tab startet .2s nach dem ersten ... das ist der Effekt des 'eins-nach-dem-anderen-reinfliegen'.

Den vierten Tab bekommt dementsprechend diese Animation:
nav li:nth-of-type(4) a {
    animation-name: fly1;
    animation-delay: .9s;
    animation-duration: .5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}
Verstanden?

Klasse ... funktioniert das auch auf Blogger?

Antwort von Radio Eriwan: Im Prinzip ja :) ... nur müsst ihr dafür die Crosscoll-CSS von Blogger a bisserl umschreiben :(. ... war ich jetzt zu faul dafür.

Will das wirklich mal jemand ausprobieren, kann er ja sein Glück versuchen :D - klappt's nicht, einfach einen Kommentar hinterlassen, dann schaue ich's mir noch mal auf Blogger an.

Und weiter?

Keyframe Animationen wirken frisch und unverbraucht, weil sie niemand benützt - that's the point! Alle Browser unterstützen inzwischen Keyframes - für Asbach Uralt Browser müsst ihr euch allerdings mit modernizr ein Fallback bauen.

Keyframes wirken ruhiger und sind weniger Ressourcenhungrig als Javascript. Ich denke es lohnt sich, mit der Technik a bisserl rumzuspielen.

Wettbewerb bis 20. Dezember

Darf ich eure geschätzte Aufmerksamkeit noch mal an den kleinen CSS Wettbewerb bis zum 20.Dezember erinnern? Bis jetzt sind fünf richtige Antworten eingegangen, die Chancen auf den €20 Amazon Gutschein stehen also nicht schlecht.