{"id":5561,"date":"2023-12-28T04:51:08","date_gmt":"2023-12-28T04:51:08","guid":{"rendered":"https:\/\/graphica.pe\/noise-effect\/"},"modified":"2024-07-11T20:55:44","modified_gmt":"2024-07-11T20:55:44","slug":"noise-effect","status":"publish","type":"post","link":"https:\/\/graphica.pe\/en\/noise-effect\/","title":{"rendered":"Noise Effect"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"5561\" class=\"elementor elementor-5561 elementor-4609\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e504847 e-flex e-con-boxed e-con e-parent\" data-id=\"e504847\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-33ae88b4 elementor-widget elementor-widget-text-editor\" data-id=\"33ae88b4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We add the following CSS:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-717f485c elementor-widget elementor-widget-code-highlight\" data-id=\"717f485c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-twilight copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>\/* Efecto Noise *\/\r\nbody::before {\r\n\tposition: fixed;\r\n\ttop: -10rem;\r\n\tleft: -10rem;\r\n\tanimation: noisebg 1s steps(2) infinite;\r\n\twill-change: transform;\r\n\tbackground-image: url(\/wp-content\/uploads\/noise.png);\r\n\tbackground-position: 50%;\r\n\twidth: calc(100% + 20rem);\r\n\theight: calc(100% + 20rem);\r\n\tcontent: \"\";\r\n\tz-index: 1;\r\n\tpointer-events: none;\r\n\tbackground-size: 170px;\r\n}\r\n@keyframes noisebg {\r\n\t0% {\r\n\t\ttransform: translate3d(0, 9rem, 0)\r\n\t}\r\n\r\n\t10% {\r\n\t\ttransform: translate3d(-1rem, -4rem, 0)\r\n\t}\r\n\r\n\t20% {\r\n\t\ttransform: translate3d(-8rem, 2rem, 0)\r\n\t}\r\n\r\n\t30% {\r\n\t\ttransform: translate3d(9rem, -9rem, 0)\r\n\t}\r\n\r\n\t40% {\r\n\t\ttransform: translate3d(-2rem, 7rem, 0)\r\n\t}\r\n\r\n\t50% {\r\n\t\ttransform: translate3d(-9rem, -4rem, 0)\r\n\t}\r\n\r\n\t60% {\r\n\t\ttransform: translate3d(2rem, 6rem, 0)\r\n\t}\r\n\r\n\t70% {\r\n\t\ttransform: translate3d(7rem, -8rem, 0)\r\n\t}\r\n\r\n\t80% {\r\n\t\ttransform: translate3d(-9rem, 1rem, 0)\r\n\t}\r\n\r\n\t90% {\r\n\t\ttransform: translate3d(6rem, -5rem, 0)\r\n\t}\r\n\r\n\tto {\r\n\t\ttransform: translate3d(-7rem, 0, 0)\r\n\t}\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>We add the following CSS: \/* Efecto Noise *\/ body::before { position: fixed; top: -10rem; left: -10rem; animation: noisebg 1s steps(2) infinite; will-change: transform; background-image: url(\/wp-content\/uploads\/noise.png); background-position: 50%; width: calc(100% + 20rem); height: calc(100% + 20rem); content: &#8220;&#8221;; z-index: 1; pointer-events: none; background-size: 170px; } @keyframes noisebg { 0% { transform: translate3d(0, 9rem, 0) } [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-5561","post","type-post","status-publish","format-standard","hentry"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/posts\/5561","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/comments?post=5561"}],"version-history":[{"count":0,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/posts\/5561\/revisions"}],"wp:attachment":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/media?parent=5561"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/categories?post=5561"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/tags?post=5561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}