STYLUS
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
$bg-color = #111
$txt-color = #fff
$color-c1 = red
$color-c2 = blue
$offset-c1 = 3
$offset-c2 = 2
$lay-c1 = 2
$lay-c2 = 2
*,
*:before,
*:after
margin: 0
padding: 0
border: 0
outline: 0
box-sizing: border-box
user-select: none
html,
body
height: 100%
body
font-family: 'Lato', sans-serif
font-weight: 700
background: $bg-color
color: $txt-color
a.switcher
display: block
position: fixed
text-decoration: none
z-index: 999999999999
right: 20px
bottom: 20px
width: 16px
height: 16px
background: transparent
border: 2px solid $txt-color
border-radius: 50%
opacity: .15
transition: opacity .150s
&:hover
opacity: 1
&:before
display: block
content: ''
position: absolute
border-radius: 4px
width: 2px
height: 5px
background: $txt-color
top: 0
left: 5px
.screen
position: relative
z-index: 1
widht: 100%
height: 100%
overflow: hidden
.figure
display: block
position: absolute
z-index: 1
width: 0
height: 0
top: 0
right: 0
bottom: 0
left: 0
margin: auto
border-top: 200px solid $txt-color
border-right: 100px solid transparent
border-left: 100px solid transparent
border-bottom: 0 solid transparent
&:before
display: block
content: ''
position: absolute
z-index: 99
width: 0
height: 0
top: -194px
left: -90px
margin: auto
border-top: 180px solid $bg-color
border-right: 90px solid transparent
border-left: 90px solid transparent
border-bottom: 0 solid transparent
.figure-mask
display: block
position: absolute
z-index: 99
width: 0
height: 0
top: 0
right: 0
bottom: 0
left: 0
margin: auto
border-top: 200px solid transparent
border-right: 100px solid $bg-color
border-left: 100px solid $bg-color
border-bottom: 0 solid transparent
.clock
display: block
position: absolute
z-index: 9
width: 720px
height: 128px
text-align: center
top: 0
right: 0
bottom: 0
left: 0
margin: auto
cursor: default
span
display: block
position: relative
font-size: 128px
line-height: 1
&.is-off
animation: is-off 2s linear infinite !important
.glitch
&:before
position: absolute
z-index: 999999
content: ''
top: 0
right: 0
bottom: 0
left: 0
animation: bg-move 2s linear infinite
background-size: 100% 8px
background-image: linear-gradient(0, rgba(255,255,255,.05) 10%, transparent 10%, transparent 50%, rgba(255,255,255,.05) 50%, rgba(255,255,255,.05) 60%, transparent 60%, transparent)
.figure,
.figure-mask
transform: skewX(0deg) scaleY(1)
animation: tr-bag 4s linear infinite
.clock
transform: skewX(0deg) scaleY(1)
animation: clock-bag 4s linear infinite
span
&:before,
&:after
display: block
content: attr(data-time)
position: absolute
top: 0
color: $txt-color
background: $bg-color
overflow: hidden
width: 720px
height: 128px
clip: rect(0,900px,0,0)
&:before
left: -($offset-c2)px
text-shadow: ($lay-c2)px 0 $color-c2
animation: c2 1s infinite linear alternate-reverse
&:after
left: ($offset-c1)px
text-shadow: -($lay-c1)px 0 $color-c1
animation: c1 2s infinite linear alternate-reverse
// animation
random(val)
return math(math(0, 'random') * val + 1, 'floor')
@keyframes is-off
0%
opacity: 1
50%
opacity: 1
56%
opacity: 0
57%
opacity: 0
58%
opacity: 1
71%
transform: scaleY(1) skewX(0deg)
72%
transform: scaleY(3) skewX(-60deg)
73%
transform: scaleY(1) skewX(0deg)
80%
opacity: 1
81%
opacity: 0
84%
opacity: 0
85%
opacity: 1
91%
transform: scaleX(1) scaleY(1) skewX(0deg)
color: $txt-color
92%
transform: scaleX(1.5) scaleY(.2) skewX(80deg)
color: green
93%
transform: scaleX(1) scaleY(1) skewX(0deg)
color: $txt-color
@keyframes c1
for i in (0..20)
{i*(1/20)*10*10%}
clip: rect( random(100)px, 9999px, random(100)px, 0);
@keyframes c2
for i in (0..20)
{i*(1/20)*10*10%}
clip: rect( random(100)px, 9999px, random(100)px, 0);
23%
transform: scaleX(.8);
@keyframes clock-bag
for i in (0..50)
{i*(1/50)*10*10%}
transform: translate(random(5)px, random(5)px)
1%
transform: scaleY(1) skewX(0deg)
1.5%
transform: scaleY(3) skewX(-60deg)
2%
transform: scaleY(1) skewX(0deg)
51%
transform: scaleX(1) scaleY(1) skewX(0deg)
52%
transform: scaleX(1.5) scaleY(.2) skewX(80deg)
53%
transform: scaleX(1) scaleY(1) skewX(0deg)
@keyframes tr-bag
for i in (0..50)
{i*(1/50)*10*10%}
transform: translate(random(5)px, random(5)px)
1%
transform: scaleY(1) skewX(0deg)
1.5%
transform: scaleY(3) skewX(-60deg)
2%
transform: scaleY(1) skewX(0deg)
51%
transform: scaleX(1) scaleY(1) skewX(0deg)
52%
transform: scaleX(1.5) scaleY(.2) skewX(80deg)
53%
transform: scaleX(1) scaleY(1) skewX(0deg)
@keyframes bg-move
0%
background-position: 0 0
100%
background-position: 0 -32px
COFFEE
secondPassed = ->
$ '.clock'
.removeClass 'is-off'
setTimeout secondPassed, 2000
$('.switcher').on 'click', (e) ->
do e.preventDefault
$ '.screen'
.toggleClass 'glitch'
date = new Date()
date.setDate date.getDate()
setInterval ( ->
h = ( new Date ).getHours()
s = ( new Date ).getSeconds()
m = ( new Date ).getMinutes()
realTime = ( if h < 10 then '0' else '' ) + h + ' : '
realTime = "#{( if h < 10 then '0' else '' ) + h} : #{( if m < 10 then '0' else '' ) + m} : #{( if s < 10 then '0' else '' ) + s}"
$ '.time'
.html realTime
.attr 'data-time', realTime
), 1000
1 Response