{"id":5481,"date":"2024-01-11T16:40:00","date_gmt":"2024-01-11T16:40:00","guid":{"rendered":"https:\/\/codehim.com\/?p=5481"},"modified":"2024-01-22T14:44:37","modified_gmt":"2024-01-22T09:44:37","slug":"javascript-confetti-explosion-effect","status":"publish","type":"post","link":"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/","title":{"rendered":"JavaScript Confetti Explosion Effect"},"content":{"rendered":"<p>Confetti.js is a lightweight JavaScript plugin to create a confetti celebration explosion effect. It draws confetti graphics on the HTML canvas element. The plugin allows you to render confetti effect on any JavaScript event, like click, hover, or resize. So, you can use this animation effect for various purposes on the webpage.<\/p>\n<p>The confetti effect is useful to implement on the welcome, congratulations, or celebration webpage. Anyhow, you can also integrate it for various purposes like the <a href=\"https:\/\/codehim.com\/html5-css3\/css-background-triangle-pattern-jquery-triangularize-js\/\" target=\"_blank\" rel=\"noopener\">background of the hero section<\/a>.<\/p>\n<p>Basically, there are no configurable options to customize the working of the plugin. But you can modify the function file to get the desired output. Like you can redefine colors, confetti size, spinning values, and the round of confetti, etc. Moreover, you have full control over the canvas element, you can style it according to your needs.<\/p>\n<h2>How to Create Confetti Explosion Effect<\/h2>\n<p>1. In the very first step, create HTML canvas element with the class name <code>\"confetti\"<\/code> and define its unique id &#8220;canvas&#8221;.<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;canvas class=\"confetti\" id=\"canvas\"&gt;&lt;\/canvas&gt;\r\n<\/pre>\n<p>2. After that, style the confetti container using CSS. Select the <code>\"confetti\"<\/code> class and define its max-width, display, margin, and border property as follows. Use the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/user-select\" target=\"_blank\" rel=\"noopener\">CSS user-select property<\/a> to forbade text selection while clicking for confetti explosion.<\/p>\n<pre class=\"prettyprint linenums lang-css\">.confetti{\r\n   max-width: 640px;\r\n   display: block;\r\n   margin: 0 auto;\r\n   border: 1px solid #ddd;\r\n   user-select: none;\r\n}\r\n<\/pre>\n<p>3. Add the &#8220;confetti.js&#8221; function between the &lt;script&gt; and &lt;\/script&gt; tag before the closing of body tag and done.<\/p>\n<pre class=\"prettyprint linenums lang-js\">\/\/-----------Var Inits--------------\r\ncanvas = document.getElementById(\"canvas\");\r\nctx = canvas.getContext(\"2d\");\r\ncanvas.width = window.innerWidth;\r\ncanvas.height = window.innerHeight;\r\ncx = ctx.canvas.width \/ 2;\r\ncy = ctx.canvas.height \/ 2;\r\n\r\nlet confetti = [];\r\nconst confettiCount = 300;\r\nconst gravity = 0.5;\r\nconst terminalVelocity = 5;\r\nconst drag = 0.075;\r\nconst colors = [\r\n{ front: 'red', back: 'darkred' },\r\n{ front: 'green', back: 'darkgreen' },\r\n{ front: 'blue', back: 'darkblue' },\r\n{ front: 'yellow', back: 'darkyellow' },\r\n{ front: 'orange', back: 'darkorange' },\r\n{ front: 'pink', back: 'darkpink' },\r\n{ front: 'purple', back: 'darkpurple' },\r\n{ front: 'turquoise', back: 'darkturquoise' }];\r\n\r\n\r\n\/\/-----------Functions--------------\r\nresizeCanvas = () =&gt; {\r\n  canvas.width = window.innerWidth;\r\n  canvas.height = window.innerHeight;\r\n  cx = ctx.canvas.width \/ 2;\r\n  cy = ctx.canvas.height \/ 2;\r\n};\r\n\r\nrandomRange = (min, max) =&gt; Math.random() * (max - min) + min;\r\n\r\ninitConfetti = () =&gt; {\r\n  for (let i = 0; i &lt; confettiCount; i++) {\r\n    confetti.push({\r\n      color: colors[Math.floor(randomRange(0, colors.length))],\r\n      dimensions: {\r\n        x: randomRange(10, 20),\r\n        y: randomRange(10, 30) },\r\n\r\n      position: {\r\n        x: randomRange(0, canvas.width),\r\n        y: canvas.height - 1 },\r\n\r\n      rotation: randomRange(0, 2 * Math.PI),\r\n      scale: {\r\n        x: 1,\r\n        y: 1 },\r\n\r\n      velocity: {\r\n        x: randomRange(-25, 25),\r\n        y: randomRange(0, -50) } });\r\n\r\n\r\n  }\r\n};\r\n\r\n\/\/---------Render-----------\r\nrender = () =&gt; {\r\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n  confetti.forEach((confetto, index) =&gt; {\r\n    let width = confetto.dimensions.x * confetto.scale.x;\r\n    let height = confetto.dimensions.y * confetto.scale.y;\r\n\r\n    \/\/ Move canvas to position and rotate\r\n    ctx.translate(confetto.position.x, confetto.position.y);\r\n    ctx.rotate(confetto.rotation);\r\n\r\n    \/\/ Apply forces to velocity\r\n    confetto.velocity.x -= confetto.velocity.x * drag;\r\n    confetto.velocity.y = Math.min(confetto.velocity.y + gravity, terminalVelocity);\r\n    confetto.velocity.x += Math.random() &gt; 0.5 ? Math.random() : -Math.random();\r\n\r\n    \/\/ Set position\r\n    confetto.position.x += confetto.velocity.x;\r\n    confetto.position.y += confetto.velocity.y;\r\n\r\n    \/\/ Delete confetti when out of frame\r\n    if (confetto.position.y &gt;= canvas.height) confetti.splice(index, 1);\r\n\r\n    \/\/ Loop confetto x position\r\n    if (confetto.position.x &gt; canvas.width) confetto.position.x = 0;\r\n    if (confetto.position.x &lt; 0) confetto.position.x = canvas.width;\r\n\r\n    \/\/ Spin confetto by scaling y\r\n    confetto.scale.y = Math.cos(confetto.position.y * 0.1);\r\n    ctx.fillStyle = confetto.scale.y &gt; 0 ? confetto.color.front : confetto.color.back;\r\n\r\n    \/\/ Draw confetti\r\n    ctx.fillRect(-width \/ 2, -height \/ 2, width, height);\r\n\r\n    \/\/ Reset transform matrix\r\n    ctx.setTransform(1, 0, 0, 1, 0, 0);\r\n  });\r\n\r\n  \/\/ Fire off another round of confetti\r\n  if (confetti.length &lt;= 10) initConfetti();\r\n\r\n  window.requestAnimationFrame(render);\r\n};\r\n\r\n\/\/---------Execution--------\r\ninitConfetti();\r\nrender();\r\n\r\n\/\/----------Resize----------\r\nwindow.addEventListener('resize', function () {\r\n  resizeCanvas();\r\n});\r\n\r\n\/\/------------Click------------\r\nwindow.addEventListener('click', function () {\r\n  initConfetti();\r\n});\r\n<\/pre>\n<p>That&#8217;s all! hopefully, you have successfully created the confetti explosion effect using this JavaScript plugin. If you have any questions or suggestions, let me know by comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Confetti.js is a lightweight JavaScript plugin to create a confetti celebration explosion effect. It draws confetti graphics on the HTML&#8230;<\/p>\n","protected":false},"author":1,"featured_media":5485,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[209],"tags":[],"class_list":["post-5481","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation-effects"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JavaScript Confetti Explosion Effect &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a JavaScript code snippet to create confetti explosion effect with canvas. You can view demo and download code for confetti effect.\" \/>\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\/javascript-confetti-explosion-effect\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Confetti Explosion Effect &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a JavaScript code snippet to create confetti explosion effect with canvas. You can view demo and download code for confetti effect.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/\" \/>\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-11T16:40:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T09:44:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/javascript-confetti-explosion-effect.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1028\" \/>\n\t<meta property=\"og:image:height\" content=\"771\" \/>\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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"JavaScript Confetti Explosion Effect\",\"datePublished\":\"2024-01-11T16:40:00+00:00\",\"dateModified\":\"2024-01-22T09:44:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/\"},\"wordCount\":257,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/javascript-confetti-explosion-effect.png\",\"articleSection\":[\"Animation &amp; Effects\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/\",\"url\":\"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/\",\"name\":\"JavaScript Confetti Explosion Effect &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/javascript-confetti-explosion-effect.png\",\"datePublished\":\"2024-01-11T16:40:00+00:00\",\"dateModified\":\"2024-01-22T09:44:37+00:00\",\"description\":\"Here is a JavaScript code snippet to create confetti explosion effect with canvas. You can view demo and download code for confetti effect.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/javascript-confetti-explosion-effect.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/javascript-confetti-explosion-effect.png\",\"width\":1028,\"height\":771,\"caption\":\"JavaScript Confetti Explosion Effect\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animation &amp; Effects\",\"item\":\"https:\/\/codehim.com\/category\/animation-effects\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript Confetti Explosion Effect\"}]},{\"@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":"JavaScript Confetti Explosion Effect &#8212; CodeHim","description":"Here is a JavaScript code snippet to create confetti explosion effect with canvas. You can view demo and download code for confetti effect.","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\/javascript-confetti-explosion-effect\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Confetti Explosion Effect &#8212; CodeHim","og_description":"Here is a JavaScript code snippet to create confetti explosion effect with canvas. You can view demo and download code for confetti effect.","og_url":"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-11T16:40:00+00:00","article_modified_time":"2024-01-22T09:44:37+00:00","og_image":[{"width":1028,"height":771,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/javascript-confetti-explosion-effect.png","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":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"JavaScript Confetti Explosion Effect","datePublished":"2024-01-11T16:40:00+00:00","dateModified":"2024-01-22T09:44:37+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/"},"wordCount":257,"commentCount":3,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/javascript-confetti-explosion-effect.png","articleSection":["Animation &amp; Effects"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/","url":"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/","name":"JavaScript Confetti Explosion Effect &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/javascript-confetti-explosion-effect.png","datePublished":"2024-01-11T16:40:00+00:00","dateModified":"2024-01-22T09:44:37+00:00","description":"Here is a JavaScript code snippet to create confetti explosion effect with canvas. You can view demo and download code for confetti effect.","breadcrumb":{"@id":"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/javascript-confetti-explosion-effect.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/javascript-confetti-explosion-effect.png","width":1028,"height":771,"caption":"JavaScript Confetti Explosion Effect"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/animation-effects\/javascript-confetti-explosion-effect\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Animation &amp; Effects","item":"https:\/\/codehim.com\/category\/animation-effects\/"},{"@type":"ListItem","position":3,"name":"JavaScript Confetti Explosion Effect"}]},{"@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":53465,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/5481","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=5481"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/5481\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/5485"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=5481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=5481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=5481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}