effect javascript keybord

In this example below you will see how to do a effect javascript keybord with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 2ndow, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 2ndow ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>effect javascript keybord</title>
  
  
  
  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <h1> قم بالكتابه علي الكيبورد</h1>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/2ndow/effect-javascript-keybord-XZVvXV */
window.onkeydown = function (e) {
    "use strict";
    var key = e.keyCode,
        c = String.fromCharCode(key),
        color = ["#00f", "f00", "#080", "#808"],
        colors = color[Math.floor(Math.random() * color.length)],
        div = document.createElement("div");
    document.body.appendChild(div);
    div.style.position = "absolute";
    var rx = Math.round(Math.random() * window.innerHeight),
        ry = Math.round(Math.random() * window.innerWidth);
    div.style.left = ry + "px";
    div.style.top = rx + "px";
    div.textContent = c;
    div.style.color = colors;
    div.style.transition = "all 0.5s linear 0s";
    div.style.left = div.offsetLeft - 30 + "px";
    div.style.top = div.offsetTop - 30 + "px";
    div.style.fontSize = "100px";
    div.style.opacity = 0;

};

Comments