Glitch Clock

glitch-clock.markdown

Glitch Clock

facebook.com/dtw.hello

A Pen by Captain Anonymous on CodePen.

License.

index.jade

a(href='#').switcher

.screen.glitch
  .clock.is-off
    span(data-time='').time
  .figure
  .figure-mask

script.js

$(document).ready(function () {

  function second_passed() {
    $('.clock').removeClass('is-off');
  }
  setTimeout(second_passed, 2000)

  $('.switcher').on('click', function(e) {
    e.preventDefault();
    $('.screen').toggleClass('glitch');
  });


  var newDate = new Date();
  newDate.setDate(newDate.getDate());

  setInterval( function() {

    var hours    = new Date().getHours();
    var seconds  = new Date().getSeconds();
    var minutes  = new Date().getMinutes();

    var realTime = ( hours < 10 ? '0' : '' ) + hours + ' : ' + ( minutes < 10 ? '0' : '' ) + minutes + ' : ' + ( seconds < 10 ? '0' : '' ) + seconds

    $('.time').html(realTime);
    $('.time').attr('data-time', realTime);

  }, 1000);

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.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