Dalam rangka memperingati HUT RI yang ke-77 di sini saya akan membuat animasi bendera merah putih dan lirik lagu Indonesia Raya. Mari kita buat.

Pertama-tama buatlah folder dengan nama hut-ri. Buka foldernya dan buat file index.html. Kemudian masukkan kode berikut.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HUT RI Ke-77</title>
</head>
<body>
    
</body>
</html>

Silahkan download gambar bendera merah putih. Download bendera merah putih.

Pindahkan gambar bendera merah putih ke folder HUT RI.

Buka file index.html dan masukkan kode berikut setelah <body>

 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
<div class="container">         
      <div class="wrapper" style="--url: url('bendera.webp')">
        <div class="s s0">
          <div class="s s1">
            <div class="s s2">
              <div class="s s3">
                <div class="s s4">
                  <div class="s s5">
                    <div class="s s6">
                      <div class="s s7">
                        <div class="s s8">
                          <div class="s s9">
                            <div class="s s10">
                              <div class="s s11">
                                <div class="s s12">
                                  <div class="s s13">
                                    <div class="s s14">
                                      <div class="s s15">
                                        <div class="s s16">
                                          <div class="s s17">
                                            <div class="s s18">
                                              <div class="s s19">
                                                <div class="s s20">
                                                  <div class="s s21">
                                                    <div class="s s22">
                                                      <div class="s s23">
                                                        <div class="s s24"></div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

Kode di atas nantinya akan menjadi bendera, dan untuk kelas s untuk efek berkibarnya bendera.

Buat file dengan nama style.css di folder HUT RI. Kemudian masukkan kode berikut.

 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
*,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
body {
  height: 100vh;
  background: #eceff1;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 800px;
  overflow: hidden;
  box-sizing: border-box;
}
.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 700px;
  transform-style: preserve-3d;
}
.wrapper {
  position: relative;
  width: 360px;
  height: 180px;
  transform: rotateY(20deg) skew(5deg);
  transform-style: preserve-3d;
  background-image: var(--url);
  background-size: 0;
  background-position: -200% -200%;
}
.wrapper::before {
  content: "";
  display: block;
  position: absolute;
  width: 7.5px;
  height: 720px;
  background: linear-gradient(to left, #fff, #ccc, #fff, #fff);
  left: 7px;
}

Setelah memasukkan kode di atas, buka Kembali file index.html dan embed style.css ke index.html. Jadi di file index.html pada bagian head akan seperti ini.

1
2
3
4
5
6
7
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HUT RI Ke-77</title>
    <link rel="stylesheet" href="style.css">
  </head>

Silahkan simpan dan coba buka file index.html dengan browser. Akan tampil tiang bendera. Nah untuk membuat benderanya muncul dan berkibar buka file style.css dan masukkan kode berikut.

  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
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
.s {
  position: absolute;
  transform-style: preserve-3d;
  left: 14px;
  width: 15px;
  height: 100%;
  transform-origin: 0 0;
  background-repeat: no-repeat;
  background-size: 360px 100%;
  transform: translateZ(0.0001px) rotateY(14.1176470588deg);
  background-image: inherit;
  animation-name: wave;
  animation-timing-function: ease-in-out;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
.s1 {
  background-position-x: -15px;
  animation-delay: 0.08s;
}
.s2 {
  background-position-x: -30px;
  animation-delay: 0.16s;
}
.s3 {
  background-position-x: -45px;
  animation-delay: 0.24s;
}
.s4 {
  background-position-x: -60px;
  animation-delay: 0.32s;
}
.s5 {
  background-position-x: -75px;
  animation-delay: 0.4s;
}
.s6 {
  background-position-x: -90px;
  animation-delay: 0.48s;
}
.s7 {
  background-position-x: -105px;
  animation-delay: 0.56s;
}
.s8 {
  background-position-x: -120px;
  animation-delay: 0.64s;
}
.s9 {
  background-position-x: -135px;
  animation-delay: 0.72s;
}
.s10 {
  background-position-x: -150px;
  animation-delay: 0.8s;
}
.s11 {
  background-position-x: -165px;
  animation-delay: 0.88s;
}
.s12 {
  background-position-x: -180px;
  animation-delay: 0.96s;
}
.s13 {
  background-position-x: -195px;
  animation-delay: 1.04s;
}
.s14 {
  background-position-x: -210px;
  animation-delay: 1.12s;
}
.s15 {
  background-position-x: -225px;
  animation-delay: 1.2s;
}
.s16 {
  background-position-x: -240px;
  animation-delay: 1.28s;
}
.s17 {
  background-position-x: -255px;
  animation-delay: 1.36s;
}
.s18 {
  background-position-x: -270px;
  animation-delay: 1.44s;
}
.s19 {
  background-position-x: -285px;
  animation-delay: 1.52s;
}
.s20 {
  background-position-x: -300px;
  animation-delay: 1.6s;
}
.s21 {
  background-position-x: -315px;
  animation-delay: 1.68s;
}
.s22 {
  background-position-x: -330px;
  animation-delay: 1.76s;
}
.s23 {
  background-position-x: -345px;
  animation-delay: 1.84s;
}
.s24 {
  background-position-x: -360px;
  animation-delay: 1.92s;
}
@keyframes wave {
  to {
    transform: translateZ(0.0001px) rotateY(-14.1176470588deg);
  }
}

Simpan dan coba refresh halamannya. Bendera sudah berkibar. Untuk selanjutnya kita buat lirik lagu Indonesia Raya.

Buka Kembali file index.html setelah tutup div kelas container masukkan kode berikut.

1
2
3
4
5
6
<div class="content">
        <h1 id="text"></h1>
        <audio id="player" autoplay>
          <source src="musik.mp3" type="audio/mp3">
        </audio>
    </div>

Kode di atas h1 akan diisi lirik lagu Indonesia Raya dan untuk audionya silahkan download di sini. Pindahkan lagu Indonesia Raya ke folder HUT RI. Kemudian sebelum </body> masukkan kode berikut.

 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
79
80
81
82
83
84
85
86
87
88
89
90
<script src="https://unpkg.com/typeit@8.7.0/dist/index.umd.js"></script>
    <script>        
        new TypeIt("#text",{            
            speed: 75,                
            waitUntilVisible: true,
            startDelay: 6000,
            afterComplete: circle,
        })
        .type("Indonesia tanah airku")
        .pause(1000)
        .delete()
        .type("Tanah tumpah darahku")
        .pause(2000)
        .delete()
        .type("Di sanalah aku berdiri")
        .pause(1000)
        .delete()
        .type("Jadi pandu ibuku")
        .pause(2000)
        .delete()
        .type("Indonesia kebangsaanku")
        .pause(2000)
        .delete()
        .type("Bangsa dan Tanah Airku")
        .pause(1000)
        .delete()
        .type("Marilah kita berseru")
        .pause(2000)
        .delete()
        .type("Indonesia bersatu")
        .pause(2000)
        .delete()
        .type("Hiduplah tanahku")
        .pause(300)
        .delete()
        .type("Hiduplah negeriku")
        .pause(300)
        .delete()
        .type("Bangsaku Rakyatku semuanya")
        .pause(500)
        .delete()
        .type("Bangunlah jiwanya")
        .pause(300)
        .delete()
        .type("Bangunlah badannya")
        .pause(300)
        .delete()
        .type("Untuk Indonesia Raya")
        .pause(1000)
        .delete()
        .type("Indonesia Raya")
        .pause(300)
        .delete()
        .type("Merdeka Merdeka")
        .pause(300)
        .delete()
        .type("Tanahku negriku yang kucinta")
        .pause(300)
        .delete()
        .type("Indonesia Raya")
        .pause(300)
        .delete()
        .type("Merdeka Merdeka")
        .pause(300)
        .delete()
        .type("Hiduplah Indonesia Raya")
        .pause(2000)
        .delete()
        .type("Indonesia Raya")
        .pause(300)
        .delete()
        .type("Merdeka Merdeka")
        .pause(300)
        .delete()
        .type("Tanahku negriku yang kucinta")
        .pause(1000)
        .delete()
        .type("Indonesia Raya")
        .pause(300)
        .delete()
        .type("Merdeka Merdeka")
        .pause(300)
        .delete()
        .type("Hiduplah Indonesia Raya")
        .pause(3000)
        .delete()
        .type("HUT RI ke-77 <br> Pulih Lebih Cepat Bangkit Lebih Kuat")
        .go();
    
    </script>

Kita menggunakan script typeitjs untuk lirik lagunya. Setelah disimpan maka lirik lagu Indonesia Raya akan muncul. Namun posisi liriknya kurang bagus. Bukalah file style.css dan tambahkan kode berikut.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.content {
  position: absolute;
  align-items: center;
}

h1 {
  background-image: linear-gradient(white, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

Sampai di sini sudah tampil lirik lagunya di posisi yang tepat. Untuk memeriahkan saya akan menambahkan balon setelah lagu indonesai raya berakhir.

Buka Kembali file index.html dan tambahkan kode berikut setelah sebelum akhir </script> terakhir.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
function circle() {
          let amount = 100;
          let body = document.querySelector('body');
          let i = 0;
          while (i < amount)
          {
            let element = document.createElement('i');
            let posX = Math.floor(Math.random() * window.innerWidth);
            let delay = Math.random() * -20;
            let duration = Math.random() * 10;
            let size = Math.random() * 250;
            element.style.width = 10 + size + 'px';
            element.style.height = 10 + size + 'px';
            element.style.left = posX + 'px';
            element.style.animationDelay = delay + 's';
            element.style.animationDuration = 5 + duration + 's';
            element.style.webkitBoxShadow = "0 30px 50px #0002";
            body.append(element);
            i++
          }
        }
circle();

Kemudian buka file style.css dan tambahkan kode berikut.

 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
i {
  position: absolute;
  display: block;
  background: red;
  border-radius: 50%;
  animation: animate 5s linear infinite;
}

@keyframes animate
{
  0%
  {
    transform: translateY(calc(100vh + 350px));
  }
  100%
  {
    transform: translateY(-300px);
  }
}

i:nth-child(5n+1)
{
  background: #ffffff;
}
i:nth-child(5n+3)
{
  background: #ff0000;
}
i:nth-child(5n+3)
{
  background: #ffffff;
  border: 5px solid #ff0000;
}
i:nth-child(5n+4)
{
  background: #ffffff;
}
i:nth-child(5n+5)
{
  background: #ff0000;
  border: 5px solid #ffffff;
}

Simpan dan lihat perubahannya. Agar balonnya tampil setelah lagu Indonesia Raya selesai. Buka file index.html dan pada bagian script hapus go(); dan tambahkan afterComplete: circle, sehingga tampilan akhir kodenya seperti ini.

  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
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HUT RI Ke-77</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">         
      <div class="wrapper" style="--url: url('bendera.webp')">
        <div class="s s0">
          <div class="s s1">
            <div class="s s2">
              <div class="s s3">
                <div class="s s4">
                  <div class="s s5">
                    <div class="s s6">
                      <div class="s s7">
                        <div class="s s8">
                          <div class="s s9">
                            <div class="s s10">
                              <div class="s s11">
                                <div class="s s12">
                                  <div class="s s13">
                                    <div class="s s14">
                                      <div class="s s15">
                                        <div class="s s16">
                                          <div class="s s17">
                                            <div class="s s18">
                                              <div class="s s19">
                                                <div class="s s20">
                                                  <div class="s s21">
                                                    <div class="s s22">
                                                      <div class="s s23">
                                                        <div class="s s24"></div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
        <h1 id="text"></h1>
        <audio id="player" autoplay>
          <source src="musik.mp3" type="audio/mp3">
        </audio>
    </div>
    <script src="https://unpkg.com/typeit@8.7.0/dist/index.umd.js"></script>
    <script>        
        new TypeIt("#text",{            
            speed: 75,                
            waitUntilVisible: true,
            startDelay: 6000,
            afterComplete: circle,
        })
        .type("Indonesia tanah airku")
        .pause(1000)
        .delete()
        .type("Tanah tumpah darahku")
        .pause(2000)
        .delete()
        .type("Di sanalah aku berdiri")
        .pause(1000)
        .delete()
        .type("Jadi pandu ibuku")
        .pause(2000)
        .delete()
        .type("Indonesia kebangsaanku")
        .pause(2000)
        .delete()
        .type("Bangsa dan Tanah Airku")
        .pause(1000)
        .delete()
        .type("Marilah kita berseru")
        .pause(2000)
        .delete()
        .type("Indonesia bersatu")
        .pause(2000)
        .delete()
        .type("Hiduplah tanahku")
        .pause(300)
        .delete()
        .type("Hiduplah negeriku")
        .pause(300)
        .delete()
        .type("Bangsaku Rakyatku semuanya")
        .pause(500)
        .delete()
        .type("Bangunlah jiwanya")
        .pause(300)
        .delete()
        .type("Bangunlah badannya")
        .pause(300)
        .delete()
        .type("Untuk Indonesia Raya")
        .pause(1000)
        .delete()
        .type("Indonesia Raya")
        .pause(300)
        .delete()
        .type("Merdeka Merdeka")
        .pause(300)
        .delete()
        .type("Tanahku negriku yang kucinta")
        .pause(300)
        .delete()
        .type("Indonesia Raya")
        .pause(300)
        .delete()
        .type("Merdeka Merdeka")
        .pause(300)
        .delete()
        .type("Hiduplah Indonesia Raya")
        .pause(2000)
        .delete()
        .type("Indonesia Raya")
        .pause(300)
        .delete()
        .type("Merdeka Merdeka")
        .pause(300)
        .delete()
        .type("Tanahku negriku yang kucinta")
        .pause(1000)
        .delete()
        .type("Indonesia Raya")
        .pause(300)
        .delete()
        .type("Merdeka Merdeka")
        .pause(300)
        .delete()
        .type("Hiduplah Indonesia Raya")
        .pause(3000)
        .delete()
        .type("HUT RI ke-77 <br> Pulih Lebih Cepat Bangkit Lebih Kuat")
        .go();

        function circle() {
          let amount = 100;
          let body = document.querySelector('body');
          let i = 0;
          while (i < amount)
          {
            let element = document.createElement('i');
            let posX = Math.floor(Math.random() * window.innerWidth);
            let delay = Math.random() * -20;
            let duration = Math.random() * 10;
            let size = Math.random() * 250;
            element.style.width = 10 + size + 'px';
            element.style.height = 10 + size + 'px';
            element.style.left = posX + 'px';
            element.style.animationDelay = delay + 's';
            element.style.animationDuration = 5 + duration + 's';
            element.style.webkitBoxShadow = "0 30px 50px #0002";
            body.append(element);
            i++
          }
        }        
    </script>
  </body>
</html>