gaspargergo.github.io/diagonal.html at master · gaspargergo/gaspargergo.github.io · 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
<!DOCTYPE html>
<html>
  <head>
    <title>Diagonal</title>
    <style>

      body{
        overflow: hidden;
        margin: 0 0 0 0;
      }

      .line {
        background-color: crimson;
        height: 100px;
        margin-left: -1925px;
        margin-bottom: 100px;

        -webkit-transform: skewY(-45deg);
        -moz-transform: skewY(-45deg);
        -ms-transform: skewY(-45deg);
        -o-transform: skewY(-45deg);
        transform: skewY(-45deg);

        transition: all 0.5s ease-in-out;
      }

    </style>
  </head>
  <body>

    <script type="text/javascript">

      /*
         _____     _____     _____
        | ____|   / ___ \   |  __ \
        | |___   | /   \ |  | |__| |
        | ____|  | |   | |  |    _/
        | |      | \___/ |  | |\ \
        |_|       \_____/   |_| \_\

         _____        _        __    _        _____    _            _    _       _    _    __    _
        |  __ \      / \      |  \  | |      | ____|  | |          / \  \ \     / /  | |  |  \  | |
        | |  \ |    / _ \     |   \ | |      | |___   | |         / _ \  \ \   / /   | |  |   \ | |
        | |  | |   / /_\ \    | |\ \| |      | ____|  | |        / /_\ \  \ \_/ /    | |  | |\ \| |
        | |__/ |  / _____ \   | | \ \ |      | |      | |___    / _____ \  \   /     | |  | | \ \ |
        |_____/  /_/     \_\  |_|  \__|      |_|      |_____|  /_/     \_\  \_/      |_|  |_|  \__|

      */
      console.log("FOR DAN FLAVIN");

      var body = document.body;
      var lines = Math.round(window.innerWidth/50);

      for(var i = 0; i < lines; i++){
        body.innerHTML += '<div class="line"></div>';
      }

      setInterval(colorChange,2000);

      function colorChange(){
        var linesArr = document.getElementsByClassName('line');
        var color = '#'+ Math.random().toString(16).slice(-6);

        for(var i = 0; i < linesArr.length;i++){
          linesArr[i].style.backgroundColor = color;
        }
      }

    </script>
  </body>
</html>