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

✨ Site > Demo > Improve

Browse Source
This commit is contained in:
brunosimon
2017-12-31 18:31:03 +01:00
parent fd45eb3570
commit 59a6846d84
4 changed files with 128 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/index.html
+36
View File
@@ -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
+10
View File
@@ -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
+74 -2
View File
@@ -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
+8 -12
View File
@@ -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) -->
<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>
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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 185.3 296.7" style="enable-background:new 0 0 185.3 296.7;" xml:space="preserve">
<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
155.9,177.7 137.7,269.7 149.6,269.7 149.6,296.7 "/>
<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
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 "/>
<circle style="fill:#FFFFFF;" cx="92" cy="35" r="35"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 760 B

After

Width:  |  Height:  |  Size: 839 B