Membuat Animasi Teks Dengan HTML5 Dan Canvas

217 Views
Membuat Animasi Teks Dengan HTML5 Dan Canvas

Labkom99.Com – Membuat 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

Read More

Membuat Efek Animasi HTML Dan Canvas Yang  Mungkin Anda Cari :

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>
  <h3 id="headline">Labkom99</h3>
</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);

Untuk Sourcode lengkap Membuat Animasi Teks Dengan HTML5 Dan Canvas dibawah ini:

Membuat Efek Animasi Dengan HTML Dan CSS3

<!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>

DEMO

Post Views: 217

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *