summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDirk Engling <erdgeist@erdgeist.org>2016-08-18 13:31:22 +0200
committerDirk Engling <erdgeist@erdgeist.org>2016-08-18 13:31:22 +0200
commitea612356a827cd9e7d631c0f1a39913c564b8055 (patch)
treef7c215d56ccb86382f81b63f6df1d5d93b1adc8f
parent64aedab92f4e69fd25acfcc678a14c67a5a779a6 (diff)
Animate done in circle meme
-rw-r--r--index.html13
-rw-r--r--style.css79
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 @@
51 </div> 51 </div>
52 <div class="collapsable block-step2"> 52 <div class="collapsable block-step2">
53 <div onclick="step1_done()" class="block-header"> 53 <div onclick="step1_done()" class="block-header">
54 <h2 id="head2"><div class="circle_num">1</div> Wer mahnt ab?</h2> 54 <h2 id="head2"><div class="circle_num undone">1</div><div class="circle_num done">✓</div> Wer mahnt ab?</h2>
55 </div> 55 </div>
56 <div class="juice"> 56 <div class="juice">
57 <div><a href="javascript:ausfuellen()" class="button">Debug: pre-fill</a></div> 57 <div><a href="javascript:ausfuellen()" class="button">Debug: pre-fill</a></div>
@@ -81,7 +81,7 @@
81 </div> 81 </div>
82 <div class="collapsable block-step3"> 82 <div class="collapsable block-step3">
83 <div onclick="step2_done()" class="block-header"> 83 <div onclick="step2_done()" class="block-header">
84 <h2 id="head3"><div class="circle_num">2</div> Wie lautet das Aktenzeichen?</h2> 84 <h2 id="head3"><div class="circle_num undone">2</div><div class="circle_num done">✓</div> Wie lautet das Aktenzeichen?</h2>
85 </div> 85 </div>
86 <div class="juice"> 86 <div class="juice">
87 <p>Der Abmahner hat Ihnen ein Aktenzeichen zugeordnet. Dies muss im Schreiben auftauchen, damit die Kanzlei Ihre Antwort der Abmahnung zuordnen zu kann.</p> 87 <p>Der Abmahner hat Ihnen ein Aktenzeichen zugeordnet. Dies muss im Schreiben auftauchen, damit die Kanzlei Ihre Antwort der Abmahnung zuordnen zu kann.</p>
@@ -164,7 +164,7 @@
164 </div> 164 </div>
165 <div class="collapsable block-step4"> 165 <div class="collapsable block-step4">
166 <div onclick="step3_done()" class="block-header"> 166 <div onclick="step3_done()" class="block-header">
167 <h2 id="head4"><div class="circle_num">3</div> Warum sind Sie nicht Täter?</h2> 167 <h2 id="head4"><div class="circle_num undone">3</div><div class="circle_num done">✓</div> Warum sind Sie nicht Täter?</h2>
168 </div> 168 </div>
169 <div class="juice"> 169 <div class="juice">
170 <p>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.</p> 170 <p>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.</p>
@@ -185,7 +185,7 @@
185 </div> 185 </div>
186 <div class="collapsable block-step5"> 186 <div class="collapsable block-step5">
187 <div onclick="step4_done()" class="block-header"> 187 <div onclick="step4_done()" class="block-header">
188 <h2 id="head5"><div class="circle_num">4</div> Warum sind Sie kein Störer?</h2> 188 <h2 id="head5"><div class="circle_num undone">4</div><div class="circle_num done">✓</div> Warum sind Sie kein Störer?</h2>
189 </div> 189 </div>
190 <div class="juice"> 190 <div class="juice">
191 <p>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.</p> 191 <p>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.</p>
@@ -197,7 +197,7 @@
197 <div><input id="alibi_nachbarn" type="checkbox"/><label for="alibi_nachbarn"><span></span>Neben mir benutzen mehrere Nachbarn mein Netzwerk.</label></div> 197 <div><input id="alibi_nachbarn" type="checkbox"/><label for="alibi_nachbarn"><span></span>Neben mir benutzen mehrere Nachbarn mein Netzwerk.</label></div>
198 <div><input id="alibi_fluechtlingshilfe" type="checkbox"/><label for="alibi_fluechtlingshilfe"><span></span>Ich stelle mein Netzwerk einem Flüchtlingsheim zur Verfügung.</label></div> 198 <div><input id="alibi_fluechtlingshilfe" type="checkbox"/><label for="alibi_fluechtlingshilfe"><span></span>Ich stelle mein Netzwerk einem Flüchtlingsheim zur Verfügung.</label></div>
199 <p></p> 199 <p></p>
200 <div class="hint">Achtung: Unrichtige Angaben zum Sachverhalt können Ihnen vor Gericht belastend ausgelegt werden. <b>Wählen Sie daher auf jeden Fall nur die Häkchen aus, die den Tatsachen entsprechen.</b></div> 200 <div class="hint">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.</div>
201 <div class="one-button"> 201 <div class="one-button">
202 <div class="button button-green" onclick="step5_done()">Weiter</div> 202 <div class="button button-green" onclick="step5_done()">Weiter</div>
203 </div> 203 </div>
@@ -205,7 +205,7 @@
205 </div> 205 </div>
206 <div class="collapsable block-step6"> 206 <div class="collapsable block-step6">
207 <div onclick="step5_done()" class="block-header"> 207 <div onclick="step5_done()" class="block-header">
208 <h2 id="head6"><div class="circle_num">5</div> Wer wird abgemahnt?</h2> 208 <h2 id="head6"><div class="circle_num undone">5</div><div class="circle_num done">✓</div> Wer wird abgemahnt?</h2>
209 </div> 209 </div>
210 <div class="juice"> 210 <div class="juice">
211 <p>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.</p> 211 <p>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.</p>
@@ -262,7 +262,6 @@
262 </div></a> 262 </div></a>
263 </div> 263 </div>
264 <div class="credit imprint" onclick="show_impressum()"><span>Impressum + Datenschutz<span></div> 264 <div class="credit imprint" onclick="show_impressum()"><span>Impressum + Datenschutz<span></div>
265 <hr/>
266 <div class="credit implementor"><a href="https://erdgeist.org/">erdgeist</a> (Konzept + Umsetzung)</div> 265 <div class="credit implementor"><a href="https://erdgeist.org/">erdgeist</a> (Konzept + Umsetzung)</div>
267 <div class="credit implementor"><a href="https://kanzlei-hubrig.de/">Beata Hubrig</a> (Rechtliches)</div> 266 <div class="credit implementor"><a href="https://kanzlei-hubrig.de/">Beata Hubrig</a> (Rechtliches)</div>
268 <div class="credit implementor"><a href="http://www.schlicht-und-ergreifend.de">Malik Aziz</a> (Design) ∙ <a href="http://elektrowecker.de/">Pepo</a> (UX)</div> 267 <div class="credit implementor"><a href="http://www.schlicht-und-ergreifend.de">Malik Aziz</a> (Design) ∙ <a href="http://elektrowecker.de/">Pepo</a> (UX)</div>
diff --git a/style.css b/style.css
index 5467408..06d4c53 100644
--- a/style.css
+++ b/style.css
@@ -285,6 +285,11 @@ label {
285 font-weight: normal; 285 font-weight: normal;
286} 286}
287 287
288.circle_num.undone {
289 transform: rotate3d(0, 0, 0, 0deg);
290 transition: transform 0.5s 0.5s, visibility 0.5s 0.5s;
291}
292
288/* step1 has a h1 and the circle needs more finetuning to fit headline */ 293/* step1 has a h1 and the circle needs more finetuning to fit headline */
289.block-step1 .circle_num { 294.block-step1 .circle_num {
290 margin: 4px 28px 0 0; 295 margin: 4px 28px 0 0;
@@ -302,7 +307,7 @@ label {
302 border-bottom: dotted 1px rgba(0,0,0,0.25); 307 border-bottom: dotted 1px rgba(0,0,0,0.25);
303} 308}
304 309
305/* Our intra-step animations rely on the section's max-height being 310/* Our inter-step animations rely on the section's max-height being
306 transitioned from 0 to the original height. 311 transitioned from 0 to the original height.
307 Initially hide all sections and only unhide them depending on the 312 Initially hide all sections and only unhide them depending on the
308 global state (as set with a class on the wrapper element) 313 global state (as set with a class on the wrapper element)
@@ -415,23 +420,53 @@ label {
415 420
416/* Style things that depend on the progress. 421/* Style things that depend on the progress.
417 Example: circles turn squares when a step is finished */ 422 Example: circles turn squares when a step is finished */
418#wrapper.step3 .block-step2 .circle_num, 423#wrapper.step3 .block-step2 .circle_num.undone,
419#wrapper.step4 .block-step2 .circle_num, 424#wrapper.step4 .block-step2 .circle_num.undone,
420#wrapper.step5 .block-step2 .circle_num, 425#wrapper.step5 .block-step2 .circle_num.undone,
421#wrapper.step6 .block-step2 .circle_num, 426#wrapper.step6 .block-step2 .circle_num.undone,
422#wrapper.step7 .block-step2 .circle_num, 427#wrapper.step7 .block-step2 .circle_num.undone,
423#wrapper.step4 .block-step3 .circle_num, 428#wrapper.step4 .block-step3 .circle_num.undone,
424#wrapper.step5 .block-step3 .circle_num, 429#wrapper.step5 .block-step3 .circle_num.undone,
425#wrapper.step6 .block-step3 .circle_num, 430#wrapper.step6 .block-step3 .circle_num.undone,
426#wrapper.step7 .block-step3 .circle_num, 431#wrapper.step7 .block-step3 .circle_num.undone,
427#wrapper.step5 .block-step4 .circle_num, 432#wrapper.step5 .block-step4 .circle_num.undone,
428#wrapper.step6 .block-step4 .circle_num, 433#wrapper.step6 .block-step4 .circle_num.undone,
429#wrapper.step7 .block-step4 .circle_num, 434#wrapper.step7 .block-step4 .circle_num.undone,
430#wrapper.step6 .block-step5 .circle_num, 435#wrapper.step6 .block-step5 .circle_num.undone,
431#wrapper.step7 .block-step5 .circle_num, 436#wrapper.step7 .block-step5 .circle_num.undone,
432#wrapper.step7 .block-step6 .circle_num { 437#wrapper.step7 .block-step6 .circle_num.undone {
433 border-radius: 1px !important; 438 transform: rotate3d(45, 45, 1, 90deg);
434 transition: border-radius, 2s; 439 transition: transform 0.5s, visibility 0.5s;
440 visibility: hidden;
441}
442
443.circle_num.done {
444 position: relative;
445 margin-right: -68px;
446 left: -68px;
447 visibility: hidden;
448 transition: transform 0.5s, visibility 0.5s;
449 transform: rotate3d(45, 45, 1, 90deg);
450}
451
452#wrapper.step3 .block-step2 .circle_num.done,
453#wrapper.step4 .block-step2 .circle_num.done,
454#wrapper.step5 .block-step2 .circle_num.done,
455#wrapper.step6 .block-step2 .circle_num.done,
456#wrapper.step7 .block-step2 .circle_num.done,
457#wrapper.step4 .block-step3 .circle_num.done,
458#wrapper.step5 .block-step3 .circle_num.done,
459#wrapper.step6 .block-step3 .circle_num.done,
460#wrapper.step7 .block-step3 .circle_num.done,
461#wrapper.step5 .block-step4 .circle_num.done,
462#wrapper.step6 .block-step4 .circle_num.done,
463#wrapper.step7 .block-step4 .circle_num.done,
464#wrapper.step6 .block-step5 .circle_num.done,
465#wrapper.step7 .block-step5 .circle_num.done,
466#wrapper.step7 .block-step6 .circle_num.done {
467 visibility: visible;
468 transform: rotate3d(0,0,0,0deg);
469 transition: transform 0.5s 0.5s, visibility 0.5s 0.5s;
435} 470}
436 471
437/* Make shift date selector */ 472/* Make shift date selector */
@@ -535,14 +570,6 @@ select.zeit {
535 margin-bottom: 0.3em; 570 margin-bottom: 0.3em;
536} 571}
537 572
538.credits hr {
539 height: 1px;
540 width: 90px;
541 margin-bottom: 1em;
542 border: 0;
543 background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
544}
545
546/* ******** Horizontal footer slide magic ******** */ 573/* ******** Horizontal footer slide magic ******** */
547 574
548.scrollcontainer { 575.scrollcontainer {