Membuat Mouse Gradient Effect Menggunakan JavaScript.

Membuat Mouse Gradient Effect Menggunakan JavaScript. Rasanya sudah sangat lama sekali saya tidak share artikel dengan lebel Design, untuk kali ini saya coba lagi untuk mencari informasi, mempelajari, dan berbagi ilmu yang telah saya pelajari, begitulah cara saya sharing di blog ini. Oke baik, kita langsung saja ke topik pembahasan mengenai Pembuat Mouse Gradient Effect Menggunakan JavaScript. Untuk hasil akhir dari latihan kali ini Anda bisa melihat gambar di bawah ini, atau langsung saja click tombol demo.

Demo

O ia sebelu saya memberikan script yang perlu untuk ditulis, saya ingin menjelaskan dulu mengenai, apasih mouse gradient effect itu...? Penjelasannya, Mouse Gradient Effect adalah effect yang ditimbulkan oleh JavaScript apa bila mouse kita gerakkan maka warna background akan berubah warna dengan bentuk gradient, mungkin demikian saja penjelasan dari saya. Berikut script yang perlu ditulis :

JavaScript :

<script type='text/javascript'>
//Effect was originally done by Remy Sharp: http://html5demos.com/canvas-grad; i'll be playing with this off and on so if you want the source it would be best to get it from link above.
var c = document.getElementsByTagName('canvas')[0],
    $ = c.getContext('2d'),
    g = null,
    body = document.getElementsByTagName('body')[0],
    color = 255;
   
if (c.getContext('2d')) {
  $ = c.getContext('2d');
  $.clearRect(0, 0, 600, 600);
  $.save();
  // Create radial gradient
  g = $.createRadialGradient(0,0,0,0,0,600);
  g.addColorStop(0, '#000');
  g.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');
  // assign gradients to fill
  $.fillStyle = g;
  // draw 600x600 fill
  $.fillRect(0,0,600,600);
  $.save();
 
  body.onmousemove = function (event) {
    var w = window.innerWidth,
        h = window.innerHeight,
        x = event.clientX,
        y = event.clientY,
        rx = 600 * x / w,
        ry = 600 * y / h;
       
    var xcol = ~~(256 * x / w);
    var ycol = ~~(256 * y / h);
    g = $.createRadialGradient(rx, ry, 0, rx, ry, 600);
    g.addColorStop(0, '#000');
    g.addColorStop(1, ['rgb(', xcol, ', ', (255 - xcol), ', ', ycol, ')'].join(''));
    $.fillStyle = g;
    $.fillRect(0,0,600,600);
  };
}
</script>

CSS :

body{
  overflow:hidden;
}
canvas{
  width:100%;
  height:100vh;
}

HTML :

<canvas></canvas>

Demikian saja yang dapat saya sampaikan mengenai Membuat Mouse Gradient Effect Menggunakan Javascript, mohon maaf apa bila terdapat kesalahan, baik itu perkataan maupun penyampaian.

Share this: