furk4ngg/keppler
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🚧 Site > Improve demo

Browse Source
This commit is contained in:
brunosimon
2017-12-31 16:08:19 +01:00
parent 7c2196c271
commit fd45eb3570
6 changed files with 175 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/index.html
+3
View File
@@ -62,7 +62,10 @@
</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
+86 -2
View File
@@ -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
+62 -3
View File
@@ -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
site/static/svg/demo-audience.svg
+1 -14
View File
@@ -1,14 +1 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.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"
viewBox="0 0 100 120.9" style="enable-background:new 0 0 100 120.9;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g>
<rect x="56.9" y="10.4" class="st0" width="10.1" height="20.7"/>
<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>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90.04 80.57"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Fichier 1</title><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path class="cls-1" d="M56.57,53.29a3.06,3.06,0,0,0-3.3-.37A18.48,18.48,0,0,1,36.6,53a3,3,0,0,0-3.22.35C28.16,57.59,24.75,64,24.75,69c0,8.14,9.08,11.59,20.27,11.59S65.29,77.12,65.29,69C65.29,64,61.84,57.51,56.57,53.29Z"/><circle class="cls-1" cx="45.02" cy="36.42" r="12.5"/><circle class="cls-1" cx="45.02" cy="9.21" r="9.21"/><path class="cls-1" d="M83.61,34.59a2.26,2.26,0,0,0-2.43-.27,13.63,13.63,0,0,1-12.29.08,2.22,2.22,0,0,0-2.38.26c-3.85,3.11-6.36,7.83-6.36,11.51,0,6,6.69,8.54,14.94,8.54S90,52.16,90,46.16C90,42.46,87.5,37.7,83.61,34.59Z"/><circle class="cls-1" cx="75.1" cy="22.15" r="9.21"/><path class="cls-1" d="M29.89,46.16c0-3.7-2.54-8.46-6.43-11.57A2.26,2.26,0,0,0,21,34.32a13.63,13.63,0,0,1-12.29.08,2.22,2.22,0,0,0-2.38.26C2.51,37.76,0,42.48,0,46.16c0,6,6.69,8.54,14.94,8.54S29.89,52.16,29.89,46.16Z"/><circle class="cls-1" cx="14.94" cy="22.15" r="9.21"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 760 B

After

Width:  |  Height:  |  Size: 1.1 KiB

site/static/svg/demo-speaker.svg
+14 -1
View File
@@ -1 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90.04 80.57"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Fichier 1</title><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path class="cls-1" d="M56.57,53.29a3.06,3.06,0,0,0-3.3-.37A18.48,18.48,0,0,1,36.6,53a3,3,0,0,0-3.22.35C28.16,57.59,24.75,64,24.75,69c0,8.14,9.08,11.59,20.27,11.59S65.29,77.12,65.29,69C65.29,64,61.84,57.51,56.57,53.29Z"/><circle class="cls-1" cx="45.02" cy="36.42" r="12.5"/><circle class="cls-1" cx="45.02" cy="9.21" r="9.21"/><path class="cls-1" d="M83.61,34.59a2.26,2.26,0,0,0-2.43-.27,13.63,13.63,0,0,1-12.29.08,2.22,2.22,0,0,0-2.38.26c-3.85,3.11-6.36,7.83-6.36,11.51,0,6,6.69,8.54,14.94,8.54S90,52.16,90,46.16C90,42.46,87.5,37.7,83.61,34.59Z"/><circle class="cls-1" cx="75.1" cy="22.15" r="9.21"/><path class="cls-1" d="M29.89,46.16c0-3.7-2.54-8.46-6.43-11.57A2.26,2.26,0,0,0,21,34.32a13.63,13.63,0,0,1-12.29.08,2.22,2.22,0,0,0-2.38.26C2.51,37.76,0,42.48,0,46.16c0,6,6.69,8.54,14.94,8.54S29.89,52.16,29.89,46.16Z"/><circle class="cls-1" cx="14.94" cy="22.15" r="9.21"/></g></g></svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.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"
viewBox="0 0 100 120.9" style="enable-background:new 0 0 100 120.9;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g>
<rect x="56.9" y="10.4" class="st0" width="10.1" height="20.7"/>
<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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 760 B