From ea612356a827cd9e7d631c0f1a39913c564b8055 Mon Sep 17 00:00:00 2001 From: Dirk Engling Date: Thu, 18 Aug 2016 13:31:22 +0200 Subject: Animate done in circle meme --- index.html | 13 +++++------ style.css | 79 +++++++++++++++++++++++++++++++++++++++++--------------------- 2 files changed, 59 insertions(+), 33 deletions(-) diff --git a/index.html b/index.html index 30a0988..f9f9507 100644 --- a/index.html +++ b/index.html @@ -51,7 +51,7 @@
-

1
Wer mahnt ab?

+

1
✓
Wer mahnt ab?

Debug: pre-fill
@@ -81,7 +81,7 @@
-

2
Wie lautet das Aktenzeichen?

+

2
✓
Wie lautet das Aktenzeichen?

Der Abmahner hat Ihnen ein Aktenzeichen zugeordnet. Dies muss im Schreiben auftauchen, damit die Kanzlei Ihre Antwort der Abmahnung zuordnen zu kann.

@@ -164,7 +164,7 @@
-

3
Warum sind Sie nicht Täter?

+

3
✓
Warum sind Sie nicht Täter?

Damit Sie korrekte Belege gegen den Vorwurf anführen können, sammeln wir alle nun Informationen ein, die der abmahnenden Kanzlei verdeutlichen, warum die Abmahnung unberechtigt ist.

@@ -185,7 +185,7 @@
-

4
Warum sind Sie kein Störer?

+

4
✓
Warum sind Sie kein Störer?

Um nicht als Störer in Haftung genommen zu werden, sind Hinweise hilfreich, aus welchem Grund auch eine Störerhaftung nicht in Betracht kommt. Bitte wählen Sie die entsprechenden Häkchen.

@@ -197,7 +197,7 @@

-
Achtung: Unrichtige Angaben zum Sachverhalt können Ihnen vor Gericht belastend ausgelegt werden. Wählen Sie daher auf jeden Fall nur die Häkchen aus, die den Tatsachen entsprechen.
+
Achtung: Unrichtige Angaben zum Sachverhalt können Ihnen vor Gericht belastend ausgelegt werden. Wählen Sie daher auf jeden Fall nur die Häkchen aus, die den Tatsachen entsprechen.
Weiter
@@ -205,7 +205,7 @@
-

5
Wer wird abgemahnt?

+

5
✓
Wer wird abgemahnt?

Hier benötigen wir Ihre Informationen, um das Anschreiben mit einem Absender zu versehen. Bitte fügen Sie Namen und Adresse wie auf der Abmahnung ein.

@@ -262,7 +262,6 @@
Impressum + Datenschutz
-
erdgeist (Konzept + Umsetzung)
Beata Hubrig (Rechtliches)
Malik Aziz (Design) ∙ Pepo (UX)
diff --git a/style.css b/style.css index 5467408..06d4c53 100644 --- a/style.css +++ b/style.css @@ -285,6 +285,11 @@ label { font-weight: normal; } +.circle_num.undone { + transform: rotate3d(0, 0, 0, 0deg); + transition: transform 0.5s 0.5s, visibility 0.5s 0.5s; +} + /* step1 has a h1 and the circle needs more finetuning to fit headline */ .block-step1 .circle_num { margin: 4px 28px 0 0; @@ -302,7 +307,7 @@ label { border-bottom: dotted 1px rgba(0,0,0,0.25); } -/* Our intra-step animations rely on the section's max-height being +/* Our inter-step animations rely on the section's max-height being transitioned from 0 to the original height. Initially hide all sections and only unhide them depending on the global state (as set with a class on the wrapper element) @@ -415,23 +420,53 @@ label { /* Style things that depend on the progress. Example: circles turn squares when a step is finished */ -#wrapper.step3 .block-step2 .circle_num, -#wrapper.step4 .block-step2 .circle_num, -#wrapper.step5 .block-step2 .circle_num, -#wrapper.step6 .block-step2 .circle_num, -#wrapper.step7 .block-step2 .circle_num, -#wrapper.step4 .block-step3 .circle_num, -#wrapper.step5 .block-step3 .circle_num, -#wrapper.step6 .block-step3 .circle_num, -#wrapper.step7 .block-step3 .circle_num, -#wrapper.step5 .block-step4 .circle_num, -#wrapper.step6 .block-step4 .circle_num, -#wrapper.step7 .block-step4 .circle_num, -#wrapper.step6 .block-step5 .circle_num, -#wrapper.step7 .block-step5 .circle_num, -#wrapper.step7 .block-step6 .circle_num { - border-radius: 1px !important; - transition: border-radius, 2s; +#wrapper.step3 .block-step2 .circle_num.undone, +#wrapper.step4 .block-step2 .circle_num.undone, +#wrapper.step5 .block-step2 .circle_num.undone, +#wrapper.step6 .block-step2 .circle_num.undone, +#wrapper.step7 .block-step2 .circle_num.undone, +#wrapper.step4 .block-step3 .circle_num.undone, +#wrapper.step5 .block-step3 .circle_num.undone, +#wrapper.step6 .block-step3 .circle_num.undone, +#wrapper.step7 .block-step3 .circle_num.undone, +#wrapper.step5 .block-step4 .circle_num.undone, +#wrapper.step6 .block-step4 .circle_num.undone, +#wrapper.step7 .block-step4 .circle_num.undone, +#wrapper.step6 .block-step5 .circle_num.undone, +#wrapper.step7 .block-step5 .circle_num.undone, +#wrapper.step7 .block-step6 .circle_num.undone { + transform: rotate3d(45, 45, 1, 90deg); + transition: transform 0.5s, visibility 0.5s; + visibility: hidden; +} + +.circle_num.done { + position: relative; + margin-right: -68px; + left: -68px; + visibility: hidden; + transition: transform 0.5s, visibility 0.5s; + transform: rotate3d(45, 45, 1, 90deg); +} + +#wrapper.step3 .block-step2 .circle_num.done, +#wrapper.step4 .block-step2 .circle_num.done, +#wrapper.step5 .block-step2 .circle_num.done, +#wrapper.step6 .block-step2 .circle_num.done, +#wrapper.step7 .block-step2 .circle_num.done, +#wrapper.step4 .block-step3 .circle_num.done, +#wrapper.step5 .block-step3 .circle_num.done, +#wrapper.step6 .block-step3 .circle_num.done, +#wrapper.step7 .block-step3 .circle_num.done, +#wrapper.step5 .block-step4 .circle_num.done, +#wrapper.step6 .block-step4 .circle_num.done, +#wrapper.step7 .block-step4 .circle_num.done, +#wrapper.step6 .block-step5 .circle_num.done, +#wrapper.step7 .block-step5 .circle_num.done, +#wrapper.step7 .block-step6 .circle_num.done { + visibility: visible; + transform: rotate3d(0,0,0,0deg); + transition: transform 0.5s 0.5s, visibility 0.5s 0.5s; } /* Make shift date selector */ @@ -535,14 +570,6 @@ select.zeit { margin-bottom: 0.3em; } -.credits hr { - height: 1px; - width: 90px; - margin-bottom: 1em; - border: 0; - background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); -} - /* ******** Horizontal footer slide magic ******** */ .scrollcontainer { -- cgit v1.2.3