✨ Site > Demo > Improve

site/index.html

@@ -57,15 +57,51 @@
             <h2 class="sub-title">Real-time code sharing for your lectures and presentations</h2>
 
             <div class="demo js-demo">
+
+                <div class="bars">
+                    <div class="bar color-1 size-1 animation-1 pos-1"></div>
+                    <div class="bar color-2 size-1 animation-2 pos-2"></div>
+                    <div class="bar color-3 size-1 animation-3 pos-3"></div>
+                    <div class="bar color-4 size-1 animation-4 pos-4"></div>
+
+                    <div class="bar color-1 size-1 animation-5 pos-5"></div>
+                    <div class="bar color-2 size-1 animation-6 pos-6"></div>
+                    <div class="bar color-3 size-1 animation-7 pos-7"></div>
+                    <div class="bar color-4 size-1 animation-8 pos-8"></div>
+
+                    <div class="bar color-1 size-2 animation-13 pos-13"></div>
+                    <div class="bar color-2 size-2 animation-14 pos-14"></div>
+                    <div class="bar color-3 size-2 animation-15 pos-15"></div>
+                    <div class="bar color-4 size-2 animation-16 pos-16"></div>
+
+                    <div class="bar color-1 size-2 animation-17 pos-17"></div>
+                    <div class="bar color-2 size-2 animation-18 pos-18"></div>
+                    <div class="bar color-3 size-2 animation-19 pos-19"></div>
+                    <div class="bar color-4 size-2 animation-20 pos-20"></div>
+
+                    <div class="bar color-1 size-3 animation-25 pos-25"></div>
+                    <div class="bar color-2 size-3 animation-26 pos-26"></div>
+                    <div class="bar color-3 size-3 animation-27 pos-27"></div>
+                    <div class="bar color-4 size-3 animation-28 pos-28"></div>
+
+                    <div class="bar color-1 size-3 animation-29 pos-29"></div>
+                    <div class="bar color-2 size-3 animation-30 pos-30"></div>
+                    <div class="bar color-3 size-3 animation-31 pos-31"></div>
+                    <div class="bar color-4 size-3 animation-32 pos-32"></div>
+                </div>
+
                 <div class="speaker js-speaker">
                     <div class="icon"></div>
                 </div>
+
                 <div class="audience js-audience">
                     <div class="icon"></div>
                     <div class="white-cache"></div>
                     <div class="url-bar"></div>
                 </div>
+
                 <div class="url">http://192.168.1.13</div>
+
             </div>
 
             <a class="get-started-button js-scroll-item" href="#get-started">

site/src/javascript/Demo.js

@@ -72,6 +72,16 @@ export default class Demo
             this.goStep(3)
         }
 
+        if(this.speakerCurrentTime < 15.5 && this.$speakerVideo.currentTime >= 15.5)
+        {
+            this.goStep(4)
+        }
+
+        if(this.speakerCurrentTime < 17.5 && this.$speakerVideo.currentTime >= 17.5)
+        {
+            this.goStep(5)
+        }
+
         this.speakerCurrentTime = this.$speakerVideo.currentTime
         this.audienceCurrentTime = this.$audienceVideo.currentTime
     }

site/src/style/header.styl

@@ -1,3 +1,6 @@
+random(min, max)
+    return math(0, 'random')*(max - min + 1) + min
+
 section.header
     height 940px
     position relative
@@ -97,7 +100,6 @@ section.header
             top -150px
             left -245px
             opacity 0
-            overflow hidden
             transition transform 0.75s, opacity 0.75s
             will-change transform
 
@@ -120,12 +122,12 @@ section.header
             left -245px
             transform translateX(-120%)
             opacity 0
-            overflow hidden
             transition transform 0.75s, opacity 0.75s
             will-change transform
 
             video
                 border-radius 5px
+
             .icon
                 position absolute
                 left calc(50% - 20px)
@@ -166,6 +168,62 @@ section.header
             transition transform 1s cubic-bezier(0.75, 0, 0.58, 1)
             will-change transform
 
+        .bars
+            position absolute
+            top 0
+            left 0
+            opacity 0
+            transition opacity 0.5s
+            will-change opacity
+
+            .bar
+                position absolute
+                top 0
+                left 0
+                animation-name header-bar-translation
+                animation-iteration-count infinite
+                animation-timing-function linear
+                animation-play-state paused
+                will-change transform
+
+                &.color-1
+                    background #a3d1c6
+
+                &.color-2
+                    background #ffffff
+
+                &.color-3
+                    background #e67553
+
+                &.color-4
+                    background #fbfb8c
+
+                &.size-1
+                    width 100px
+                    height 5px
+
+                &.size-2
+                    width 60px
+                    height 3px
+
+                &.size-3
+                    width 80px
+                    height 4px
+
+                for $num in (0..50)
+                    &.animation-{$num}
+                        animation-duration unit(random(0.2, 0.5), 's')
+
+                for $num in (0..50)
+                    &.pos-{$num}
+                        top unit(random(-50, 50), 'px')
+
+            @keyframes header-bar-translation
+                0%
+                    transform translateX(200px)
+                100%
+                    transform translateX(-200px)
+
         &.step-1
             .speaker
                 opacity 1
@@ -184,6 +242,20 @@ section.header
                 opacity 1
                 transform translateX(-432px) translateY(-111px)
 
+        &.step-4
+            .bars
+                opacity 1
+
+                .bar
+                    animation-play-state running
+
+        &.step-5
+            .bars
+                opacity 0
+
+                .bar
+                    animation-play-state running
+
     .get-started-button
         position absolute
         bottom 130px

site/static/svg/demo-speaker.svg

@@ -1,14 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 100 120.9" style="enable-background:new 0 0 100 120.9;" xml:space="preserve">
+	 viewBox="0 0 185.3 296.7" style="enable-background:new 0 0 185.3 296.7;" xml:space="preserve">
-<style type="text/css">
+<polygon style="fill:#FFFFFF;" points="38,296.7 38,269.7 50.7,269.7 31.3,177.7 11.3,177.7 0,141 185.3,141 174.7,177.7 
-	.st0{fill:#FFFFFF;}
+	155.9,177.7 137.7,269.7 149.6,269.7 149.6,296.7 "/>
-</style>
+<polygon style="fill:#FFFFFF;" points="47.3,135.7 46.3,129 43.3,135.7 17.3,135.7 39,83 70,71 82.3,117.7 88.7,85.7 84.7,85.7 
-<g>
+	84.7,73.7 100.9,73.7 100.9,85.7 96.8,85.7 103.4,117.7 116.1,71 148.2,83 170.7,135.7 143.7,135.7 140.6,129 139.6,135.7 "/>
-	<rect x="56.9" y="10.4" class="st0" width="10.1" height="20.7"/>
+<circle style="fill:#FFFFFF;" cx="92" cy="35" r="35"/>
-	<path class="st0" d="M84.2,0H5.4C2.4,0,0,2.4,0,5.4v85.9c0,3,2.4,5.4,5.4,5.4h89.1c3,0,5.4-2.4,5.4-5.4V15.5L84.2,0z M19.6,10.8
-		C19.6,8.1,22,6,25,6H75c3,0,5.4,2.2,5.4,4.8v19.8c0,2.6-2.4,4.8-5.4,4.8H25c-3,0-5.4-2.2-5.4-4.8V10.8L19.6,10.8z M86,86.6H14V44.8
-		h72V86.6z"/>
-</g>
 </svg>