Menu
GIỚI THIỆU
  • Hiệu ứng này được thực hiện với CSS và JavaScript mang lại kết quả là: Bạn đưa chuột đến đâu thì hiệu ứng chạy theo đến đó áp dụng vào các dự án thiết kế trang web của mình

Tạo hiệu ứng chuột cực đẹp với CSS và JavaScript

Trong bài viết đầu tiên này , mình muốn giới thiệu cho bạn một hiệu ứng độc đáo để bạn có thể nhanh chóng áp dụng vào các dự án thiết kế trang web của mình . Hiệu ứng này được thực hiện với CSS và JavaScript mang lại kết quả là: Bạn đưa chuột đến đâu thì hiệu ứng chạy theo đến đó.

Tạo hiệu ứng chuột cực đẹp với CSS và JavaScript

Tạo hiệu ứng chuột cực đẹp với CSS và JavaScript
Tạo hiệu ứng chuột cực đẹp với CSS và JavaScript

Chúng ta sẽ cần CSS và JavaScript và đừng quên chèn link bên dưới trước thẻ </ head> nhé:

#HTML

 <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222599/canvas.js"></script>

#CSS

 html {
  overflow: hidden;
  -ms-touch-action: none;
  -ms-content-zooming: none;
  user-select: none;
}
 body {
  position: absolute;
  margin: 0px;
  padding: 0px;
  background: #000; 
  width: 100%;
  height: 100%;
}
 canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000; 
}

#JS

! function() {
  "use strict";
  var canvas = new ge1doot.Canvas();
  var ctx = canvas.ctx;
  var pointer = canvas.pointer
  var blobs = [],
  Ni = 48,
  rad = 100;
  for (var i = 0; i < Ni; i++) {
  blobs.push(
  new Blob(
  rad * Math.cos((2 * Math.PI) / Ni * i),
  rad * Math.sin((2 * Math.PI) / Ni * i)
  )
  );
  }
 
  function Blob(x, y) {
  this.blob = document.createElement('canvas');
  this.blob.width = this.blob.height = rad * 2;
  var ict = this.blob.getContext('2d');
  ict.fillStyle = "#f00";
  ict.arc(rad, rad, rad, 0, 2 * Math.PI);
  ict.fill();
  this.x = x;
  this.y = y;
  this.x0 = x;
  this.y0 = y;
  this.r = rad * rad * 1.6;
  }
  Blob.prototype.anim = function() {
  var dx = pointer.x - this.x - canvas.width * 0.5;
  var dy = pointer.y - this.y - canvas.height * 0.5;
  var d = Math.sqrt(dx * dx + dy * dy);
  this.x = this.x - this.r / d * (dx / d) + (this.x0 - this.x) * 0.5;
  this.y = this.y - this.r / d * (dy / d) + (this.y0 - this.y) * 0.5;
  ctx.drawImage(
  this.blob,
  canvas.width * 0.5 + this.x - rad,
  canvas.height * 0.5 + this.y - rad
  );
  }
 
  function loop(el) {
  el.anim();
  }
 
  function run() {
  requestAnimationFrame(run);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  blobs.forEach(loop);
  }
  pointer.y = 10000;
  run();
 }();

Kết thúc.

Ngay bây giờ, mời các bạn cùng xem Demo bên dưới và link trên codepen tại đây: https://codepen.io/hoicode/pen/mMMgLZ

Ghi nguồn hoicode.com khi đăng tải lại bài viết này.
Link: Tạo hiệu ứng chuột cực đẹp với CSS và JavaScript
Tags: hiệu ứng css và javascript css javascript
Category: Javascript
Mạnh xã hội: Follow fanpage của team https://www.facebook.com/hoicode/ để tiếp tục theo dõi các loạt bài mới nhất về Javascript,Java,C,C++,Javascript,HTML,PHP,Python,Database,Mobile.... mới nhất của chúng tôi.

Chia sẻ liên kết

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.

    Email của bạn sẽ được sử dụng với mục đích thông báo tin tuyển dụng mới hoặc các bài viết mới.

    captcha