{"id":195,"date":"2024-02-28T08:39:04","date_gmt":"2024-02-28T07:39:04","guid":{"rendered":"https:\/\/trauma.empty.am\/?p=195"},"modified":"2024-02-28T08:39:04","modified_gmt":"2024-02-28T07:39:04","slug":"reflection","status":"publish","type":"post","link":"https:\/\/trauma.empty.am\/?p=195","title":{"rendered":"Reflection"},"content":{"rendered":"\n<style class=\"wpcode-css-snippet\">:root {\r\n\t--alpha: 0.8; \/\/ We're changing this value via JS with interaction\r\n}\r\n\r\n\/\/ You can change the typo color here. Just edit the RGB:\r\n\r\n.heading {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n}\r\n\r\n.typo {\r\n\tcolor: black;\r\n\tcursor: default;\r\n\tmargin: 0;\r\n\toutline: none;\r\n\ttransition: color 0.1s linear; \/\/ To work with JS\r\n}<\/style>\n<div class=\"heading\">\n    <span class=\"typo\">How many times do I exist?<br>In how many souls?<br>How many hearts beat<br>in my memory?<br>How many reflection do I have?<br>In how many souls?<\/span>\n<\/div>\n<script>\/* \r\n * HOVER ALPHA EFFECT\r\n * Move your mouse or drag your finger to change the alpha opacity color of the text, and to see 3 colorful text-shadow effects.\r\n *\r\n * Headline is editable, so place your cursor in the text and type anything else you'd like.\r\n *\r\n * #028 - #100DaysOfCode\r\n * By ilithya | 2019\r\n *\/\r\n\r\nfunction getTwoDecimal(num) {\r\n\t\/\/ The +0.5 smoothens the transition change\r\n\treturn parseFloat(num.toFixed(2) + 0.5);\r\n}\r\n\r\nconst mouse = {\r\n\tdecimal(coord) {\r\n\t\treturn getTwoDecimal(coord \/ 1000);\r\n\t},\r\n\tx(e) {\r\n\t\treturn Math.abs(e.clientX - (window.innerWidth \/ 2));\r\n\t},\r\n\ty(e) {\r\n\t\treturn Math.abs(e.clientY - (window.innerHeight \/ 2));\r\n\t}\r\n};\r\n\r\nconst changeTextAlphaVal = (txt, e) => {\r\n\tconst root = document.querySelector(\":root\");\r\n\tconst cssVar = \"--alpha\";\r\n\tconst currentAlpha = getComputedStyle(root)\r\n\t.getPropertyValue(cssVar)\r\n\t.trim();\r\n\r\n\tconst max = parseFloat(currentAlpha);\r\n\tconst dx = mouse.decimal(mouse.x(e));\r\n\tconst dy = mouse.decimal(mouse.y(e));\r\n\r\n\tlet alphaVal;\r\n\tif (dx <= 0) {\r\n\t\talphaVal = dy >= max ? dy : getTwoDecimal(max - dy);\r\n\t} else {\r\n\t\talphaVal = dx >= max ? dx : getTwoDecimal(max - dx);\r\n\t}\r\n\r\n\ttxt.style.setProperty(cssVar, alphaVal);\t\r\n};\r\n\r\nfunction createShadow(e, currTarget) {\r\n\t\/\/ Walk effect based on Wes Bos' Mouse Move Shadow Exercise\r\n\t\/\/ https:\/\/tinyurl.com\/touabxe\r\n\tconst walk = Math.round(Math.max(window.innerWidth, window.innerHeight)\/30); \/\/ Or use 150?\r\n\tconst coordWalk = (coord, side) => Math.round((coord \/ side * walk) - (walk \/ 2));\r\n\tconst xWalk = coordWalk(e.clientX, currTarget.offsetWidth);\r\n\tconst yWalk = coordWalk(e.clientY, currTarget.offsetHeight);\r\n\r\n\tconst pink = [255, 0, 139];\r\n\tconst blue = [0, 255, 255];\r\n\tconst yellow = [255, 255, 0];\r\n\tconst typoAlpha = 0.6;\r\n\r\n\tconst typo = currTarget.querySelector(\".typo\");\r\n\tchangeTextAlphaVal(typo, e); \/\/ Comment this if you don't want the text alpha opacity to change on interaction\r\n\r\n\ttypo.style.textShadow = `\r\n\t  ${xWalk}px ${yWalk}px 0 rgba(${pink}, ${typoAlpha}),\r\n\t  ${xWalk * -3}px ${yWalk * 2}px 0 rgba(${blue}, ${typoAlpha}),\r\n\t  ${xWalk * -2}px ${yWalk * -1}px 0 rgba(${yellow}, ${typoAlpha})\r\n\t`;\r\n}\r\n\r\nfunction onMouseMove(e) {\r\n\tcreateShadow(e, e.currentTarget);\r\n}\r\nfunction onTouchMove(e) {\r\n\tcreateShadow(e.changedTouches[0], e.currentTarget);\r\n}\r\n\r\nconst heading = document.querySelector(\".heading\");\r\nheading.addEventListener(\"mousemove\", onMouseMove);\r\nheading.addEventListener(\"touchmove\", onTouchMove);<\/script>\n","protected":false},"excerpt":{"rendered":"<p>How many times do I exist?In how many souls?How many hearts beatin my memory?How many reflection do I have?In how many souls?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-195","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/trauma.empty.am\/index.php?rest_route=\/wp\/v2\/posts\/195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trauma.empty.am\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trauma.empty.am\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trauma.empty.am\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trauma.empty.am\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=195"}],"version-history":[{"count":1,"href":"https:\/\/trauma.empty.am\/index.php?rest_route=\/wp\/v2\/posts\/195\/revisions"}],"predecessor-version":[{"id":198,"href":"https:\/\/trauma.empty.am\/index.php?rest_route=\/wp\/v2\/posts\/195\/revisions\/198"}],"wp:attachment":[{"href":"https:\/\/trauma.empty.am\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trauma.empty.am\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trauma.empty.am\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}