Applications

- 4 pictures
- Previous slide now becomes semi-transparent
- Animations

src/doc/_applications.html

+<h1 id="title">Some Applications</h1>
+<div id="images">
+  <img src="img/applications-medical-imaging.png" alt="">
+  <img src="img/applications-augmented-reality.png" alt="">
+  <img src="img/applications-object-annotation.png" alt="">
+  <img src="img/applications-object-recognition.png" alt="">
+</div>
+

src/doc/index.html

@@ -12,6 +12,7 @@
     <div id="canvas">
       %cover%
       %image-segmentation%
+      %applications%
     </div>
   </div>
   <div id="scrubber">

src/doc/scss/ift.scss

@@ -7,3 +7,4 @@
 @import "module/scrubber";
 @import "module/cover";
 @import "module/image-segmentation";
+@import "module/applications";

src/doc/scss/module/_applications.scss

+#applications {
+  transform: translate(20vw, -25vh);
+  display: flex;
+  flex-direction: column;
+  width: 70vw;
+}
+#applications-images {
+  display: flex;
+  img {
+    flex: 1;
+  }
+}
+#applications-title {
+  text-align: right;
+}
\ No newline at end of file

src/doc/scss/module/_image-segmentation.scss

-<<<<<<< HEAD
-#image-segmentation-image {
-
-}
-
-#image-segmentation-result {
-  
-=======
 #image-segmentation {
   transform: translate(0vw, -20vh);
   padding: 2vmin;
@@ -15,5 +7,4 @@
 }
 #image-segmentation-images {
   display: flex;
->>>>>>> Cover, Deck, Scrubber, Transitions, Animations
 }
\ No newline at end of file

src/doc/ts/ift.ts

@@ -16,6 +16,8 @@ document.addEventListener("DOMContentLoaded", () => {
   const imageSegmentationImage = $("image-segmentation-image");
   const imageSegmentationMask = $("image-segmentation-mask");
   const imageSegmentationResult = $("image-segmentation-result");
+  const applicationsTitle = $("applications-title");
+  const applicationsImages = $("applications-images");
 
   let deck: Deck;
 
@@ -38,10 +40,14 @@ document.addEventListener("DOMContentLoaded", () => {
 
   deck.addElementAnimation(coverTitle, [0, 1000], fx.fxFadeInLeft);
   deck.addElementAnimation(coverDetails, [0, 1000], fx.fxFadeInLeft);
+  deck.addElementAnimation(cover, [1000, 1500], fx.fxFadeOutSemi);
   deck.addElementAnimation(imageSegmentationTitle, [1500, 2000], fx.fxFadeIn);
   deck.addElementAnimation(imageSegmentationImage, [2000, 2500], fx.fxFadeIn);
   deck.addElementAnimation(imageSegmentationMask, [2500, 3000], fx.fxFadeIn);
   deck.addElementAnimation(imageSegmentationResult, [3000, 3500], fx.fxFadeIn);
+  deck.addElementAnimation(imageSegmentation, [3500, 4000], fx.fxFadeOutSemi);
+  deck.addElementAnimation(applicationsTitle, [3500, 4000], fx.fxFadeInLeft);
+  deck.addElementAnimation(applicationsImages, [3800, 4300], fx.fxFadeIn);
 
   // deck.add(coverTitle.animate(fx.fxFadeInLeft, { easing: "ease-in-out", duration: 1000 }));
   // deck.add(coverDetails.animate(fx.fxFadeInLeft, {duration: 1000, delay: 0, easing: "ease-in-out"}));