css-harris-shutter-effect/index.html at master · yatskevich/css-harris-shutter-effect · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!doctype>
<html>
<head>
  <title>Harris Shutter effect</title>
  <link href='http://fonts.googleapis.com/css?family=Raleway:900' rel='stylesheet' type='text/css' />

  <style>
  * {
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
  }

  .container {
    width: 400px;
    height: 120px;
    padding: 100px;
    border: 1px solid #ccc;
    border-radius: 600px;

    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
  }

  h1 {
    text-align: center;
    font-size: 48px;
  }

  @-webkit-keyframes harris-shutter-shake {

    0% {
      text-shadow: 0 0 0 rgba(49, 255, 254, 0.7), 0 0 0 rgba(248, 0, 251, 0.7), 0 0 0 rgba(255, 255, 44, 0.9);
      box-shadow: 0 0 0 rgba(49, 255, 254, 0.7), 0 0 0 rgba(248, 0, 251, 0.7), 0 0 0 rgba(255, 255, 44, 0.9);
    }

    25% {
      text-shadow: 5px 5px 0 rgba(49, 255, 254, 0.3), 5px -5px 0 rgba(248, 0, 251, 0.3), -10px 0 0 rgba(255, 255, 44, 0.3);
      box-shadow: 5px 5px 0 rgba(49, 255, 254, 0.3), 5px -5px 0 rgba(248, 0, 251, 0.3), -10px 0 0 rgba(255, 255, 44, 0.3);
    }

    50% {
      text-shadow: 0 10px 0 rgba(49, 255, 254, 0.3), -5px -5px 0 rgba(248, 0, 251, 0.3), 10px 0 0 rgba(255, 255, 44, 0.9);
      box-shadow: 0 10px 0 rgba(49, 255, 254, 0.3), -5px -5px 0 rgba(248, 0, 251, 0.3), 10px 0 0 rgba(255, 255, 44, 0.9);
    }

    75% {
      text-shadow: -5px 5px 0 rgba(49, 255, 254, 0.7), -5px 0 0 rgba(248, 0, 251, 0.7), -10px 0 0 rgba(255, 255, 44, 0.3);
      box-shadow: -5px 5px 0 rgba(49, 255, 254, 0.7), -5px 0 0 rgba(248, 0, 251, 0.7), -10px 0 0 rgba(255, 255, 44, 0.3);
    }

  }

  .animated {
    -webkit-animation-name: harris-shutter-shake;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-out;
  }

  </style>
  <script type='text/javascript' src='http://zeptojs.com/zepto.min.js'><!-- --></script>
</head>
<body>
<div class="container harris-shutter">
  <h1>Harris Shutter</h1>
</div>
<script type="text/javascript">
  $(function() {
    $('.harris-shutter').on('mouseenter', function() {
      $(this).addClass('animated');
    }).on('mouseleave', function() {
      $(this).removeClass('animated');
    });
  });
</script>
</body>
</html>