1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[446],{72694:function(e,n,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/blog/ru/animated-star-tutorial",function(){return t(51064)}])},31855:function(e,n,t){"use strict";t.d(n,{$:function(){return d}});var s=t(85893),a=t(11428),o=t(91674),r=t(34906),c=t.n(r);function i(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,s=new Array(n);t<n;t++)s[t]=e[t];return s}function l(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!==typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var s,a,o=[],r=!0,c=!1;try{for(t=t.call(e);!(r=(s=t.next()).done)&&(o.push(s.value),!n||o.length!==n);r=!0);}catch(i){c=!0,a=i}finally{try{r||null==t.return||t.return()}finally{if(c)throw a}}return o}}(e,n)||function(e,n){if(!e)return;if("string"===typeof e)return i(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(t);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return i(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}var d=function(e){var n=e.lang,t=e.code,r=e.log,i=void 0===r?["",""]:r,d=e.name,m=void 0===d?["index","index"]:d,u=e.isEmbeddedLog,p=l(n,2),x=p[0],h=p[1],y=l(t,2),f=y[0],g=y[1],j=l(m,2),v=j[0],_=j[1],b=l(i,2),N=b[0],S=b[1];return(0,s.jsx)("div",{className:c().double_code_snippet,children:(0,s.jsxs)("div",{className:"row",children:[(0,s.jsxs)("div",{className:"col col--50 col--tablet-50",children:[(0,s.jsx)(a.E,{language:x,name:v,code:f,consoleLog:u?N:void 0}),!u&&N&&(0,s.jsx)(o.e,{code:N})]}),(0,s.jsxs)("div",{className:"col col--50 col--tablet-50",children:[(0,s.jsx)(a.E,{language:h,name:_,code:g,consoleLog:u?S:void 0}),!u&&S&&(0,s.jsx)(o.e,{code:S})]})]})})}},91674:function(e,n,t){"use strict";t.d(n,{e:function(){return c}});var s=t(85893),a=t(5110),o=t(20722),r=t.n(o),c=function(e){var n=e.code,t=e.isCopyable;return(0,s.jsx)("div",{className:r().example_snippet,children:(0,s.jsx)("div",{className:"row",children:(0,s.jsx)("div",{className:"col col--100 col--tablet-100",children:(0,s.jsx)(a.e,{code:n,isCopyable:t,showConsole:!0})})})})}},89878:function(e,n,t){"use strict";t.d(n,{N:function(){return d}});var s=t(85893),a=t(25675),o=t.n(a),r=t(25865),c=t(51754),i=t(19094),l=t.n(i),d=function(e){var n=e.src,t=e.alt,a=e.fileTitle,i=e.maxWidth;return(0,s.jsx)("div",{className:l().post_image,style:{maxWidth:i?"".concat(i,"px"):"unset"},children:(0,s.jsx)(r.R,{type:c.ED.IMAGE,fileTitle:a,children:(0,s.jsx)(o(),{layout:"responsive",src:n,alt:t})})})}},3885:function(e,n,t){"use strict";t.d(n,{d:function(){return l}});var s=t(85893),a=(t(67294),t(94184)),o=t.n(a),r=t(98190),c=t(21820),i=t.n(c),l=function(e){var n=e.href,t=e.label,a=o().bind(i());return(0,s.jsxs)("a",{href:n,target:"_blank",rel:"noopener noreferrer",className:a(["link",i().external_link]),children:[t,(0,s.jsx)(r.aA,{className:i().external_link__icon})]})}},51064:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return _}});var s=t(85893),a=t(91192),o=t(65240),r=t(3885),c=t(67294),i=t(99353),l=t.n(i),d=function(){var e=(0,c.useRef)([]),n=function(n){e.current.forEach((function(e){if(e){var t=e.getBoundingClientRect(),s=t.left+e.clientWidth/2,a=t.top+e.clientHeight/2,o=Math.atan2(n.pageX-s,n.pageY-a)*(180/Math.PI)*-1+270;e.style.transform="rotate(".concat(o,"deg)")}}))};(0,c.useEffect)((function(){return document.addEventListener("mousemove",n),function(){document.removeEventListener("mousemove",n)}}),[]);var t=function(n,t){n&&!e.current.includes(n)&&(e.current[t]=n)};return(0,s.jsx)("div",{className:l().demo_wrapper,children:(0,s.jsxs)("div",{className:l().eyes_container,children:[(0,s.jsx)("div",{ref:function(e){return t(e,0)},className:l().eye}),(0,s.jsx)("div",{ref:function(e){return t(e,1)},className:l().eye})]})})},m=t(51754),u=t(25865),p=t(31855),x=t(76424),h=t(89878),y=t(76644),f=t(91618),g=t(13393),j=t.n(g),v={src:"/_next/static/media/figma-preview.08af264d.png",height:897,width:1533,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAIAAAD38zoCAAAAb0lEQVR42hWMwQ3CMBAE3TEf6qEFKIAy4IX4RIoUJAjRJY7t2/Vd7PnOaAJJAKssIpIbhVlrSjl0wSrztMwfb5Sf7yOJYFZhru8Lhmut1McJzzM1hhaBtn9f6T+YuY03n+4kuyCwxSyxAH0LelE9ANcKccouEgEgAAAAAElFTkSuQmCC"},_=function(){var e="<div class='container'>\n <div class='eye'></div>\n <div class='eye'></div>\n</div>";return(0,s.jsxs)(a.X,{postConfig:o.bO[o.f1.ANIMATED_STAR_TUTORIAL],heroConfig:{size:f.r4.SMALL,pattern:f.GH.CROSS},children:[(0,s.jsxs)("section",{className:"section outer",children:[(0,s.jsx)(u.R,{type:m.ED.CUSTOM,filesCount:1,fileTitle:"star_final_demo.exe",pattern:m.Rg.CROSS,children:(0,s.jsx)(d,{})}),(0,s.jsx)("p",{className:"explanation",children:"\u041d\u0430\u0447\u043d\u0438\u0442\u0435 \u0434\u0432\u0438\u0433\u0430\u0442\u044c \u043a\u0443\u0440\u0441\u043e\u043c \u043f\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u2014 \u0442\u0430\u043a\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u0432 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435"})]}),(0,s.jsxs)("section",{className:"section outer",children:[(0,s.jsx)("h2",{children:"\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0430\u0431\u043e\u0442\u044b"}),(0,s.jsxs)("p",{children:["\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0441\u0430\u043c\u0443 \u0437\u0432\u0435\u0437\u0434\u0443. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:",(0,s.jsxs)("ul",{className:"list markered spacer top medium",children:[(0,s.jsx)("li",{className:"list__item",children:"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0437\u0432\u0435\u0437\u0434\u0443 \u043a\u0430\u043a \u0444\u043e\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430"}),(0,s.jsxs)("li",{className:"list__item",children:["\u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0437\u0432\u0435\u0437\u0434\u0443 \u043a\u0430\u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 HTML-\u0442\u0435\u0433 ",(0,s.jsx)("code",{className:"code",children:"img"})]}),(0,s.jsxs)("li",{className:"list__item",children:["\u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0437\u0432\u0435\u0437\u0434\u0443 \u043a\u0430\u043a \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 ",(0,s.jsx)("code",{className:"code",children:"svg"})]})]})]}
1),(0,s.jsx)("p",{children:"\u042f \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0430 \u0441\u0432\u043e\u0439 \u0432\u044b\u0431\u043e\u0440 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435: \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0444\u0438\u0433\u0443\u0440\u0443 \u0437\u0432\u0435\u0437\u0434\u043e\u0447\u043a\u0438 \u0431\u0435\u0437 \u0433\u043b\u0430\u0437 \u0444\u043e\u043d\u043e\u043c \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u0438 \u0437\u0430\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0433\u043b\u0430\u0437\u0430 \u0438 \u0437\u0440\u0430\u0447\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0448\u044c\u044e CSS."}),(0,s.jsxs)("p",{className:"spacer bottom medium",children:["\u0417\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u0431\u0443\u0434\u0443\u0449\u0435\u0439 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0437\u0432\u0451\u0437\u0434\u043e\u0447\u043a\u0438 \u044f \u0432\u0437\u044f\u043b\u0430 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044e, \u043d\u0430\u0439\u0434\u0435\u043d\u043d\u0443\u044e \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u0440\u0430\u0445 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430",(0,s.jsx)("b",{children:"*"}),". \u0417\u0430\u0442\u0435\u043c \u0432 Figma \u043e\u0431\u0440\u0438\u0441\u043e\u0432\u0430\u043b\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u0439\u0441\u044f \u0432\u0435\u043a\u0442\u043e\u0440 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 ",(0,s.jsx)("code",{className:"code",children:".svg"})]}),(0,s.jsx)(h.N,{fileTitle:"figma.jpeg",src:v,alt:"\u041f\u0440\u0435\u0432\u044c\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Figma \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u0437\u0432\u0435\u0437\u0434\u044b"}),(0,s.jsxs)("p",{className:"note",children:[(0,s.jsx)("b",{children:"*"})," \u0415\u0441\u043b\u0438 \u0432\u044b \u044f\u0432\u043b\u044f\u0435\u0442\u0435\u0441\u044c \u043f\u0440\u0430\u0432\u043e\u043e\u0431\u043b\u0430\u0434\u0430\u0442\u0435\u043b\u0435\u043c \u044d\u0442\u043e\u0439 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e\u0439 \u0437\u0432\u0451\u0437\u0434\u043e\u0447\u043a\u0438, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043d\u0435 \u0440\u0443\u0433\u0430\u0439\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0430 \u0435\u0451 \u0431\u0435\u0437 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u0430\u0432\u0442\u043e\u0440\u0441\u043a\u0438\u0445 \u043f\u0440\u0430\u0432. \u0423 \u043c\u0435\u043d\u044f \u043d\u0435 \u0431\u044b\u043b\u043e \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0443\u043c\u044b\u0441\u043b\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0430\u0448 \u0442\u0440\u0443\u0434 \u0432 \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0438\u0445 \u0438\u043b\u0438 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u0446\u0435\u043b\u044f\u0445 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0432\u044b\u0433\u043e\u0434\u044b. \u0421\u0432\u044f\u0436\u0438\u0442\u0435\u0441\u044c \u0441\u043e \u043c\u043d\u043e\u0439 \u0447\u0442\u043e\u0431\u044b \u0440\u0435\u0448\u0438\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043f\u0440\u0430\u0432\u043e\u043e\u0431\u043b\u0430\u0434\u0430\u043d\u0438\u044f \u0435\u0441\u043b\u0438 \u0442\u0430\u043a\u043e\u0432\u044b\u0435 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c."]}),(0,s.jsxs)("p",{className:"spacer top bottom medium",children:["HTML-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0438 CSS-\u0441\u0442\u0438\u043b\u0438 \u043d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u0432\u0441\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438. \u
1041d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440-\u043e\u0431\u0451\u0440\u0442\u043a\u0430 \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c"," ",(0,s.jsx)("code",{className:"code",children:".container"}),", \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0443\u0442 \u043b\u0435\u0436\u0430\u0442\u044c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0433\u043b\u0430\u0437\u0430 - \u0434\u0432\u0430 \u0434\u0438\u0432\u0430 \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c \u043a\u043b\u0430\u0441\u0441\u043e\u043c ",(0,s.jsx)("code",{className:"code",children:".eye"}),". \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u044d\u0442\u0430 HTML-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439. \u0412 CSS \u043d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u0448\u0430\u0433\u0435 \u043c\u044b \u043f\u0440\u043e\u043f\u0438\u0448\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430-\u043e\u0431\u0451\u0440\u0442\u043a\u0438 - \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0430 \u0444\u043e\u043d \u0437\u0432\u0435\u0437\u0434\u0443 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 ",(0,s.jsx)("code",{className:"code",children:".svg"})," \u0438 \u043e\u0442\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435, \u044d\u0442\u043e \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430\u043c \u043f\u043e\u0437\u0436\u0435. \u0417\u0434\u0435\u0441\u044c ",(0,s.jsx)("code",{className:"code",children:"350px"})," \u0438 ",(0,s.jsx)("code",{className:"code",children:"323px"})," \u043d\u0435 \u043c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0447\u0438\u0441\u043b\u0430, \u0432\u0437\u044f\u0442\u044b\u0435 \u0438\u0437 \u043f\u043e\u0442\u043e\u043b\u043a\u0430, \u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u044b ",(0,s.jsx)("code",{className:"code",children:".svg"})," \u0444\u0430\u0439\u043b\u0430 \u0437\u0432\u0435\u0437\u0434\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0432 Figma."]}),(0,s.jsx)(p.$,{lang:[x.j.HTML,x.j.CSS],name:["index","style"],code:[e,".container {\n width: 350px;\n height: 323px;\n margin: 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n background-repeat: no-repeat;\n background-position: center;\n background-size: 350px 323px;\n background-image: url('./../star.svg');\n}"]}),(0,s.jsx)("p",{className:"spacer bottom medium",children:"\u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0437\u0432\u0451\u0437\u0434\u043e\u0447\u043a\u0430 \u0431\u0435\u0437 \u0433\u043b\u0430\u0437 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u0441\u043e\u0432\u0441\u0435\u043c \u0433\u0440\u0443\u0441\u0442\u043d\u043e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u044d\u0442\u0430\u043f\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0433\u043b\u0430\u0437\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0447\u0438\u0441\u0442\u043e\u0433\u043e CSS."}),(0,s.jsx)(u.R,{type:m.ED.CUSTOM,filesCount:1,fileTitle:"star_demo_1.exe",pattern:m.Rg.CROSS,children:(0,s.jsx)("div",{className:j().demo_wrapper,children:(0,s.jsx)("div",{className:j().eyes_container})})}),(0,s.jsx)("p",{className:"explanation",children:"\u041e\u0439, \u0443 \u0437\u0432\u0451\u0437\u0434\u043e\u0447\u043a\u0438 \u0443\u043a\u0440\u0430\u043b\u0438 \u0433\u043b\u0430\u0437\u0430! \u0410, \u043c\u044b \u0438\u0445 \u0435\u0449\u0451 \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u043b\u0438..."}),(0,s.jsxs)("p",{className:"spacer top bottom medium",children:["\u0421\u0430\u043c \u0433\u043b\u0430\u0437 \u0437\u0430\u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0441\u0441\u0430 ",(0,s.jsx)("code",{className:"code",children:".eye"}),", \u0430 \u0437\u0440\u0430\u0447\u043e\u043a \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c"," ",(0,s.jsx)("code",{className:"code",children:":before"}),". HTML-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0442.\u043a. \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c"," ",(0,s.jsx)("code",{className:"code",children:".eye"})," \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043d\u0430 \u043f\u0440\u043e\u0448\u043b\u043e\u043c \u0448\u0430\u0433\u0435."]}),(0,s.jsx)(p.$,{lang:[x.j.HTML,x.j.CSS],name:["index","style"],code:[e,".eye {\n position: relative;\n width: 40px;\n height: 40px;\n background: white;\n border-radius: 50%;\n overflow: hidden;\n margin: -50px 10px 0;\n}\n\n.eye:before {\n content: '';\n position: absolute;\n top: 50%;\n left: 10px;\n transform: translate(-50%, -50%);
1\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: black;\n box-sizing: border-box;\n}"]}),(0,s.jsx)("p",{className:"spacer bottom medium",children:"\u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0432\u0451\u0437\u0434\u043e\u0447\u043a\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043e\u0442\u043b\u0438\u0447\u043d\u043e!"}),(0,s.jsx)(u.R,{type:m.ED.CUSTOM,filesCount:1,fileTitle:"star_demo_2.exe",pattern:m.Rg.CROSS,children:(0,s.jsx)("div",{className:j().demo_wrapper,children:(0,s.jsxs)("div",{className:j().eyes_container,children:[(0,s.jsx)("div",{className:j().eye}),(0,s.jsx)("div",{className:j().eye})]})})}),(0,s.jsx)("p",{className:"spacer bottom medium",children:"\u0412\u0441\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0432 \u043a\u043e\u0434\u0435 \u0432\u044b\u0448\u0435 \u044f \u043f\u043e\u0434\u0431\u0438\u0440\u0430\u043b\u0430 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u043e. \u041d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0439\u0442\u0435\u0441\u044c \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435: \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0433\u043b\u0430\u0437, \u0437\u0440\u0430\u0447\u043a\u043e\u0432, \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u0438 \u0442.\u0434. \u0421\u0430\u043c\u0443 \u0437\u0432\u0451\u0437\u0434\u043e\u0447\u043a\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u0440\u0438\u0441\u0443\u043d\u043e\u043a: \u0441\u0435\u0440\u0434\u0446\u0435, \u043e\u0431\u043b\u0430\u043a\u043e, \u044f\u0431\u043b\u043e\u043a\u043e, etc."})]}),(0,s.jsxs)("section",{className:"section outer",children:[(0,s.jsx)("h2",{children:"\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u043c!"}),(0,s.jsx)("p",{className:"spacer top bottom medium",children:"\u0421\u043f\u0435\u0440\u0432\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c JavaScript, \u0430 \u0437\u0430\u0442\u0435\u043c \u044f \u043f\u043e\u0434\u0441\u043a\u0430\u0436\u0443 \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0435\u0451 \u043d\u0430 React."}),(0,s.jsxs)("p",{className:"spacer top bottom medium",children:["\u041f\u043e \u0437\u0430\u0434\u0443\u043c\u043a\u0435 \u0433\u043b\u0430\u0437\u0430 \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u043a\u0443\u0440\u0441\u043e\u0440\u043e\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043c\u044b\u0448\u043a\u043e\u0439 (\u043a\u0443\u0440\u0441\u043e\u0440\u043e\u043c). \u0414\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 ",(0,s.jsx)("code",{className:"code",children:"addEventListener"}),":"]}),(0,s.jsx)(y.O,{lang:x.j.JAVASCRIPT,name:"index",code:"document.addEventListener('mousemove', moveEyesToCursor);"}),(0,s.jsxs)("p",{className:"spacer bottom medium",children:["\u0412 \u044d\u0442\u043e\u043c \u043a\u043e\u0434\u0435 ",(0,s.jsx)("code",{className:"code",children:"mousemove"})," \u2014 \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0438 \u043c\u044b\u0448\u0438,"," ",(0,s.jsx)("code",{className:"code",children:"moveEyesToCursor"})," \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0438 \u043c\u044b\u0448\u0438."]}),(0,s.jsxs)("p",{className:"spacer bottom medium",children:["\u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0442\u0435\u043f\u0435\u0440\u044c \u044d\u0442\u0443 \u0441\u0430\u043c\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e-\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a ",(0,s.jsx)("code",{className:"code",children:"moveEyesToCursor"}),", \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438 \u0431\u0443\u0434\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u044e \u043c\u0430\u0433\u0438\u044e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0433\u043b\u0430\u0437. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432\u0441\u0435 \u0433\u043b\u0430\u0437\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0442\u0430\u043a:"]}),(0,s.jsx)(y.O,{lang:x.j.JAVASCRIPT,name:"index",code:"function moveEyesToCursor() {\n const eyes = document.querySelectorAll('.eye');\n}"}),(0,s.jsxs)("p",{className:"spacer bottom medium",children:["\u041c\u0435\u0442\u043e\u0434 ",(0,s.jsx)("code",{className:"code",children:"querySelectorAll"})," \u0432 JavaScript \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u043c\u0443 CSS-\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0443. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u043a\u043b\u0430\u0441\u0441"," ",(0,s.jsx)("code",{className:"code",children:".eye"}),". \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 ",(0,s.jsx)("code",{className:"code",children:"eyes"})," \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0441\u043f\u0438\u0441\u043e\u043a \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 NodeList \u0441 \u043d\u0430\u0448\u0438\u043c\u0438 \u0433\u043b\u0430\u0437\u0430\u043c\u0438-\u0434\u0438\u0432\u0430\u043c\u0438 \u0438 \u0441 \u043d\u0438\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0447\u0442\u043e-\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c."]}),(0,s.jsxs)("p",{className:"spacer top bottom medium",children:["\u0410 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043c\u044b \u0432\u043e\u0442 \u0447\u0442\u043e \u2014 \u043f\u0440\u043e\u0439\u0434\u0451\u043c\u0441\u044f \u043f\u043e \u0432\u0441\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 \u043f\u0435\u0440\u0435\u0431\u043e\u0440\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 ",(0,s.jsx)("code",{className:"code",children:"forEac
1h"}),":"]}),(0,s.jsx)(y.O,{lang:x.j.JAVASCRIPT,name:"index",code:"function moveEyesToCursor() {\n const eyes = document.querySelectorAll('.eye');\n\n eyes.forEach((eye) => {\n // \u0417\u0434\u0435\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043c\u0430\u0433\u0438\u044e\n });\n}"}),(0,s.jsxs)("p",{className:"spacer top bottom medium",children:["\u0412\u0440\u0435\u043c\u044f \u043e\u0441\u0432\u0435\u0436\u0438\u0442\u044c \u043a\u0443\u0440\u0441 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0438. \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0433\u043b\u0430\u0437\u0430 \u043d\u0430\u0434\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0435\u0433\u043e \u0446\u0435\u043d\u0442\u0440\u0430"," ",(0,s.jsx)("code",{className:"code",children:"x, y"})," \u043f\u043e \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u0443\u043b\u0435:"]}),(0,s.jsx)(y.O,{lang:x.j.JAVASCRIPT,name:"index",code:"function moveEyesToCursor() {\n const eyes = document.querySelectorAll('.eye');\n\n eyes.forEach((eye) => {\n let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2);\n let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2);\n });\n}"}),(0,s.jsx)("p",{className:"spacer top bottom medium",children:"\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u043c \u0443\u0433\u043e\u043b \u043c\u0435\u0436\u0434\u0443 \u0433\u043b\u0430\u0437\u043e\u043c \u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u043e\u043c:"}),(0,s.jsx)(y.O,{lang:x.j.JAVASCRIPT,name:"index",code:"function moveEyesToCursor() {\n const eyes = document.querySelectorAll('.eye');\n\n eyes.forEach((eye) => {\n let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2);\n let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2);\n\n let radian = Math.atan2(event.pageX - x, event.pageY - y);\n });\n}"}),(0,s.jsx)("p",{className:"spacer top bottom medium",children:"\u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u0438 \u0441\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0443\u0433\u043e\u043b:"}),(0,s.jsx)(y.O,{lang:x.j.JAVASCRIPT,name:"index",code:"function moveEyesToCursor() {\n const eyes = document.querySelectorAll('.eye');\n\n eyes.forEach((eye) => {\n let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2);\n let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2);\n\n let radian = Math.atan2(event.pageX - x, event.pageY - y);\n let rotation = (radian * (180 / Math.PI) * -1) + 270;\n });\n}"}),(0,s.jsxs)("p",{className:"spacer top bottom medium",children:["\u0412\u0441\u0451, \u0441 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u043e\u0439 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438. \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0433\u043b\u0430\u0437\u0430 \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 ",(0,s.jsx)("code",{className:"code",children:"transform: rotate()"}),". \u0413\u043b\u0430\u0437 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u043a\u0443\u0440\u0441\u043e\u0440:"]}),(0,s.jsx)(y.O,{lang:x.j.JAVASCRIPT,name:"index",code:"function moveEyesToCursor() {\n const eyes = document.querySelectorAll('.eye');\n\n eyes.forEach((eye) => {\n let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2);\n let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2);\n\n let radian = Math.atan2(event.pageX - x, event.pageY - y);\n let rotation = (radian * (180 / Math.PI) * -1) + 270;\n\n eye.style.transform = `rotate(${rotation}deg)`;\n });\n}"}),(0,s.jsx)("p",{className:"spacer top bottom medium",children:"\u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u043a\u043e\u0434 \u0432\u043c\u0435\u0441\u0442\u0435:"}),(0,s.jsx)(y.O,{lang:x.j.JAVASCRIPT,name:"index",code:"document.addEventListener('mousemove', moveEyesToCursor);\n\nfunction moveEyesToCursor() {\n const eyes = document.querySelectorAll('.eye');
1\n\n eyes.forEach((eye) => {\n let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2);\n let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2);\n\n let radian = Math.atan2(event.pageX - x, event.pageY - y);\n let rotation = (radian * (180 / Math.PI) * -1) + 270;\n\n eye.style.transform = `rotate(${rotation}deg)`;\n });\n}"}),(0,s.jsx)(p.$,{lang:[x.j.HTML,x.j.CSS],name:["index","style"],code:[e,".container {\n height: 323px;\n width: 350px;\n margin: 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n background-repeat: no-repeat;\n background-position: center;\n background-size: 350px 323px;\n background-image: url('./../star.svg');\n}\n\n.eye {\n position: relative;\n width: 40px;\n height: 40px;\n background: white;\n border-radius: 50%;\n overflow: hidden;\n margin: -50px 10px 0;\n}\n\n.eye:before {\n content: '';\n position: absolute;\n top: 50%;\n left: 10px;\n transform: translate(-50%, -50%);\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: black;\n box-sizing: border-box;\n}"]}),(0,s.jsxs)("p",{className:"spacer top large",children:["\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0443 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435"," ",(0,s.jsx)(r.d,{href:"https://codepen.io/thevioletmaniac/pen/emJWLKx",label:"Codepen"}),", \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438 \u043f\u043e\u0442\u044b\u043a\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u0436\u0438\u0432\u0443\u044e \ud83d\udd0d"]})]}),(0,s.jsxs)("section",{className:"section outer",children:[(0,s.jsx)("h2",{children:"\u041f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043c \u043d\u0430 React"}),(0,s.jsx)("p",{children:"\u0427\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u043d\u0430\u0448 \u043a\u043e\u0434 \u043d\u0430 React \u043d\u0443\u0436\u043d\u043e \u0447\u0443\u0442\u044c-\u0447\u0443\u0442\u044c \u043c\u043e\u0434\u0435\u0440\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c HTML-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443, \u0441\u0430\u043c\u0430 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f. \u041d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0442\u043e\u0442 \u0432\u0438\u0434 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0443 \u0441\u0435\u0431\u044f \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u043b\u0438 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u0435\u0442\u0435 \u0441\u0430\u043c\u0438. \u0412 \u043c\u043e\u0451\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e CSS Modules \u0432 \u0441\u0432\u044f\u0437\u043a\u0435 \u0441 SASS. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u044f HTML-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 \u043d\u0430 JSX \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:"}),(0,s.jsx)(p.$,{lang:[x.j.REACT,x.j.SCSS],name:["AnimatedStar","app.module"],code:["import styles from './app.module.scss';\n...\nreturn (\n <div className={styles.eyes_container}>\n <div className={styles.eye}></div>\n <div className={styles.eye}></div>\n </div>\n);",".eyes_container {\n height: 323px;\n width: 350px;\n margin: 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n background-repeat: no-repeat;\n background-position: center;\n background-size: 350px 323px;\n background-image: url('./../star.svg');\n}\n\n.eye {\n position: relative;\n width: 40px;\n height: 40px;\n background: white;\n border-radius: 50%;\n overflow: hidden;\n margin: -50px 10px 0;\n\n &:before {\n content: '';\n position: absolute;\n top: 50%;\n left: 10px;\n transform: translate(-50%, -50%);
1\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: black;\n box-sizing: border-box;\n }\n}"]}),(0,s.jsxs)("p",{className:"spacer top medium",children:["\u041f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442 ",(0,s.jsx)("code",{className:"code",children:":before"})," \u044f \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u043b\u0430 \u0432\u043d\u0443\u0442\u0440\u044c \u0441\u0442\u0438\u043b\u044f"," ",(0,s.jsx)("code",{className:"code",children:".eye"})," \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e SASS \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0442\u0430\u043a\u043e\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441. \u042d\u0442\u043e \u0432\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0438 \u0432 CSS-\u0441\u0442\u0438\u043b\u044f\u0445."]}),(0,s.jsxs)("p",{className:"spacer top medium",children:["\u0427\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043d\u0430 React \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435, \u0433\u0434\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0433\u043b\u0430\u0437. \u0414\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0441\u044b\u043b\u043e\u043a ",(0,s.jsx)("code",{className:"code",children:"ref"})," \u0438 \u0445\u0443\u043a\u0430"," ",(0,s.jsx)("code",{className:"code",children:"useRef"}),". \u0421\u043f\u0435\u0440\u0432\u0430 \u043f\u0440\u043e\u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0443:"]}),(0,s.jsx)(y.O,{lang:x.j.TYPESCRIPT,name:"AnimatedStar",code:"const eyesRef = useRef<(HTMLDivElement | null)[]>([]);"}),(0,s.jsxs)("p",{children:["\u041d\u0435 \u043f\u0443\u0433\u0430\u0439\u0442\u0435\u0441\u044c, \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e React \u0432 \u0441\u0432\u044f\u0437\u043a\u0435 \u0441 TypeScript. \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 TypeScript, \u0442\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u0435: ",(0,s.jsx)("code",{className:"code",children:"(HTMLDivElement | null)[]"})," \u0432 \u043a\u043e\u0434\u0435 \u0432\u044b\u0448\u0435 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043b\u0438\u0448\u044c \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0432 \u043d\u0430\u0448\u0435\u0439 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0439 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0441\u0441\u044b\u043b\u043a\u0435, \u0442.\u0435. \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0433\u0434\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u0438\u0431\u043e ",(0,s.jsx)("code",{className:"code",children:"null"})," \u043b\u0438\u0431\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0438\u043f\u0430 DOM-\u0434\u0435\u0440\u0435\u0432\u0430"," ",(0,s.jsx)("code",{className:"code",children:"HTMLDivElement"}),"."]}),(0,s.jsxs)("p",{className:"spacer top medium",children:["\u0427\u0443\u0442\u044c \u043f\u043e\u043f\u043e\u0437\u0436\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0438\u043c \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043d\u043e \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u0437\u0430\u0439\u043c\u0451\u043c\u0441\u044f \u0434\u0440\u0443\u0433\u0438\u043c - \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0441\u044b\u043b\u043a\u0438 \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 ",(0,s.jsx)("code",{className:"code",children:"eyesRef"}),":"]}),(0,s.jsx)(y.O,{lang:x.j.TYPESCRIPT,name:"AnimatedStar",code:"const addToRefs = (el: HTMLDivElement | null, index: number) => {\n if (el && !eyesRef.current.includes(el)) {\n eyesRef.current[index] = el;\n }\n};"}),(0,s.jsxs)("p",{className:"spacer top medium",children:["\u0412\u043e\u0442 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0438. \u
10421\u043e\u0437\u0434\u0430\u043d\u043d\u0430\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0432\u044b\u0448\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044f ",(0,s.jsx)("code",{className:"code",children:"addToRefs"})," ","\u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0433\u043b\u0430\u0437\u0430 \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e ",(0,s.jsx)("code",{className:"code",children:"ref"})," \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:"]}),(0,s.jsx)(y.O,{lang:x.j.TYPESCRIPT,name:"AnimatedStar",code:"return (\n <div className={styles.eyes_container}>\n <div ref={(el) => addToRefs(el, 0)} className={styles.eye}></div>\n <div ref={(el) => addToRefs(el, 1)} className={styles.eye}></div>\n </div>\n;)"}),(0,s.jsxs)("p",{className:"spacer top medium",children:["\u0424\u0443\u043d\u043a\u0446\u0438\u044f-\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0433\u043b\u0430\u0437 ",(0,s.jsx)("code",{className:"code",children:"moveEyesToCursor"})," \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0435 \u043d\u0430 React \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043f\u043e\u0447\u0442\u0438 \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439, \u043d\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443"," ",(0,s.jsx)("code",{className:"code",children:"current"}),":"]}),(0,s.jsx)(y.O,{lang:x.j.TYPESCRIPT,name:"AnimatedStar",code:"const moveEyesToCursor = (event: MouseEvent) => {\n eyesRef.current.forEach((eye) => {\n if (!eye) {\n return;\n }\n\n const rect = eye.getBoundingClientRect();\n const x = rect.left + eye.clientWidth / 2;\n const y = rect.top + eye.clientHeight / 2;\n\n const radian = Math.atan2(event.pageX - x, event.pageY - y);\n const rotation = radian * (180 / Math.PI) * -1 + 270;\n\n eye.style.transform = `rotate(${rotation}deg)`;\n });\n};"}),(0,s.jsxs)("p",{className:"spacer top medium",children:["\u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443 \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 ",(0,s.jsx)("code",{className:"code",children:"mousemove"})," \u0432 React, \u043a\u0430\u043a \u0432 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u043c JavaScript \u0432\u044b\u0448\u0435, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0445\u0443\u043a\u043e\u043c ",(0,s.jsx)("code",{className:"code",children:"useEffect"}),":"]}),(0,s.jsx)(y.O,{lang:x.j.TYPESCRIPT,name:"AnimatedStar",code:"useEffect(() => {\n document.addEventListener('mousemove', moveEyesToCursor);\n\n return () => {\n document.removeEventListener('mousemove', moveEyesToCursor);\n };\n}, []);"}),(0,s.jsx)("p",{className:"spacer top medium",children:"Return-\u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0437\u0434\u0435\u0441\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0440\u043e\u043b\u044c \u043e\u0447\u0438\u0441\u0442\u043a\u0438: \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043f\u0440\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u044f \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0443\u0442\u0435\u0447\u043a\u0438 \u043f\u0430\u043c\u044f\u0442\u0438."}),(0,s.jsx)("p",{className:"spacer top medium",children:"\u041d\u0443 \u0432\u043e\u0442 \u0438 \u0432\u0441\u0451, \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u0441\u0451 \u0432\u043c\u0435\u0441\u0442\u0435:"}),(0,s.jsx)(y.O,{lang:x.j.TYPESCRIPT,name:"AnimatedStar",code:"import React, { useEffect, useRef } from 'react';\nimport styles from './styles.module.scss';\n\nexport const AnimatedStar = () => {\n const eyesRef = useRef<(HTMLDivElement | null)[]>([]);\n\n const moveEyesToCursor = (event: MouseEvent) => {\n eyesRef.current.forEach((eye) => {\n if (!eye) {\n return;\n }\n\n const rect = eye.getBoundingClientRect();\n const x = rect.left + eye.clientWidth / 2;\n const y = rect.top + eye.clientHeight / 2;\n\n const radian = Math.atan2(event.pageX - x, event.pageY - y);\n const rotation = radian * (180 / Math.PI) * -1 + 270;\n\n eye.style.transform = `rotate(${rotation}deg)`;\n });\n };\n\n useEffect(() =>
1 {\n document.addEventListener('mousemove', moveEyesToCursor);\n\n return () => {\n document.removeEventListener('mousemove', moveEyesToCursor);\n };\n }, []);\n\n const addToRefs = (el: HTMLDivElement | null, index: number) => {\n if (el && !eyesRef.current.includes(el)) {\n eyesRef.current[index] = el;\n }\n };\n\n return (\n <div className={styles.eyes_container}>\n <div ref={(el) => addToRefs(el, 0)} className={styles.eye}></div>\n <div ref={(el) => addToRefs(el, 1)} className={styles.eye}></div>\n </div>\n );\n};"}),(0,s.jsx)("br",{}),(0,s.jsx)(y.O,{lang:x.j.SCSS,name:"styles",code:".eyes_container {\n height: 323px;\n width: 350px;\n margin: 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n background-repeat: no-repeat;\n background-position: center;\n background-size: 350px 323px;\n background-image: url('./../../../../../public/assets/blog/animated-star-tutorial/star.svg');\n}\n\n.eye {\n position: relative;\n width: 40px;\n height: 40px;\n background: white;\n border-radius: 50%;\n overflow: hidden;\n margin: -50px 10px 0;\n\n &:before {\n content: '';\n position: absolute;\n top: 50%;\n left: 10px;\n transform: translate(-50%, -50%);\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: black;\n box-sizing: border-box;\n }\n}"})]})]})}}
1,34906:function(e){e.exports={double_code_snippet:"DoubleCodeSnippet_double_code_snippet__D_Tgu"}},20722:function(e){e.exports={example_snippet:"ExampleSnippet_example_snippet__eDa57"}},19094:function(e){e.exports={post_image:"PostImage_post_image__lRfkK"}},21820:function(e){e.exports={external_link:"ExternalLink_external_link__0hKSN",external_link__icon:"ExternalLink_external_link__icon__W5f7H"}},99353:function(e){e.exports={demo_wrapper:"styles_demo_wrapper__3n1x3",eyes_container:"styles_eyes_container__s8iT3",eye:"styles_eye__5OnV_"}},13393:function(e){e.exports={star_wrapper:"animated-star-tutorial_star_wrapper__3VYY5",star:"animated-star-tutorial_star__8H5vC",demo_wrapper:"animated-star-tutorial_demo_wrapper__J0Rp5",eyes_container:"animated-star-tutorial_eyes_container__F2_85",eye:"animated-star-tutorial_eye__2iLUZ"}}},function(e){e.O(0,[856,319,29,774,888,179],(function(){return n=72694,e(e.s=n);var n}));var n=e.O();_N_E=n}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.