Scrambled Text Demo<\/title>\r\n <style>\r\n .scrambled-text-demo {\r\n font-size: 20px;\r\n font-family: sans-serif;\r\n width: 400px;\r\n margin: 50px auto;\r\n line-height: 1.5;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"scrambled-text-demo\" id=\"scrambled-text\"><\/div>\r\n\r\n<script>\r\n const element = document.getElementById(\"scrambled-text\");\r\n const finalText = `Lorem ipsum dolor sit amet consectetur adipisicing elit. \r\nSimilique pariatur dignissimos porro eius quam doloremque \r\net enim velit nobis maxime.`;\r\n\r\n const scrambleChars = \".:\";\r\n const duration = 1200; \/\/ in milliseconds\r\n const speed = 50; \/\/ time between character updates\r\n\r\n let startTime = null;\r\n const textLength = finalText.length;\r\n const scrambledArray = Array.from({ length: textLength }, () => '');\r\n\r\n function getRandomChar() {\r\n const chars = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz\" + scrambleChars;\r\n return chars[Math.floor(Math.random() * chars.length)];\r\n }\r\n\r\n function updateScrambledText(timestamp) {\r\n if (!startTime) startTime = timestamp;\r\n const elapsed = timestamp - startTime;\r\n\r\n for (let i = 0; i < textLength; i++) {\r\n const revealTime = (i \/ textLength) * duration;\r\n if (elapsed > revealTime) {\r\n scrambledArray[i] = finalText[i];\r\n } else if (finalText[i] === '\\n' || finalText[i] === ' ') {\r\n scrambledArray[i] = finalText[i];\r\n } else {\r\n scrambledArray[i] = getRandomChar();\r\n }\r\n }\r\n\r\n element.textContent = scrambledArray.join(\"\");\r\n\r\n if (elapsed < duration + 300) {\r\n requestAnimationFrame(updateScrambledText);\r\n } else {\r\n element.textContent = finalText;\r\n }\r\n }\r\n\r\n requestAnimationFrame(updateScrambledText);\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3735e0f elementor-widget elementor-widget-html\" data-id=\"3735e0f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Variable Proximity Demo<\/title>\r\n <style>\r\n .variable-proximity-demo {\r\n font-family: \"Inter\", sans-serif;\r\n font-variation-settings: 'wght' 400, 'opsz' 9;\r\n transition: font-variation-settings 0.1s linear;\r\n font-size: 2rem;\r\n padding: 100px;\r\n text-align: center;\r\n }\r\n\r\n .container {\r\n position: relative;\r\n height: 300px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\" id=\"container\">\r\n <div class=\"variable-proximity-demo\" id=\"text\">\r\n \u0634\u0645\u0627 \u0634\u0627\u0647\u062f \u06cc\u06a9 \u0631\u0648\u06cc\u062f\u0627\u062f \u0639\u062c\u06cc\u0628 \u0647\u0633\u062a\u06cc\u062f...\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n const text = document.getElementById('text');\r\n const container = document.getElementById('container');\r\n const radius = 100; \/\/ px\r\n\r\n container.addEventListener('mousemove', (e) => {\r\n const rect = text.getBoundingClientRect();\r\n const centerX = rect.left + rect.width \/ 2;\r\n const centerY = rect.top + rect.height \/ 2;\r\n\r\n const dist = Math.sqrt(Math.pow(e.clientX - centerX, 2) + Math.pow(e.clientY - centerY, 2));\r\n const proximity = Math.max(0, 1 - dist \/ radius); \/\/ 1 = closest, 0 = outside\r\n\r\n \/\/ Map proximity to font weight and optical size\r\n const weight = 400 + (1000 - 400) * proximity;\r\n const opsz = 9 + (40 - 9) * proximity;\r\n\r\n text.style.fontVariationSettings = `'wght' ${weight.toFixed(0)}, 'opsz' ${opsz.toFixed(1)}`;\r\n });\r\n\r\n container.addEventListener('mouseleave', () => {\r\n text.style.fontVariationSettings = `'wght' 400, 'opsz' 9`;\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t <div class=\"masteqr-postwarpper\" id=\"masteqr-wrap6a8dcc82e03cd\"><div style=\"text-align:left\" id=\"masteqr-post6a8dcc82e03cd\" class=\"masteqr-post\" data-size=\"300\" data-content=\"https:\/\/peopleinfo.ir\"><\/div><div class =\"mqrbtnalign\" style=\" display: flex;justify-content:left\"><div style=\"width:300px;display:flex;align-items: center;justify-content: center;font-size: small\"><a class=\"mqrdownload\" data-download=\"darddelha.png\"><span style=\"color:#fff;background:#e53463\" class=\"mqrdospan\">Download QR<\/span><\/a><span class=\"mqrprints\" id=\"printButtoncont6a8dcc82e03cd\" style=\"margin-left:10px;color:#fff;background:#e53463\";>Print QR<\/span>\n <\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Scrambled Text Demo Variable Proximity Demo \u0634\u0645\u0627 \u0634\u0627\u0647\u062f \u06cc\u06a9 \u0631\u0648\u06cc\u062f\u0627\u062f \u0639\u062c\u06cc\u0628 \u0647\u0633\u062a\u06cc\u062f… Download QRPrint QR<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_rtcl_gb_attr":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"default","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"class_list":["post-2537","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/peopleinfo.ir\/index.php?rest_route=\/wp\/v2\/pages\/2537","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/peopleinfo.ir\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/peopleinfo.ir\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/peopleinfo.ir\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/peopleinfo.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2537"}],"version-history":[{"count":27,"href":"https:\/\/peopleinfo.ir\/index.php?rest_route=\/wp\/v2\/pages\/2537\/revisions"}],"predecessor-version":[{"id":2586,"href":"https:\/\/peopleinfo.ir\/index.php?rest_route=\/wp\/v2\/pages\/2537\/revisions\/2586"}],"wp:attachment":[{"href":"https:\/\/peopleinfo.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n Scrambled Text Demo<\/title>\r\n <style>\r\n .scrambled-text-demo {\r\n font-size: 20px;\r\n font-family: sans-serif;\r\n width: 400px;\r\n margin: 50px auto;\r\n line-height: 1.5;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"scrambled-text-demo\" id=\"scrambled-text\"><\/div>\r\n\r\n<script>\r\n const element = document.getElementById(\"scrambled-text\");\r\n const finalText = `Lorem ipsum dolor sit amet consectetur adipisicing elit. \r\nSimilique pariatur dignissimos porro eius quam doloremque \r\net enim velit nobis maxime.`;\r\n\r\n const scrambleChars = \".:\";\r\n const duration = 1200; \/\/ in milliseconds\r\n const speed = 50; \/\/ time between character updates\r\n\r\n let startTime = null;\r\n const textLength = finalText.length;\r\n const scrambledArray = Array.from({ length: textLength }, () => '');\r\n\r\n function getRandomChar() {\r\n const chars = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz\" + scrambleChars;\r\n return chars[Math.floor(Math.random() * chars.length)];\r\n }\r\n\r\n function updateScrambledText(timestamp) {\r\n if (!startTime) startTime = timestamp;\r\n const elapsed = timestamp - startTime;\r\n\r\n for (let i = 0; i < textLength; i++) {\r\n const revealTime = (i \/ textLength) * duration;\r\n if (elapsed > revealTime) {\r\n scrambledArray[i] = finalText[i];\r\n } else if (finalText[i] === '\\n' || finalText[i] === ' ') {\r\n scrambledArray[i] = finalText[i];\r\n } else {\r\n scrambledArray[i] = getRandomChar();\r\n }\r\n }\r\n\r\n element.textContent = scrambledArray.join(\"\");\r\n\r\n if (elapsed < duration + 300) {\r\n requestAnimationFrame(updateScrambledText);\r\n } else {\r\n element.textContent = finalText;\r\n }\r\n }\r\n\r\n requestAnimationFrame(updateScrambledText);\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3735e0f elementor-widget elementor-widget-html\" data-id=\"3735e0f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Variable Proximity Demo<\/title>\r\n <style>\r\n .variable-proximity-demo {\r\n font-family: \"Inter\", sans-serif;\r\n font-variation-settings: 'wght' 400, 'opsz' 9;\r\n transition: font-variation-settings 0.1s linear;\r\n font-size: 2rem;\r\n padding: 100px;\r\n text-align: center;\r\n }\r\n\r\n .container {\r\n position: relative;\r\n height: 300px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\" id=\"container\">\r\n <div class=\"variable-proximity-demo\" id=\"text\">\r\n \u0634\u0645\u0627 \u0634\u0627\u0647\u062f \u06cc\u06a9 \u0631\u0648\u06cc\u062f\u0627\u062f \u0639\u062c\u06cc\u0628 \u0647\u0633\u062a\u06cc\u062f...\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n const text = document.getElementById('text');\r\n const container = document.getElementById('container');\r\n const radius = 100; \/\/ px\r\n\r\n container.addEventListener('mousemove', (e) => {\r\n const rect = text.getBoundingClientRect();\r\n const centerX = rect.left + rect.width \/ 2;\r\n const centerY = rect.top + rect.height \/ 2;\r\n\r\n const dist = Math.sqrt(Math.pow(e.clientX - centerX, 2) + Math.pow(e.clientY - centerY, 2));\r\n const proximity = Math.max(0, 1 - dist \/ radius); \/\/ 1 = closest, 0 = outside\r\n\r\n \/\/ Map proximity to font weight and optical size\r\n const weight = 400 + (1000 - 400) * proximity;\r\n const opsz = 9 + (40 - 9) * proximity;\r\n\r\n text.style.fontVariationSettings = `'wght' ${weight.toFixed(0)}, 'opsz' ${opsz.toFixed(1)}`;\r\n });\r\n\r\n container.addEventListener('mouseleave', () => {\r\n text.style.fontVariationSettings = `'wght' 400, 'opsz' 9`;\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t <div class=\"masteqr-postwarpper\" id=\"masteqr-wrap6a8dcc82e03cd\"><div style=\"text-align:left\" id=\"masteqr-post6a8dcc82e03cd\" class=\"masteqr-post\" data-size=\"300\" data-content=\"https:\/\/peopleinfo.ir\"><\/div><div class =\"mqrbtnalign\" style=\" display: flex;justify-content:left\"><div style=\"width:300px;display:flex;align-items: center;justify-content: center;font-size: small\"><a class=\"mqrdownload\" data-download=\"darddelha.png\"><span style=\"color:#fff;background:#e53463\" class=\"mqrdospan\">Download QR<\/span><\/a><span class=\"mqrprints\" id=\"printButtoncont6a8dcc82e03cd\" style=\"margin-left:10px;color:#fff;background:#e53463\";>Print QR<\/span>\n <\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Scrambled Text Demo Variable Proximity Demo \u0634\u0645\u0627 \u0634\u0627\u0647\u062f \u06cc\u06a9 \u0631\u0648\u06cc\u062f\u0627\u062f \u0639\u062c\u06cc\u0628 \u0647\u0633\u062a\u06cc\u062f… Download QRPrint QR<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_rtcl_gb_attr":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"default","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"class_list":["post-2537","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/peopleinfo.ir\/index.php?rest_route=\/wp\/v2\/pages\/2537","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/peopleinfo.ir\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/peopleinfo.ir\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/peopleinfo.ir\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/peopleinfo.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2537"}],"version-history":[{"count":27,"href":"https:\/\/peopleinfo.ir\/index.php?rest_route=\/wp\/v2\/pages\/2537\/revisions"}],"predecessor-version":[{"id":2586,"href":"https:\/\/peopleinfo.ir\/index.php?rest_route=\/wp\/v2\/pages\/2537\/revisions\/2586"}],"wp:attachment":[{"href":"https:\/\/peopleinfo.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}