{"id":1669,"date":"2023-07-27T14:19:36","date_gmt":"2023-07-27T11:19:36","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1669"},"modified":"2023-07-27T14:19:38","modified_gmt":"2023-07-27T11:19:38","slug":"text-effect","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/effect\/1669\/","title":{"rendered":"Text effect"},"content":{"rendered":"<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Text effect with Jquery\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/ZwW6Uxcd_wU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;link href=&quot;https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@700&amp;amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;\n\n  &lt;main id=&quot;app&quot; class=&quot;loading&quot;&gt;\n    &lt;svg viewbox=&quot;-50 0 100 20&quot;&gt;\n      &lt;text x=&quot;0&quot; y=&quot;15&quot;&gt;Profidev_js&lt;\/text&gt;\n    &lt;\/svg&gt;\n  &lt;\/main&gt;\n  &lt;img src=&quot;https:\/\/assets.codepen.io\/13471\/silver-glitter-background.png&quot; loading=&quot;lazy&quot;&gt;\n\n  &lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js&quot;  &gt;&lt;\/script&gt; <\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">:root {\n\t--glitter: url(&quot;https:\/\/assets.codepen.io\/13471\/silver-glitter-background.png&quot;);\n\t--ratio-x: .5;\n\t--ratio-y: .75;\n\t--from-center: .5;\n  }\n  \n  main {\n\t--bgoffsetx: calc( 2.9px * var(--ratio-x));\n\t--bgoffsety: calc( 4.3px * var(--ratio-y));\n\t--pointerx: calc( 100% * var(--ratio-x));\n\t--pointery: calc( 100% * var(--ratio-y));\n\t--h: calc( 360deg * var( --from-center ) );\n\t--s: calc( 90% * var( --from-center ) );\n\tbackground: linear-gradient(135deg, hsl(28deg, var(--s), 15%), hsl(198deg, var(--s), 15%)), var(--glitter), var(--glitter), radial-gradient(farthest-corner circle at var(--pointerx) var(--pointery), white 20px, rgba(237, 222, 222, 0.38) 150px, black 65%);\n\tbackground-position: calc( 70% + var(--bgoffsetx) ) calc( 70% + var(--bgoffsety) ), calc( 30% - var(--bgoffsetx) ) calc( 30% - var(--bgoffsety) );\n\tbackground-size: cover, 560px auto, 400px auto, cover;\n\tbackground-blend-mode: overlay, multiply, color, overlay;\n\ttransition: opacity 4s ease-out;\n  }\n  \n  main.loading {\n\topacity: 0;\n  }\n  \n  main {\n\timage-rendering: optimizeQuality;\n\ttransform: translate3d(0, 0, 0.01px);\n  }\n  \n  main * {\n\tpointer-events: none;\n\ttext-anchor: middle;\n  }\n  \n  main svg {\n\tmix-blend-mode: color-dodge;\n\tfill: #908190;\n\topacity: calc( 1.5 - var(--from-center) );\n\tfilter: drop-shadow(0 0 30px black) drop-shadow(0 0 10px black) brightness(1.3);\n  }\n  \n  body {\n\tcolor: rgb(16, 16, 16);\n\tbackground: rgb(0, 0, 0);\n\tfont-family: &quot;Cinzel&quot;, sans-serif;\n  }\n  \n  html, body, main {\n\tbox-sizing: border-box;\n\tmargin: 0;\n\tpadding: 0;\n\theight: 100%;\n\twidth: 100%;\n\tdisplay: flex;\n\tplace-items: center;\n\t\/* grid-row: 1; *\/\n  }\n  \n  img {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\topacity: 0;\n  }\n  \n  .social-icon {\n\tstroke-width: 1.25;\n\tstroke: cyan;\n\tfill: none;\n\tstroke-linecap: round;\n\tstroke-linejoin: round;\n\tposition: absolute;\n\tbottom: 10px;\n\tright: 10px;\n\twidth: 24px;\n\theight: 24px;\n\tz-index: 10;\n\t-webkit-animation: iconsLoad 10s ease both 1s;\n\t\t\tanimation: iconsLoad 10s ease both 1s;\n  }\n  \n  .social-icon.twitter {\n\tright: 40px;\n\t-webkit-animation-delay: 0s;\n\t\t\tanimation-delay: 0s;\n  }\n  \n  @-webkit-keyframes iconsLoad {\n\tfrom {\n\t  opacity: 0;\n\t}\n\tto {\n\t  opacity: 1;\n\t}\n  }\n  \n  @keyframes iconsLoad {\n\tfrom {\n\t  opacity: 0;\n\t}\n\tto {\n\t  opacity: 1;\n\t}\n  }<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">\n\/\/ \ud83d\udc46 mouse-move following code\n$(&quot;main&quot;).on(&quot;pointermove&quot;, (e) =&gt; {\n    interacted = true;\n    const { x, y } = e.originalEvent;\n    const BOX = e.target.getBoundingClientRect();\n    const POINT = { x: x - BOX.x, y: y - BOX.y };\n    const RATIO = { x: POINT.x \/ BOX.width, y: POINT.y \/ BOX.height };\n    const CENTER = fromCenter( RATIO );\n    \/\/ set some css variables referenced in css\n    e.target.style.setProperty( &quot;--ratio-x&quot;, RATIO.x );\n    e.target.style.setProperty( &quot;--ratio-y&quot;, RATIO.y );\n    e.target.style.setProperty( &quot;--from-center&quot;, CENTER );\n  });\n  \n  \/\/ maths \ud83e\udd37\u200d\u2640\ufe0f\n  function fromCenter({ x, y }) {\n    return Math.min(Math.max( 0, Math.sqrt( (y - .5) * (y - .5) + (x  - .5) * (x - .5) ) \/ .5 ), 1 );\n  }\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  let interacted = false;\n  \n  $(&quot;img&quot;).on(&quot;load&quot;, () =&gt; {\n    \/\/ \u23f0 lazy load triggers opacity  \n    $(&quot;main&quot;).removeClass(&quot;loading&quot;);\n    \n    \/\/ \u2728 little intro demo animation \n    $({foo:0}).animate({foo:(Math.PI*3)}, {\n        duration: 8000,\n        easing: &quot;swing&quot;, \n        step: function(val) {\n          if ( !interacted ) {\n            document.querySelector(&quot;#app&quot;).style.setProperty( \n              &quot;--ratio-x&quot;, (Math.cos(val) + 1.5) \/ 3 \n            );\n            document.querySelector(&quot;#app&quot;).style.setProperty( \n              &quot;--ratio-y&quot;, (Math.sin(val) + 2) \/ 4  \n            );\n          }\n        } \n    });  \n  });<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1670,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[40],"class_list":["post-1669","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-effect","tag-text"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1669","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1669"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1669\/revisions"}],"predecessor-version":[{"id":1671,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1669\/revisions\/1671"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1670"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1669"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1669"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1669"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}