GH-202: Add 3NF transitions

Author: shorodilov

src/_static/scss/presentation-common.scss

@@ -41,6 +41,9 @@
   }
 }
 
+/* transitions */
+$transition-default: 2000ms;
+
 /* colors */
 // todo: adjust colors
 $background: #212121;
@@ -137,11 +140,15 @@ $step-width: 1800px;
   .db-table {
     width: 75%;
 
-    margin: auto auto 20px;
+    margin-bottom: 20px;
 
     font-family: Monospaced, monospace;
     font-size: $base-font-size * 0.75;
 
+    .primary-key {
+      background-color: rgba(125, 125, 125, 0.1);
+    }
+
     th, td {
       padding: 1svh 3svw;
     }
@@ -161,3 +168,36 @@ $step-width: 1800px;
     padding: 0 20px;
   }
 }
+
+/* 4th dimension */
+#impress {
+  .future {
+    .fade-in {
+      opacity: 0.0;
+    }
+    .fly-in {
+      opacity: 0.0;
+      transform: translateY(2200px);
+    }
+  }
+
+  .present {
+    .fade-in {
+      opacity: 1.0;
+      transition: $transition-default;
+    }
+    .fly-in {
+      opacity: 1.0;
+      transform: translateY(0px);
+      transition: $transition-default;
+    }
+  }
+
+  .past {
+    .fade-out {
+      opacity: 0.0;
+      transition: $transition-default;
+    }
+  }
+
+}

src/_static/scss/presentation-normalization.scss

@@ -9,6 +9,7 @@
   .requirements {
     h3 {
       @extend .text-start;
+      text-decoration: underline;
     }
   }
 
@@ -34,5 +35,40 @@
     grid-template-columns: repeat(2, 1fr);
     grid-column-gap: 20px;
     align-items: start;
+
+    table {
+      margin: 30px auto;
+    }
+  }
+
+  #table--3nf.future {
+    section:first-of-type {
+      .fly-in {
+        transform: translateY(-2200px);
+      }
+    }
+
+    section:last-of-type {
+      .fly-in {
+        transform: translateY(2200px);
+      }
+    }
+
+    section {
+      .fly-in {
+        opacity: 0.0;
+      }
+    }
+  }
+
+  #table--3nf.present {
+    section {
+      .fly-in {
+        transform: translateY(0px);
+        opacity: 1.0;
+        transition: $transition-default;
+        transition-delay: 1000ms;
+      }
+    }
   }
 }

src/pres/normalization/index.html

@@ -633,12 +633,12 @@ <h2>Requirements</h2>
          data-x="-3000"
          data-y="750"
          data-rotate-z="15">
-      <h2>Third normal form</h2>
-      <section>
+      <h2 class="fade-in">Third normal form</h2>
+      <section class="fly-in">
         <h3>Requirements</h3>
         <ul>
           <li>
-            Every non-key attribute in a table should depend on the key, the whole key, and nothing but the key
+            Every non-key attribute in a table should depend on the key, the whole key, and nothing but the key.
           </li>
         </ul>
       </section>
@@ -648,7 +648,7 @@ <h3>Requirements</h3>
          data-rel-position="relative"
          data-rel-x="0"
          data-rel-y="2000">
-      <section>
+      <section class="fade-in fade-out">
         <table class="db-table" aria-label="data">
           <caption>Player Level</caption>
           <thead>
@@ -683,7 +683,7 @@ <h3>Requirements</h3>
          data-rel-position="relative"
          data-rel-x="0"
          data-rel-y="-1000">
-      <div>
+      <section class="fade-in">
         <div class="text-center fly-in">
           <i class="i-fail"></i><code>{ username } <-- { level }</code>
         </div>
@@ -698,20 +698,20 @@ <h3>Requirements</h3>
           <tbody>
           <tr id="table--3nf__prombery87">
             <td class="primary-key">prombery87</td>
-            <td>7</td>
+            <td class="text-center">7</td>
           </tr>
           <tr id="table--3nf__wheed1997">
             <td class="primary-key">wheed1997</td>
-            <td>6</td>
+            <td class="text-center">6</td>
           </tr>
           <tr id="table--3nf__acen1999">
             <td class="primary-key">acen1999</td>
-            <td>1</td>
+            <td class="text-center">1</td>
           </tr>
           </tbody>
         </table>
-      </div>
-      <div>
+      </section>
+      <section class="fade-in">
         <table class="db-table" aria-label="data">
           <caption>Level Ranking</caption>
           <thead>
@@ -722,54 +722,54 @@ <h3>Requirements</h3>
           </thead>
           <tbody>
           <tr id="table--3nf__level-1">
-            <td>1</td>
+            <td class="primary-key">1</td>
             <td>Beginner</td>
           </tr>
           <tr id="table--3nf__level-2">
-            <td>2</td>
+            <td class="primary-key">2</td>
             <td>Beginner</td>
           </tr>
           <tr id="table--3nf__level-3">
-            <td>3</td>
+            <td class="primary-key">3</td>
             <td>Beginner</td>
           </tr>
           <tr id="table--3nf__level-4">
-            <td>4</td>
+            <td class="primary-key">4</td>
             <td>Intermediate</td>
           </tr>
           <tr id="table--3nf__level-5">
-            <td>5</td>
+            <td class="primary-key">5</td>
             <td>Intermediate</td>
           </tr>
           <tr id="table--3nf__level-6">
-            <td>6</td>
+            <td class="primary-key">6</td>
             <td>Intermediate</td>
           </tr>
           <tr id="table--3nf__level-7">
-            <td>7</td>
+            <td class="primary-key">7</td>
             <td>Advanced</td>
           </tr>
           <tr id="table--3nf__level-8">
-            <td>8</td>
+            <td class="primary-key">8</td>
             <td>Advanced</td>
           </tr>
           <tr id="table--3nf__level-9">
-            <td>9</td>
+            <td class="primary-key">9</td>
             <td>Advanced</td>
           </tr>
           </tbody>
         </table>
         <div class="text-center fly-in">
           <i class="i-pass"></i><code>{ level } <-- { rank }</code>
         </div>
-      </div>
+      </section>
     </div>
 
     <div class="step overview" id="overview--3nf"
          data-rel-position="relative"
          data-rel-x="0"
-         data-rel-y="450"
-         data-scale="3">
+         data-rel-y="-350"
+         data-scale="2">
     </div>
     <!-- overview -->
     <div class="step overview" id="overview" data-rel-position="absolute" data-x="0" data-y="0" data-scale="7"></div>