Labkom99.Com – Membuat efek animasi teks menggunkan partikel Canvas dan HTML5. Partikel Canvas dibuat secara dinamis dan teks yang ditentukan disusun oleh animasi. Setelah teks dibuat, Anda juga dapat berinteraksi dengan teks tersebut dengan mouse. Pada saat mouse di arahkan ke tesk efek animasi bergelembung akan muncul dan memecah tesk tulisan tersebut.

Membuat Animasi Teks Dengan HTML5 Dan Canvas

Dengan membuat animasi tesk dengan HTML5 ini tentunya akan menjadi daya tarik sendiri dalam website anda. Efek tesk yang dihasilkan sangatlah keren dengan ornament Canvas yang membentuk pola yang cantik dan menarik. Lihat gambar berikut ini untuk melihat efek animasi tesk yang di hasilkan ketika mouse diarahkan.

animasi tesk ketika kursor diarahkan


Alat / Bahan Baku
Notepad 
Bisa menggunakan Tools web programming Lain

Perhatian 
Untuk membuat efek animasi tesk pada bagian ini sabaiknya memahami terlebih dahulu tentang Tutorial Belajar Dasar - Dasar HTML: Hypertext Markup Language , Struktur dasar HTML dan cara membuat template, cara menyimpan dan cara membuka file HTML yang sudah di bahas pada pembahasan Bagaimana Cara Membuat Template HTML 

Metode / Langkah
Sebelum belajar membuat efek animasi tesk dengan HTML5 dan Canvas perlu diketahui apa itu canvas. Anda juga mempelajari Belajar HTML5 dan Canvas Membuat Animasi Lingkaran dalam menggunakan canvas. Penggunaan html5 dan Canvas disarankan untuk menggunakan Firefox, Google, opera, dan browser lain yang mendukung HTML 5 untuk menjalakan program.

Langkah pertama dalam membuat efek animasi tesk dengan menyiapkan dan menuliskan kode HTML seperti dibawah ini :

<section id="ci-particles">
  <canvas id="canvas"></canvas>
  <h1 id="headline">Labkom99</h1>
</section>   

Kemudian juga harus menyiapkan kode CSS untuk memberi sentuhan pada background tesk yang akan digunakan:

body {
    background-color: #000000;
    margin: 0;
    overflow: hidden;
    font-size: 0;
  }
  body section {
    background: url(https://1.bp.blogspot.com/-V0WYwuqmsYE/XoM3fVlEwCI/AAAAAAAAJsM/PVRpq4PsADwd747gKqYnHPDkXVhXjjD7gCLcBGAsYHQ/s1600/Belajar%2BHTML5%2BDan%2BCanvas%2BMembuat%2BBola%2BApi%2BLuncur.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    font-weight: 700;
  }
  body section canvas {
    width: 100vw;
    height: 100vh;
  }  

Untuk mengganti background tulisan gatilah url gambar pada body section. Kemudian yang paling penting adalah membuat script Jquery agar animasi canvas dapat dibuat dan mengahasilkan efek animasi tesk yang keren.

var canvas = document.querySelector("#canvas"),
    ctx = canvas.getContext("2d"),
    link = document.createElement('link');
    particles = [],
    amount = 0,
    mouse = { x: -9999, y: -9999 },
    radius = 1,
    colors = [
      "rgba(252,248,254,0.85)", 
      "rgba(220,203,255,0.75)", 
      "rgba(154,112,124,0.85)", 
      "rgba(192,213,255,0.85)", 
      "rgba(244,223,254,0.75)"
    ],
    headline = document.querySelector("#headline"),
    ww = window.innerWidth,
    wh = window.innerHeight;
function Particle(x, y) {
  this.x = Math.random() * ww;
  this.y = Math.random() * wh;
  this.dest = { x: x, y: y };
  this.r = Math.random() * 2 * Math.PI;
  this.vx = (Math.random() - 0.5) * 25;
  this.vy = (Math.random() - 0.5) * 25;
  this.accX = 0;
  this.accY = 0;
  this.friction = Math.random() * 0.025 + 0.94;
  this.color = colors[Math.floor(Math.random() * 2.75)];
}
Particle.prototype.render = function() {
  this.accX = (this.dest.x - this.x) / 1000;
  this.accY = (this.dest.y - this.y) / 1000;
  this.vx += this.accX;
  this.vy += this.accY;
  this.vx *= this.friction;
  this.vy *= this.friction;
  this.x += this.vx;
  this.y += this.vy;
  ctx.fillStyle = this.color;
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.r, Math.PI * 2, false);
  ctx.fill();
  var a = this.x - mouse.x;
  var b = this.y - mouse.y;
  var distance = Math.sqrt(a * a + b * b);
  if (distance < (radius * 75)) {
    this.accX = (this.x - mouse.x) / 100;
    this.accY = (this.y - mouse.y) / 100;
    this.vx += this.accX;
    this.vy += this.accY;
  }
}
function onMouseMove(e) {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
  }
  function onTouchMove(e) {
  if (e.touches.length > 0) {
    mouse.x = e.touches[0].clientX;
    mouse.y = e.touches[0].clientY;
  }
}
function onTouchEnd(e) {
  mouse.x = -9999;
  mouse.y = -9999;
}
function initScene() {
  ww = canvas.width = window.innerWidth;
  wh = canvas.height = window.innerHeight;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  link.rel = 'stylesheet';
  link.type = 'text/css';
  link.href = 'https://fonts.googleapis.com/css?family=Abril+Fatface';
  document.getElementsByTagName('head')[0].appendChild(link);
  ctx.font = 'bold 16vw "Abril Fatface"';
  ctx.textAlign = "center";
  ctx.fillText(headline.innerHTML, ww / 2, wh / 1.6);
  var data = ctx.getImageData(0, 0, ww, wh).data;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.globalCompositeOperation = "screen";
  particles = [];
  for (var i = 0; i < ww; i += Math.round(ww / 200)) {
    for (var j = 0; j < wh; j += Math.round(ww / 200)) {
      if (data[((i + j * ww) * 4) + 3] > 200) {
        particles.push(new Particle(i, j));
      }
    }
  }
  amount = particles.length;
}
function render(a) {
  requestAnimationFrame(render);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < amount; i++) {
    particles[i].render();
  }
}
headline.addEventListener("keyup", initScene);
window.addEventListener("resize", initScene);
window.addEventListener("mousemove", onMouseMove);
window.addEventListener("touchmove", onTouchMove);
window.addEventListener("touchend", onTouchEnd);
initScene();
requestAnimationFrame(render);
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>labkom99.com - Membuat Animasi Teks Dengan HTML5 Dan Canvas</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Raleway:300,400,900');
/* Header */
.labkom99-header {
    position: fixed;
    display: block;
    width: 96%;
    width: calc( 100% - 32px );
    height: 40px;
    margin: 0 auto;
    color: #3498db;
    text-align: center;
    top: 16px; right: 16px; left: 16px;
    z-index: 1000;
}

.labkom99-header .labkom99-links .labkom99-icon-back {
    position: absolute;
    display: block;
    width: 24px;
    height: 24px;
    padding: 7px;
    color: rgba(255, 255, 255,0.75);
    font-size: 32px;
    line-height: 34px;
    font-weight: 900;
    font-family: 'Raleway', sans-serif;
    text-decoration: none;
    outline: 0px none;
    outline: 0px;
    transition: all .3s ease;
    top: 0px;
    left: 0px;
    z-index: 2;
}

.labkom99-header .labkom99-links .labkom99-icon-back::before {
    content: '';
    position: absolute;
    display: block;
    width: 34px;
    height: 34px;
    top: 7px;
    left: 20px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255,.35);
}
.labkom99-header .labkom99-links .labkom99-icon-back:hover {
    color: rgba(255, 255, 255,1);
}
.labkom99-header .labkom99-links .labkom99-icon-github {
    position: absolute;
    display: block;
    width: 24px;
    height: 24px;
    padding: 7px;
    color: rgba(255, 255, 255,0.75);
    font-size: 32px;
    line-height: 34px;
    font-weight: 900;
    font-family: 'Raleway', sans-serif;
    text-decoration: none;
    outline: 0px none;
    outline: 0px;
    transition: all .3s ease;
    top: 0px;
    right: 0px;
    z-index: 2;
}
.labkom99-header .labkom99-links .labkom99-icon-github::before {
    content: '';
    position: absolute;
    display: block;
    width: 34px;
    height: 34px;
    top: 7px;
    right: 18px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255,.35);
}
.labkom99-header .labkom99-links .labkom99-icon-github:hover {
    color: rgba(255, 255, 255,1);
}
.labkom99-header .labkom99-links .labkom99-header {
    font-family: 'Raleway', sans-serif;
    display: inline-block;
	font-size: 14px;
	font-weight: 300;
	margin: 0;
    padding: 17px 0;
    z-index: 1;
}
@media screen and (max-width: 360px) {
    .labkom99-header .labkom99-links .labkom99-header {
        font-size: 12px; 
    }
}
body {
    background-color: #000000;
    margin: 0;
    overflow: hidden;
    font-size: 0;
  }
  body section {
    background: url(https://1.bp.blogspot.com/-V0WYwuqmsYE/XoM3fVlEwCI/AAAAAAAAJsM/PVRpq4PsADwd747gKqYnHPDkXVhXjjD7gCLcBGAsYHQ/s1600/Belajar%2BHTML5%2BDan%2BCanvas%2BMembuat%2BBola%2BApi%2BLuncur.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    font-weight: 700;
  }
  body section canvas {
    width: 100vw;
    height: 100vh;
  }  
</style>
</head>
<body>
	<!-- labkom99:header START -->
    <header class="labkom99-header">
      <div class="labkom99-links">
        <a class="labkom99-icon-back" href="http://www.labkom99.com" title="Labkom99">C</a>
        <a class="labkom99-icon-github" href="https://www.labkom99.com/2020/03/belajar-html5-dan-canvas-membuat-bola.html" target="_blank" title="Labkom99">G</a>
      </div>
    </header>
    <!-- labkom99:header END -->
    <!-- labkom99:demo START -->
<section id="ci-particles">
  <canvas id="canvas"></canvas>
  <h1 id="headline">Labkom99</h1>
</section>   
    <!-- labkom99:demo END -->
<script>
var canvas = document.querySelector("#canvas"),
    ctx = canvas.getContext("2d"),
    link = document.createElement('link');
    particles = [],
    amount = 0,
    mouse = { x: -9999, y: -9999 },
    radius = 1,
    colors = [
      "rgba(252,248,254,0.85)", 
      "rgba(220,203,255,0.75)", 
      "rgba(154,112,124,0.85)", 
      "rgba(192,213,255,0.85)", 
      "rgba(244,223,254,0.75)"
    ],
    headline = document.querySelector("#headline"),
    ww = window.innerWidth,
    wh = window.innerHeight;
function Particle(x, y) {
  this.x = Math.random() * ww;
  this.y = Math.random() * wh;
  this.dest = { x: x, y: y };
  this.r = Math.random() * 2 * Math.PI;
  this.vx = (Math.random() - 0.5) * 25;
  this.vy = (Math.random() - 0.5) * 25;
  this.accX = 0;
  this.accY = 0;
  this.friction = Math.random() * 0.025 + 0.94;
  this.color = colors[Math.floor(Math.random() * 2.75)];
}
Particle.prototype.render = function() {
  this.accX = (this.dest.x - this.x) / 1000;
  this.accY = (this.dest.y - this.y) / 1000;
  this.vx += this.accX;
  this.vy += this.accY;
  this.vx *= this.friction;
  this.vy *= this.friction;
  this.x += this.vx;
  this.y += this.vy;
  ctx.fillStyle = this.color;
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.r, Math.PI * 2, false);
  ctx.fill();
  var a = this.x - mouse.x;
  var b = this.y - mouse.y;
  var distance = Math.sqrt(a * a + b * b);
  if (distance < (radius * 75)) {
    this.accX = (this.x - mouse.x) / 100;
    this.accY = (this.y - mouse.y) / 100;
    this.vx += this.accX;
    this.vy += this.accY;
  }
}
function onMouseMove(e) {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
  }
  function onTouchMove(e) {
  if (e.touches.length > 0) {
    mouse.x = e.touches[0].clientX;
    mouse.y = e.touches[0].clientY;
  }
}
function onTouchEnd(e) {
  mouse.x = -9999;
  mouse.y = -9999;
}
function initScene() {
  ww = canvas.width = window.innerWidth;
  wh = canvas.height = window.innerHeight;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  link.rel = 'stylesheet';
  link.type = 'text/css';
  link.href = 'https://fonts.googleapis.com/css?family=Abril+Fatface';
  document.getElementsByTagName('head')[0].appendChild(link);
  ctx.font = 'bold 16vw "Abril Fatface"';
  ctx.textAlign = "center";
  ctx.fillText(headline.innerHTML, ww / 2, wh / 1.6);
  var data = ctx.getImageData(0, 0, ww, wh).data;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.globalCompositeOperation = "screen";
  particles = [];
  for (var i = 0; i < ww; i += Math.round(ww / 200)) {
    for (var j = 0; j < wh; j += Math.round(ww / 200)) {
      if (data[((i + j * ww) * 4) + 3] > 200) {
        particles.push(new Particle(i, j));
      }
    }
  }
  amount = particles.length;
}
function render(a) {
  requestAnimationFrame(render);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < amount; i++) {
    particles[i].render();
  }
}
headline.addEventListener("keyup", initScene);
window.addEventListener("resize", initScene);
window.addEventListener("mousemove", onMouseMove);
window.addEventListener("touchmove", onTouchMove);
window.addEventListener("touchend", onTouchEnd);
initScene();
requestAnimationFrame(render);    
</script>
</body>
</html>

Komentar