🚧 Site > Improve demo

site/src/javascript/Demo.js

@@ -5,6 +5,7 @@ export default class Demo
 {
     constructor()
     {
+        this.step = 0
         this.$container = document.querySelector('.js-demo')
 
         // Speaker
@@ -13,18 +14,101 @@ export default class Demo
         this.$speakerVideo = document.createElement('video')
         this.$speakerVideo.src = speaker
         this.$speakerVideo.height = 300
-        this.$speakerVideo.autoplay = true
 
         this.$speaker.appendChild(this.$speakerVideo)
 
+        this.speakerCurrentTime = 0
+
         // Audience
         this.$audience = this.$container.querySelector('.js-audience')
 
         this.$audienceVideo = document.createElement('video')
         this.$audienceVideo.src = audience
         this.$audienceVideo.height = 300
-        this.$audienceVideo.autoplay = true
 
         this.$audience.appendChild(this.$audienceVideo)
+
+        this.audienceCurrentTime = 0
+
+        // Go step
+        window.setTimeout(() =>
+        {
+            this.goStep(0)
+        }, 1000)
+
+        /**
+         * Loop
+         */
+        this.setLoop()
+    }
+
+    /**
+     * Set loop
+     */
+    setLoop()
+    {
+        const loop = () =>
+        {
+            window.requestAnimationFrame(loop)
+
+            this.loop()
+        }
+
+        loop()
+    }
+
+    /**
+     * Loop
+     */
+    loop()
+    {
+        if(this.speakerCurrentTime < 7 && this.$speakerVideo.currentTime >= 7)
+        {
+            this.goStep(2)
+        }
+
+        if(this.audienceCurrentTime < 0.85 && this.$audienceVideo.currentTime >= 0.85)
+        {
+            this.goStep(3)
+        }
+
+        this.speakerCurrentTime = this.$speakerVideo.currentTime
+        this.audienceCurrentTime = this.$audienceVideo.currentTime
+    }
+
+    /**
+     * Go to step
+     */
+    goStep(index)
+    {
+        console.log(index)
+        // // Remove old step class
+        // if(this.step !== null)
+        // {
+        //     this.$container.classList.remove(`step-${this.step}`)
+        // }
+
+        // Add new step class
+        this.step = index
+        this.$container.classList.add(`step-${this.step}`)
+
+        // Cases
+        switch(this.step)
+        {
+            case 0:
+                this.$speakerVideo.play()
+                    .then(() =>
+                    {
+                        this.goStep(1)
+                    })
+                break
+
+            case 1:
+                break
+
+            case 2:
+                this.$audienceVideo.play()
+                break
+        }
     }
 }

site/src/style/header.styl

@@ -91,14 +91,18 @@ section.header
         position absolute
         top 520px
         left 50%
-        width 1px
-        height 1px
-        background #ffffff
 
         .speaker
             position absolute
             top -150px
             left -245px
+            opacity 0
+            overflow hidden
+            transition transform 0.75s, opacity 0.75s
+            will-change transform
+
+            video
+                border-radius 5px
 
             .icon
                 position absolute
@@ -114,7 +118,14 @@ section.header
             position absolute
             top -150px
             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)
@@ -125,6 +136,54 @@ section.header
                 background-repeat no-repeat
                 background-position center center
 
+            .url-bar
+                position absolute
+                top 1.5%
+                left 30%
+                right 30%
+                height 7.5%
+                border-radius 3px
+                background #adadad
+
+            .white-cache
+                position absolute
+                top 0
+                left 30%
+                right 6px
+                height 10.7%
+                background #fffeff
+
+        .url
+            position absolute
+            top -30px
+            left 61px
+            font-size 13px
+            letter-spacing 0.4px
+            font-family Courier
+            color #ffffff
+            opacity 0
+            transform translateX(0px) translateY(0px)
+            transition transform 1s cubic-bezier(0.75, 0, 0.58, 1)
+            will-change transform
+
+        &.step-1
+            .speaker
+                opacity 1
+
+        &.step-2
+            .speaker
+                transform translateX(60%)
+
+            .audience
+                transform translateX(-60%)
+                transition-delay 0.15s, 0.15s
+                opacity 1
+
+        &.step-3
+            .url
+                opacity 1
+                transform translateX(-432px) translateY(-111px)
+
     .get-started-button
         position absolute
         bottom 130px