{"id":3395,"date":"2021-05-18T11:55:29","date_gmt":"2021-05-18T11:55:29","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3395"},"modified":"2023-02-28T04:48:31","modified_gmt":"2023-02-28T04:48:31","slug":"js-tutorial-bvambient-vanillajs-background-particles","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/js-tutorial-bvambient-vanillajs-background-particles\/","title":{"rendered":"JS Tutorial &#8211; BVAmbient &#8211; VanillaJS Background Particles"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; Collection of hand-picked free\u00a0<strong>vanilla JavaScript background effect<\/strong>\u00a0code examples:\u00a0<em>change background color or image, animated, with canvas<\/em>\u00a0and etc.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"JS Tutorial - BVAmbient - VanillaJS Background Particles\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/QWrWYza?default-tab=result&amp;theme-id=dark\" height=\"500\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/QWrWYza\"><br \/>\nJS Tutorial &#8211; BVAmbient &#8211; VanillaJS Background Particles<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\/* Check External Source: bvambient.js *\/ \r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n                   var demo1 = new BVAmbient({\r\n            selector: \"#ambient\",\r\n            fps: 60,\r\n            max_transition_speed: 12000,\r\n            min_transition_speed: 8000,\r\n            particle_number: 30,\r\n            particle_maxwidth: 60,\r\n            particle_minwidth: 10,\r\n            particle_radius: 50,\r\n            particle_opacity: true,\r\n            particle_colision_change: true,\r\n            particle_background: \"#58c70c\",\r\n            particle_image: {\r\n              image: false,\r\n              src: \"\"\r\n            },\r\n            responsive: [\r\n                {\r\n                  breakpoint: 768,\r\n                  settings: {\r\n                    particle_number: \"15\"\r\n                  }\r\n                },\r\n                {\r\n                  breakpoint: 480,\r\n                  settings: {\r\n                    particle_number: \"10\"\r\n                  }\r\n                }\r\n            ]\r\n          });\r\n    });<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; Collection of hand-picked free\u00a0vanilla JavaScript background effect\u00a0code examples:\u00a0change background <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/js-tutorial-bvambient-vanillajs-background-particles\/\" title=\"JS Tutorial &#8211; BVAmbient &#8211; VanillaJS Background Particles\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3821,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[325,328,264,263,327,103,227],"newstopic":[],"class_list":{"0":"post-3395","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-background-effects","9":"tag-bvambient","10":"tag-javascript-tutorial","11":"tag-js-tutorial","12":"tag-vanillajs","13":"tag-web-design","14":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3395"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3395\/revisions"}],"predecessor-version":[{"id":3396,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3395\/revisions\/3396"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3821"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3395"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}