{"id":9863,"date":"2024-01-12T18:09:00","date_gmt":"2024-01-12T18:09:00","guid":{"rendered":"https:\/\/codehim.com\/?p=9863"},"modified":"2024-01-22T16:12:45","modified_gmt":"2024-01-22T11:12:45","slug":"pixel-background-animation-in-javascript","status":"publish","type":"post","link":"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/","title":{"rendered":"Pixel Background Animation in JavaScript"},"content":{"rendered":"

This JavaScript code creates a captivating pixel background animation<\/a>. The code generates a grid of squares that move and fade over time. It also allows you to interact by clicking, spawning new squares or resetting existing ones. The animation adapts to mouse movements, adding a dynamic touch to the pixelated display. Helpful for creating visually appealing backgrounds on web pages with an interactive twist.<\/p>\n

How to Create Pixel Background Animation In JavaScript<\/h2>\n

1. Create the HTML structure for your webpage as follows:<\/p>\n

<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Pixel Background Animation<\/title>\r\n<\/head>\r\n<body>\r\n<h2>Your Content Goes Here<\/h2>\r\n\r\n<script>\r\n\/\/ JavaScript code goes here\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
2. Define the body and canvas styles in CSS to create a clean background and set the stage for the animation.<\/p>\n
body{\r\n  min-height: 720px;\r\n  margin: 0;\r\n  padding: 0;\r\n  background: url(https:\/\/picsum.photos\/1920\/1080) !important;\r\n  background-position: center center;\r\n  background-size: cover;\r\n  position: relative;\r\n}\r\n\r\ncanvas {\r\n top: 0;\r\n left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n}<\/pre>\n
3. Now, let’s delve into the JavaScript code. Copy and paste the following code into your HTML file, just before the closing <\/body><\/code> tag.<\/p>\n
This JavaScript code employs the HTML5 canvas element to create a grid of animated pixels. It initializes parameters such as the number of columns, rows, colors, and animation speed. The code handles mouse interactions, allowing users to click and interact with the pixel animation.<\/p>\n
(function() {\r\n  var squares = [];\r\n  var canvas = null;\r\n  var lastFrame = new Date().getTime();\r\n  var delta = 0;\r\n  var mousePos = null;\r\n  var debug = true;\r\n  var click = false;\r\n  var properties = {\r\n    cols: 64,\r\n    rows: 32,\r\n    color: \"#ffffff\",\r\n    altColor: \"#1564a1\",\r\n    sLength: 0,\r\n    activeAmt: 0.25,\r\n    easeIn: 0.25\r\n  };\r\n\r\n  var init = function() {\r\n    canvas = document.createElement('canvas');\r\n   document.body.appendChild(canvas);\r\n\r\n\r\n\r\n    canvas.width = canvas.offsetWidth;\r\n    canvas.height = (canvas.offsetWidth \/ properties.cols * properties.rows);\r\n    properties.sLength = canvas.offsetWidth \/ properties.cols;\r\n    \r\n    \/\/ Generate the Grid\r\n    for (var r = 0; r < properties.rows; r++) {\r\n      squares[r] = [];\r\n      for (var c = 0; c < properties.cols; c++) {\r\n        squares[r][c] = null;\r\n      }\r\n    }\r\n\r\n    canvas.addEventListener('mousemove', function(evt) {\r\n      mousePos = getMousePos(evt);\r\n    });\r\n\r\n    canvas.addEventListener('mouseout', function(evt) {\r\n      mousePos = null;\r\n    });\r\n    \r\n    canvas.addEventListener('mousedown', function(evt){\r\n      mousePos = getMousePos(evt);\r\n      click = true;\r\n    });\r\n  }\r\n\r\n  var step = function() {\r\n    delta = (new Date().getTime() - lastFrame) \/ 1000;\r\n    lastFrame = new Date().getTime();\r\n\r\n    \/\/ Spawn new Squares\r\n    for (var i = 0; i < Math.ceil(properties.cols * delta); i++) {\r\n      var c = Math.round(Math.random() * (properties.cols - 1));\r\n      var r = Math.round(Math.random() * (properties.rows - 1));\r\n      if (squares[r][c] == null) {\r\n        var duration = Math.round(5 * (Math.random() + 0.5));\r\n        squares[r][c] = new Square(c, r, duration);\r\n      }\r\n    }\r\n    \r\n    \/\/ Spawn squares under the mouse\r\n    if (mousePos != null) {\r\n      var col = Math.round((mousePos.x - properties.sLength \/ 2) \/ canvas.width * properties.cols);\r\n      var row = Math.round((mousePos.y - properties.sLength \/ 2) \/ canvas.height * properties.rows);\r\n      \r\n      if(click){\r\n        squares[row][col] = new Square(col, row, 5, false, \"#f00\");\r\n        click = false;\r\n      } else if(squares[row][col]) {\r\n        squares[row][col].reset();\r\n      } else {\r\n        squares[row][col] = new Square(col, row, 10, false)\r\n      }\r\n    }\r\n\r\n    \/\/ Remove old squares\r\n    for (var r = 0; r < properties.rows; r++) {\r\n      for (var c = 0; c < properties.cols; c++) {\r\n        if (squares[r][c] != null && squares[r][c].life <= 0) {\r\n          squares[r][c] = null;\r\n        }\r\n      }\r\n    }\r\n\r\n    render();\r\n\r\n    requestAnimationFrame(step);\r\n  }\r\n\r\n  var render = function() {\r\n    var ctx = canvas.getContext(\"2d\");\r\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n    for (var r = 0; r < properties.rows; r++) {\r\n      for (var c = 0; c < properties.cols; c++) {\r\n        if (squares[r][c] != null) {\r\n          squares[r][c].step(ctx);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  function getMousePos(evt) {\r\n    var rect = canvas.getBoundingClientRect();\r\n\r\n    return {\r\n      x: evt.clientX - rect.left,\r\n      y: evt.clientY - rect.top\r\n    };\r\n  }\r\n\r\n  init();\r\n  requestAnimationFrame(step);\r\n\r\n  \/\/ Helper Function\r\n  var getActiveNum = function() {\r\n    var i = 0;\r\n    for (var r = 0; r < properties.rows; r++) {\r\n      for (var c = 0; c < properties.cols; c++) {\r\n        if (squares[r][c] != null) {\r\n          i++;\r\n        }\r\n      }\r\n    }\r\n    return i;\r\n  }\r\n\r\n  var Square = function(c, r, life, animIn, color) {\r\n    \r\n    if(typeof(animIn) == \"undefined\"){\r\n      animIn = true;\r\n      opacity = 0;\r\n    } else {\r\n      animIn = false;\r\n      opacity = 1;\r\n    }\r\n    \r\n    this.col = c;\r\n    this.row = r;\r\n    this.life = life;\r\n    this.color = color ? color : properties.color;\r\n    this.initialLife = life;\r\n    this.animIn = animIn;\r\n    this.opacity = opacity;\r\n\r\n    this.step = function(ctx) {\r\n      this.render(ctx);\r\n      if (this.animIn) { \/\/this.animIn){\r\n        this.opacity = this.opacity +  (1 \/ properties.easeIn * delta);\r\n        if (this.opacity >= 1) {\r\n          this.opacity = 1;\r\n          this.animIn = false;\r\n        }\r\n      } else {\r\n        this.life = this.life - delta;\r\n        if (this.life < 0) {\r\n          this.life = 0;\r\n        }\r\n        this.opacity = Math.round(1 * (this.life \/ this.initialLife) * 1000) \/ 1000;\r\n      }\r\n    };\r\n\r\n    this.render = function(ctx) {\r\n      var l = properties.sLength;\r\n      ctx.globalAlpha = this.opacity;\r\n      ctx.fillStyle =  this.color;\r\n      ctx.fillRect(this.col * l, this.row * l, l, l);\r\n\r\n      if (debug == true) {\r\n        ctx.globalAlpha = 1;\r\n        ctx.fillStyle = \"#000\";\r\n        ctx.font = \"12px Arial\";\r\n\r\n       \/\/ ctx.fillText(this.col, this.col * l + 2, this.row * l + 12);\r\n       \/\/  ctx.fillText(this.row, this.col * l + l - 14, this.row * l + 12);\r\n        \/\/ ctx.fillText(Math.round(this.life), this.col * l + 2, this.row * l + (l \/ 2) + 10);\r\n       \/\/  ctx.fillText(this.initialLife, this.col * l + 2, this.row * l + l - 4);\r\n       \/\/  ctx.fillText(delta, this.col * l + l - 24, this.row * l + (l \/ 2) + 10);\r\n       \/\/  ctx.fillText(this.opacity, this.col * l + l - 24, this.row * l + +l - 4);\r\n      }\r\n    };\r\n    \r\n    this.reset = function(){\r\n      this.opacity = 1;\r\n      this.life = this.initialLife;\r\n    };\r\n  }\r\n})();<\/pre>\n
Feel free to experiment with the code to customize the animation further. Adjust parameters like the number of columns, rows, colors, and animation speed to suit your preferences.<\/p>\n
That’s all! hopefully, you have successfully created a Pixel Background Animation in JavaScript. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This JavaScript code creates a captivating pixel background animation. The code generates a grid of squares that move and fade…<\/p>\n","protected":false},"author":1,"featured_media":9872,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[209],"tags":[],"class_list":["post-9863","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation-effects"],"acf":[],"yoast_head":"\nPixel Background Animation in JavaScript — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Pixel Background Animation in JavaScript. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pixel Background Animation in JavaScript — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Pixel Background Animation in JavaScript. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-12T18:09:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T11:12:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Pixel-Background-Animation-in-JavaScript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Pixel Background Animation in JavaScript\",\"datePublished\":\"2024-01-12T18:09:00+00:00\",\"dateModified\":\"2024-01-22T11:12:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/\"},\"wordCount\":227,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Pixel-Background-Animation-in-JavaScript.png\",\"articleSection\":[\"Animation & Effects\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/\",\"url\":\"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/\",\"name\":\"Pixel Background Animation in JavaScript — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Pixel-Background-Animation-in-JavaScript.png\",\"datePublished\":\"2024-01-12T18:09:00+00:00\",\"dateModified\":\"2024-01-22T11:12:45+00:00\",\"description\":\"Here is a free code snippet to create a Pixel Background Animation in JavaScript. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Pixel-Background-Animation-in-JavaScript.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Pixel-Background-Animation-in-JavaScript.png\",\"width\":1280,\"height\":960,\"caption\":\"Pixel Background Animation in JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animation & Effects\",\"item\":\"https:\/\/codehim.com\/category\/animation-effects\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Pixel Background Animation in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pixel Background Animation in JavaScript — CodeHim","description":"Here is a free code snippet to create a Pixel Background Animation in JavaScript. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Pixel Background Animation in JavaScript — CodeHim","og_description":"Here is a free code snippet to create a Pixel Background Animation in JavaScript. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-12T18:09:00+00:00","article_modified_time":"2024-01-22T11:12:45+00:00","og_image":[{"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Pixel-Background-Animation-in-JavaScript.png","width":1280,"height":960,"type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Pixel Background Animation in JavaScript","datePublished":"2024-01-12T18:09:00+00:00","dateModified":"2024-01-22T11:12:45+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/"},"wordCount":227,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Pixel-Background-Animation-in-JavaScript.png","articleSection":["Animation & Effects"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/","url":"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/","name":"Pixel Background Animation in JavaScript — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Pixel-Background-Animation-in-JavaScript.png","datePublished":"2024-01-12T18:09:00+00:00","dateModified":"2024-01-22T11:12:45+00:00","description":"Here is a free code snippet to create a Pixel Background Animation in JavaScript. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Pixel-Background-Animation-in-JavaScript.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Pixel-Background-Animation-in-JavaScript.png","width":1280,"height":960,"caption":"Pixel Background Animation in JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/animation-effects\/pixel-background-animation-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Animation & Effects","item":"https:\/\/codehim.com\/category\/animation-effects\/"},{"@type":"ListItem","position":3,"name":"Pixel Background Animation in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":911,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9863","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=9863"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9863\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/9872"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=9863"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=9863"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=9863"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}