cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menggunakan Particle.js dalam projek JavaScript?

Bagaimana untuk menggunakan Particle.js dalam projek JavaScript?

WBOY
WBOYke hadapan
2023-09-11 23:33:101066semak imbas

如何在 JavaScript 项目中使用 Particle.js？

Seperti namanya, perpustakaan Particle.js membenarkan kami menambah zarah pada elemen HTML tertentu. Selain itu, kita boleh menukar bilangan bentuk zarah dalam div.

Kami boleh menambah animasi atau gerakan pada zarah menggunakan perpustakaan Particle.js. Di sini kita akan belajar mengubah bentuk, warna dan pergerakan zarah melalui contoh yang berbeza.

Tatabahasa

Pengguna boleh menggunakan perpustakaan Particle.js dalam projek JavaScript mengikut sintaks berikut. 

tsParticles.load("id", {
   particles: {
      
      // properties for the particles
   }
});

Dalam sintaks di atas, id mewakili id ​​elemen div yang perlu kita tambahkan zarah.

Contoh

Dalam contoh di bawah, kami menggunakan perpustakaan Particles.JS dan menggunakan CDN dalam teg

. Kami mencipta elemen dan memberikan id dalam badan HTML.

Dalam JavaScript, kami menambah kaedah tsarticles.load() untuk memuatkan zarah. Sebagai parameter pertama kaedah load(), kami lulus id elemen div. Kami lulus objek ini sebagai parameter kedua yang mengandungi sifat zarah. 

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.11/tsparticles.min.js"> </script>
   <style>
      #tsparticles {
         width: 100%;
         height: 100%;
         background-color: grey;
      }
   </style>
</head>
<body>
   <div id = "tsparticles">
      <h2> Using the <i> particle.js library </i> in the JavaScript project. </h2>
   </div>
   <script>
      tsParticles.load("tsparticles", {
         particles: {
            number: {
               value: 500
            },
         }
      });
   </script>
</body>
</html>

Dalam output, pengguna boleh memerhatikan zarah di dalam elemen div.

Contoh

Contoh di bawah akan menambah gerakan dan warna pada zarah. Pengguna boleh menggunakan atribut move untuk memindahkan zarah. Sifat "move" mengambil nilai sebagai objek yang mengandungi sifat yang didayakan dengan nilai boolean. 

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.11/tsparticles.min.js"> </script>
   <style>
      #particles {
         width: 100%;
         height: 100%;
         background-color: lightgreen;
      }
   </style>
</head>
<body>
   <div id = "particles"> 
      <h2> Using the <i> particle.js library </i> in the JavaScript project. </h2>
   </div>
   <script>
      tsParticles.load("particles", {
         particles: {
            number: {
               value: 1000
            },
            move: {
               enable: true
            },
            color: {
               value: "#272701"
            },
         }
      });
   </script>
</body>
</html>

Pengguna boleh menggunakan sifat warna untuk menukar warna zarah yang mengandungi objek ini sebagai nilai.

Pengguna boleh menggunakan bentuk zarah berikut dalam perpustakaan Particle.JS.

>

  • "poligon"

  • "Segitiga"

  • "Bulatan"

  • "tepi"/"segi empat"

  • "imej"/"imej"

  • "Bintang"

  • "Watak"/"Watak"

Contoh

Dalam contoh di bawah kami telah menambah bentuk poligon pada zarah. Selain itu, kami menukar saiz zarah menggunakan sifat saiz. Selain itu, kami menambah animasi pada zarah itu sendiri, meningkatkan dan mengurangkan saiz zarah yang pengguna boleh perhatikan dalam output. 

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.11/tsparticles.min.js"> </script>
   <style>
      #particles {
         width: 100%;
         height: 100%;
         background-color: lightgreen; 
      }
   </style>
</head>
<body>
   <div id = "particles">
      <h2>Using the <i> particle.js library </i> in the JavaScript project. </h2>
   </div>
   <script>
      tsParticles.load("particles", {
         particles: {
            number: {
               value: 1000
            },
            move: {
               enable: true
            },
            color: {
               value: "#ff0342"
            },

            // adding shape of particles
            shape: {
               type: "polygon",
            },

            // changing the size of elements
            size: {
               value: 8,
               random: true, 
               animation: {
                  enable: true,
                  speed: 40,
                  sync: true
               },
               move: {
                  enable: true,
               },
            }
         }
      });
   </script>
</body>
</html>

Pengguna belajar menggunakan perpustakaan keywords.js dalam projek JavaScript. Walau bagaimanapun, pengguna boleh memasang pustaka particle.js pada mesin tempatan mereka dan mengimportnya menggunakan laluan. Setiap kali pengguna ingin menggunakan pustaka Particle.js dengan aplikasi NodeJS, mereka harus memasangnya menggunakan arahan NPM.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Particle.js dalam projek JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html npm JS 对象
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Jenis itik dalam TypeScriptArtikel seterusnya：Jenis itik dalam TypeScript

Artikel berkaitan

Lihat lagi