Bagaimana untuk mencipta kesan laluan kursor dengan Javascript

Bagaimana untuk mencipta kesan laluan kursor dengan Javascript

Sebagai bahasa alternatif kepada Javascript, P5.js (atau biasa dikenali sebagai Javascript Pemprosesan) mempunyai banyak bentuk pelaksanaan reka bentuk yang boleh kita laksanakan secara keseluruhan (sama ada melalui pelaksanaan semula reka bentuk atau reka bentuk individu), kedua-duanya dalam konteks reka bentuk halaman belakang. (atau yang biasa disebut sebagai Rekod), pakaian susunandalam fungsinya laman web berkaitan.

Hasilnya laluan kursor Javascript

Jadi jangan terkejut jika ramai pembangun depan mula menggunakan bahasa pengaturcaraan seperti P5.js sebagai alternatif, sama ada kerana coraknya pencenyang tidak jauh bezanya dengan format javascript secara umum, serta penggunaan elemen yang telah dipermudahkan oleh pembangun aplikasi.

Sebagai bentuk pelaksanaan bahasa pengaturcaraan P5.js, dalam artikel ini, penulis akan mencipta kesan laluan kursor tentang menggerakkan kursor menggunakan pelbagai fungsi yang disediakan dalam Pemprosesan (sebagai anak Javascript).

Bagaimana untuk mencipta kesan laluan kursor

1. sediakan pemproses perkataan (sama ada pad nota, teks tinggi atau aplikasi serupa) sebagai media menaip pencen nanti.

2. Di mukasurat pemproses perkataanbuat fail bernama index.html yang mengandungi kod berikut:

<html>
<head>
  <title>Inwepo Cursor Trails</title>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <style>
</head>
<body>
  <h1>Inwepo</h1>
  <p>Efek Cursor Trails</p>
</body>
</html>

3. Di Jabatan <στυλ>masukkan coretan kod berikut:

html {
  margin: 0;
  height: 100%;
}

body {
  font-family: "Segoe UI", sans-serif;
  position: relative;
  margin: 0 auto;
  max-width: 1000px;
  height: 100%;
  color: #141414;
  text-align: center;
}

h1 {
  position: relative;
  font-size: 40px;
  font-weight: 200;
  margin: 0;
  top: 30px;
}

p {
  margin-top: 30px;
  font-weight: 600;
  font-size: 21px;
  background: #ff3333;
  display: table;
  margin: 35px auto;
  color: #fff;
  padding: 5px 15px;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

Nanti, bahagian <στυλ> akan mempunyai struktur kod berikut:

<style>
  html {
    margin: 0;
    height: 100%;
  }

  body {
    font-family: "Segoe UI", sans-serif;
    position: relative;
    margin: 0 auto;
    max-width: 1000px;
    height: 100%;
    color: #141414;
    text-align: center;
  }

  h1 {
    position: relative;
    font-size: 40px;
    font-weight: 200;
    margin: 0;
    top: 30px;
  }

  p {
    margin-top: 30px;
    font-weight: 600;
    font-size: 21px;
    background: #ff3333;
    display: table;
    margin: 35px auto;
    color: #fff;
    padding: 5px 15px;
  }

  canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
  }
</style>

4. Di Jabatan <σενάριο>masukkan coretan kod berikut:

function setup() {
    createCanvas(windowWidth, windowHeight);
  }

function draw() {
  background('#ffffff');
  
  stroke('#bdbdbd') 
  strokeWeight(3); 
  for(var i = 0; i < width; i = i + 80) {
    for(var j = 0; j < height; j = j + 80) {
      point(i, j);
    }                         
  }
  
  strokeWeight(1);
  
  al.push(new Trails());
  
  for( var i = 0; i < al.length; i++ ) {
    var t = al[i];
      t.applyForce(new p5.Vector(random( -0.5, 0.5 ), random( 0.01, 0.05 )));
      t.update();
      t.render();
      if(t.isDead())
        al.shift();
    }
  }

  function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
  }

  function Trails() {
    this.counter = 0;
    this.position = new p5.Vector( mouseX, mouseY );
    this.velocity = new p5.Vector( 0, 0 );
    this.acceleration = new p5.Vector( 0, 0 );
    this.lifeSpan = 1;
  }

   Trails.prototype.applyForce = function(force) {
    acceleration = force;
  }

  Trails.prototype.update = function() {
    this.velocity.add(this.acceleration);
    this.position.add(this.velocity);
    this.lifeSpan -= 0.04;
  }

  Trails.prototype.render = function() {
    var c = color('rgba(237, 0, 0, ' + this.lifeSpan + ')');
    stroke(c); 
    line(this.position.x, this.position.y, pmouseX, pmouseY);
  }

  Trails.prototype.isDead = function() {
    if(this.lifeSpan < 0.1)
      return true;
    else
      return false;
  }

Jika anda ada, maka penampilan keseluruhan fail index.html akan kelihatan seperti ini:

<html>
<head>
  <title>Inwepo Cursor Trails</title>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <style>
  html {
    margin: 0;
    height: 100%;
  }

  body {
    font-family: "Segoe UI", sans-serif;
    position: relative;
    margin: 0 auto;
    max-width: 1000px;
    height: 100%;
    color: #141414;
    text-align: center;
  }

  h1 {
    position: relative;
    font-size: 40px;
    font-weight: 200;
    margin: 0;
    top: 30px;
  }

  p {
    margin-top: 30px;
    font-weight: 600;
    font-size: 21px;
    background: #ff3333;
    display: table;
    margin: 35px auto;
    color: #fff;
    padding: 5px 15px;
  }

  canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
  }
  </style>
</head>
<body>
  <h1>Inwepo</h1>
  <p>Efek Cursor Trails</p>
  <script>
  var al = [];
function setup() {
    createCanvas(windowWidth, windowHeight);
  }

function draw() {
  background('#ffffff');
  
  stroke('#bdbdbd') 
  strokeWeight(3); 
  for(var i = 0; i < width; i = i + 80) {
    for(var j = 0; j < height; j = j + 80) {
      point(i, j);
    }                         
  }
  
  strokeWeight(1);
  
  al.push(new Trails());
  
  for( var i = 0; i < al.length; i++ ) {
    var t = al[i];
      t.applyForce(new p5.Vector(random( -0.5, 0.5 ), random( 0.01, 0.05 )));
      t.update();
      t.render();
      if(t.isDead())
        al.shift();
    }
  }

  function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
  }

  function Trails() {
    this.counter = 0;
    this.position = new p5.Vector( mouseX, mouseY );
    this.velocity = new p5.Vector( 0, 0 );
    this.acceleration = new p5.Vector( 0, 0 );
    this.lifeSpan = 1;
  }

   Trails.prototype.applyForce = function(force) {
    acceleration = force;
  }

  Trails.prototype.update = function() {
    this.velocity.add(this.acceleration);
    this.position.add(this.velocity);
    this.lifeSpan -= 0.04;
  }

  Trails.prototype.render = function() {
    var c = color('rgba(237, 0, 0, ' + this.lifeSpan + ')');
    stroke(c); 
    line(this.position.x, this.position.y, pmouseX, pmouseY);
  }

  Trails.prototype.isDead = function() {
    if(this.lifeSpan < 0.1)
      return true;
    else
      return false;
  }
  </script>
</body>
</html>

5. Simpan fail diubah suai sebelum ini. Kemudian buka fail index.html melalui pelayar awak. Kemudian, halaman laman web ia akan kelihatan kosong dengan hanya beberapa teks tambahan di tengah-tengah halaman. Mudah sahaja, apabila anda menggerakkan kursor pada halaman laman webkesan bar berwarna akan mengikuti pergerakan kursor anda, menunjukkan bahawa kesan itu digunakan laluan kursor telah berjaya dilaksanakan.

Read More :   10 potret watak Hoon Shin Son Rok, teman wanita Kim Go Eun dalam Yumi's Cells musim 3? – lapakkorea.com

Ini ialah tutorial tentang cara mencipta kesan laluan kursor dengan Javascript. Semoga artikel ini bermanfaat untuk pembaca.

Share