{"id":1409,"date":"2023-05-08T10:49:00","date_gmt":"2023-05-08T07:49:00","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1409"},"modified":"2023-05-07T13:53:12","modified_gmt":"2023-05-07T10:53:12","slug":"cursor-text-screen","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/effect\/1409\/","title":{"rendered":"Cursor Text Screen"},"content":{"rendered":"<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img fetchpriority=\"high\" decoding=\"async\" width=\"808\" height=\"387\" src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/05\/peek-2023-05-07-12-48.gif\" alt=\"Cursor Text Screen\" class=\"wp-image-1410 size-full\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div><\/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;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;div class=&quot;cursor&quot;&gt;&lt;\/div&gt;\n  &lt;div class=&quot;shapes&quot;&gt;\n    &lt;div class=&quot;shape shape-1&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;shape shape-2&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;shape shape-3&quot;&gt;&lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;content&quot;&gt;\n    &lt;h1&gt;Hello there!&lt;\/h1&gt;\n  &lt;\/div&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;}\">body {\n\tfont-family: Montserrat, sans-serif;\n\tfont-weight: 900;\n\n  }\n  body, body * {\n\tcursor: none;\n\t\n  }\n\n  .shapes {\n\tposition: relative;\n\theight: 100vh;\n\twidth: 100vw;\n\tbackground: #2128bd;\n\toverflow: hidden;\n  }\n  \n  .shape {\n\twill-change: transform;\n\tposition: absolute;\n\tborder-radius: 50%;\n  }\n  .shape.shape-1 {\n\tbackground: #005ffe;\n\twidth: 650px;\n\theight: 650px;\n\tmargin: -325px 0 0 -325px;\n  }\n  .shape.shape-2 {\n\tbackground: #ffe5e3;\n\twidth: 440px;\n\theight: 440px;\n\tmargin: -220px 0 0 -220px;\n  }\n  .shape.shape-3 {\n\tbackground: #ffcc57;\n\twidth: 270px;\n\theight: 270px;\n\tmargin: -135px 0 0 -135px;\n  }\n  \n  .content {\n\ttop: 0;\n\tleft: 0;\n\tposition: absolute;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\theight: 100vh;\n\twidth: 100vw;\n\tbackground: #fff;\n\tmix-blend-mode: screen;\n  }\n  \n  h1 {\n\tfont-size: 100px;\n\tcolor: #000;\n\tmargin: 0;\n\ttext-align: center;\n  }\n  @media (min-width: 419px) {\n\th1 {\n\t  font-size: 100px;\n\t  font-size: calc((0.0989119683 * 100vw + (58.5558852621px)));\n\t}\n  }\n  @media (min-width: 1430px) {\n\th1 {\n\t  font-size: 200px;\n\t}\n  }\n  \n  .cursor {\n\tposition: fixed;\n\tbackground: #2128bd;\n\twidth: 20px;\n\theight: 20px;\n\tmargin: -10px 0 0 -10px;\n\tborder-radius: 50%;\n\twill-change: transform;\n\t-webkit-user-select: none;\n\t   -moz-user-select: none;\n\t\t-ms-user-select: none;\n\t\t\tuser-select: none;\n\tpointer-events: none;\n\tz-index: 10000;\n  }\n  \n  ::-moz-selection {\n\tcolor: #fff;\n\tbackground: #2128bd;\n  }\n  \n  ::selection {\n\tcolor: #fff;\n\tbackground: #2128bd;\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;}\">document.body.addEventListener(&quot;mousemove&quot;, evt =&gt; {\n    const mouseX = evt.clientX;\n    const mouseY = evt.clientY;\n  \n    gsap.set(&quot;.cursor&quot;, {\n      x: mouseX,\n      y: mouseY });\n  \n    gsap.to(&quot;.shape&quot;, {\n      x: mouseX,\n      y: mouseY,\n      stagger: -0.1 });\n  \n  });<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1410,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[40],"class_list":["post-1409","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\/1409","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=1409"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1409\/revisions"}],"predecessor-version":[{"id":1411,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1409\/revisions\/1411"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1410"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1409"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1409"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}