Membuat Animasi Sederhana Logo Hari Anak Nasional 2023


Filosofi Logo Hari Anak Nasional 2023 

a. 3 Anak yang Memegang Bendera Merah Putih Melambangkan setiap anak termasuk anak disabilitas memiliki impian (cita-cita) yang dapat diraih dengan doa, semangat dan dukungan keluarga. Anak sebagai generasi penerus bangsa, perlu didukung dan dilindungi agar tumbuh sebagai manusia dewasa yang berjiwa Pancasila di bawah naungan sangsaka merah putih. 

b. Warna Merah dan Putih Melambangkan kebersamaan dan nasionalisme anak-anak Indonesia untuk tetap kreatif dan bersemangat tetap saling mendukung dalam melewati masa sulit. 

c. Garis Berwarna Abu-abu Melambangkan meski situasi endemi COVID-19 membawa perubahan pola hidup pada anak-anak, tetapi semua pihak tetap mengupayakan anak terpenuhi hak-haknya, bergembira, dan penuh kreativitas di bawah naungan perlindungan keluarga.

Berikut contoh animasi Logo Hari Anak Nasional 2023. 

    <!doctype html>
    <html>
    <head>
      <style>
        #box {
          width: 100px;
          height: 100px;
          background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimiqrtD72LtZz10-zstYKjlZyTBwJxYCtxo2ezdHcD_LeDDBr9DYNdusqbhQhFjz067-JHReVQ35ARHdjNftMaO6lvS_XpZLpSx01rUuA3d5eIEQa1Q2SCi7Jfuy_f1uwrlKv6MJ0RByWEJU8k8v13pEBP_J_c5gUQ0Zn9RC9LQfFRsco2XQkYjIIzDUjP/s16000/logo%20hari%20anak%20nasional%202023%20png.png');
          background-size: cover;
          position: absolute;
          z-index: 9999; /* Nilai z-index yang lebih tinggi */
        }
      </style>
    </head>
    <body>
      <div id="box"></div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
      <script>
        var box = document.getElementById('box');

        var easingFunctions = [
          'easeInOutQuad',
          'easeInOutCubic',
          'easeInOutQuart',
          'easeInOutQuint',
          'easeInOutSine',
          'easeInOutExpo',
          'easeInOutCirc',
          'easeInOutBack',
          'easeInOutElastic',
          'easeInOutBounce'
        ];

        function getRandomInt(min, max) {
          min = Math.ceil(min);
          max = Math.floor(max);
          return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        function createRandomAnimation() {
          var randomTranslateX = getRandomInt(-250, 250);
          var randomTranslateY = getRandomInt(-250, 250);
          var randomScale = Math.random() * (4 - 1) + 1;
          var randomRotate = getRandomInt(-90, 90);
          var randomEasing = easingFunctions[getRandomInt(0, easingFunctions.length - 1)];

          anime({
            targets: box,
            translateX: randomTranslateX,
            translateY: randomTranslateY,
            scale: randomScale,
            rotate: randomRotate,
            duration: 2000,
            easing: randomEasing,
            complete: function() {
              createRandomAnimation();
            }
          });
        }

        createRandomAnimation();
      </script>
    </body>
    </html>
  




Salin kode tersebut, kemudian tambahkan pada html halaman anda. 

Post a Comment

Previous Post Next Post