{"id":72644,"date":"2024-08-08T10:30:11","date_gmt":"2024-08-08T07:00:11","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/top-methods-and-tools-for-javascript-animations-in-web-development-dhp\/"},"modified":"2024-08-08T10:30:11","modified_gmt":"2024-08-08T07:00:11","slug":"top-methods-and-tools-for-javascript-animations-in-web-development-dhp","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/top-methods-and-tools-for-javascript-animations-in-web-development-dhp\/","title":{"rendered":"\u0631\u0648\u0634 \u0647\u0627 \u0648 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0628\u0631\u062a\u0631 \u0628\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628"},"content":{"rendered":"<p>Summarize this content to 400 words in Persian Lang<br \/>\n            \u0645\u0639\u0631\u0641\u06cc<\/p>\n<p>\u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648\u0628\u060c \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u0628\u0647 \u0628\u062e\u0634\u06cc \u062c\u062f\u0627\u06cc\u06cc \u0646\u0627\u067e\u0630\u06cc\u0631 \u0627\u0632 \u0627\u0641\u0632\u0627\u06cc\u0634 \u062a\u062c\u0631\u0628\u0647 \u0648 \u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631 \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0646\u062f.  \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0632\u0628\u0627\u0646 \u0647\u0645\u0647 \u06a9\u0627\u0631\u0647 \u0648 \u0642\u062f\u0631\u062a\u0645\u0646\u062f\u060c \u0646\u0642\u0634 \u0645\u0647\u0645\u06cc \u062f\u0631 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u062f\u0631 \u0648\u0628 \u062f\u0627\u0631\u062f.  \u0627\u0632 \u0627\u0646\u062a\u0642\u0627\u0644 \u0633\u0627\u062f\u0647 \u062a\u0627 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647\u060c \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0628\u0632\u0627\u0631\u0647\u0627 \u0648 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u0632\u0646\u062f\u0647 \u06a9\u0631\u062f\u0646 \u0639\u0646\u0627\u0635\u0631 \u067e\u0648\u06cc\u0627 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.  \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627 \u0648 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0645\u0648\u062c\u0648\u062f \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0648\u0628 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u0627\u0632 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0627\u0648\u0644\u06cc\u0647 \u062a\u0627 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0631\u0627 \u067e\u0648\u0634\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n<p>1. \u0645\u0628\u0627\u0646\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0648\u0628<\/p>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u063a\u0648\u0627\u0635\u06cc \u062f\u0631 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627 \u0648 \u062a\u06a9\u0646\u06cc\u06a9 \u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647\u060c \u062f\u0631\u06a9 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0627\u0633\u0627\u0633\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0648\u0628 \u0636\u0631\u0648\u0631\u06cc \u0627\u0633\u062a.<\/p>\n<p>1.1 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0648\u0628 \u0686\u06cc\u0633\u062a\u061f<\/p>\n<p>\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0648\u0628 \u0634\u0627\u0645\u0644 \u062a\u063a\u06cc\u06cc\u0631 \u062a\u062f\u0631\u06cc\u062c\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0639\u0646\u0627\u0635\u0631 HTML \u062f\u0631 \u0637\u0648\u0644 \u0632\u0645\u0627\u0646 \u0627\u0633\u062a.  \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062c\u0644\u0648\u0647 \u0647\u0627\u06cc \u0628\u0635\u0631\u06cc\u060c \u0627\u0641\u0632\u0627\u06cc\u0634 \u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631 \u0648 \u0647\u062f\u0627\u06cc\u062a \u062a\u0645\u0631\u06a9\u0632 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f.  \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0631\u0627\u06cc\u062c\u06cc \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0645\u062a\u062d\u0631\u06a9 \u06a9\u0631\u062f \u0639\u0628\u0627\u0631\u062a\u0646\u062f \u0627\u0632:<\/p>\n<p>\u0645\u0648\u0642\u0639\u06cc\u062a<br \/>\n\u0627\u0646\u062f\u0627\u0632\u0647<br \/>\n\u0631\u0646\u06af<br \/>\n\u06a9\u062f\u0648\u0631\u062a<br \/>\n\u062a\u0628\u062f\u06cc\u0644 (\u0686\u0631\u062e\u0634\u060c \u067e\u0648\u0633\u062a\u0647 \u067e\u0648\u0633\u062a\u0647 \u0634\u062f\u0646 \u0648 \u063a\u06cc\u0631\u0647)<\/p>\n<p>1.2 \u0645\u0641\u0627\u0647\u06cc\u0645 \u06a9\u0644\u06cc\u062f\u06cc \u062f\u0631 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u0628\u0627\u06cc\u062f \u0686\u0646\u062f \u0645\u0641\u0647\u0648\u0645 \u06a9\u0644\u06cc\u062f\u06cc \u0631\u0627 \u062f\u0631\u06a9 \u06a9\u0646\u06cc\u062f:<\/p>\n<p>\u0642\u0627\u0628 \u0647\u0627: \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u0627\u0632 \u06cc\u06a9 \u0633\u0631\u06cc \u0641\u0631\u06cc\u0645 \u062a\u0634\u06a9\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0646\u062f.  \u0647\u0631 \u0641\u0631\u06cc\u0645 \u0646\u0634\u0627\u0646 \u062f\u0647\u0646\u062f\u0647 \u0648\u0636\u0639\u06cc\u062a \u062e\u0627\u0635\u06cc \u0627\u0632 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u0631 \u06cc\u06a9 \u0632\u0645\u0627\u0646 \u0645\u0639\u06cc\u0646 \u0627\u0633\u062a.<\/p>\n<p>\u062a\u0648\u0627\u0628\u0639 \u0632\u0645\u0627\u0646 \u0628\u0646\u062f\u06cc: \u0627\u06cc\u0646\u0647\u0627 \u0633\u0631\u0639\u062a \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc \u06a9\u0646\u0646\u062f\u060c \u0645\u0627\u0646\u0646\u062f ease-in\u060c ease-out \u0648 linear.<\/p>\n<p>RequestAnimationFrame: \u0627\u06cc\u0646 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0627\u062e\u0644\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u0628\u0627 \u0686\u0631\u062e\u0647 \u0631\u0646\u06af \u0622\u0645\u06cc\u0632\u06cc \u0645\u062c\u062f\u062f \u0645\u0631\u0648\u0631\u06af\u0631\u060c \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0631\u0648\u0627\u0646 \u0631\u0627 \u0627\u0645\u06a9\u0627\u0646 \u067e\u0630\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>2. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u067e\u0627\u06cc\u0647<\/p>\n<p>\u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u062f\u0648\u0646 \u0627\u062a\u06a9\u0627 \u0628\u0647 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u062e\u0627\u0631\u062c\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f.  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0646\u062d\u0648\u0647 \u0634\u0631\u0648\u0639 \u06a9\u0627\u0631 \u0628\u0627 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648\u0627\u0646\u06cc\u0644\u06cc \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p>2.1 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 setInterval \u0648 setTimeout<\/p>\n<p>\u0627\u06cc\u0646 setInterval \u0648 setTimeout \u062a\u0648\u0627\u0628\u0639 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u0646\u062f \u0628\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06a9\u0631\u0631 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u062f\u0631 \u0641\u0648\u0627\u0635\u0644 \u0632\u0645\u0627\u0646\u06cc \u0645\u0634\u062e\u0635\u060c \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<p>let start = null;<br \/>\nconst element = document.getElementById(&#8216;animate&#8217;);<\/p>\n<p>function step(timestamp) {<br \/>\n  if (!start) start = timestamp;<br \/>\n  const progress = timestamp &#8211; start;<br \/>\n  element.style.transform = `translateX(${Math.min(progress \/ 10, 200)}px)`;<br \/>\n  if (progress  2000) {<br \/>\n    window.requestAnimationFrame(step);<br \/>\n  }<br \/>\n}<\/p>\n<p>window.requestAnimationFrame(step);<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644\u060c requestAnimationFrame \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0635\u0627\u0641 \u06a9\u0647 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0627\u0641\u0642\u06cc \u062d\u0631\u06a9\u062a \u0645\u06cc \u062f\u0647\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>2.2 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0646\u062a\u0642\u0627\u0644 CSS \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/p>\n<p>\u062a\u0631\u06a9\u06cc\u0628 \u062a\u0631\u0627\u0646\u0632\u06cc\u0634\u0646 \u0647\u0627\u06cc CSS \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc\u06cc \u0628\u0627 \u06a9\u062f \u06a9\u0645\u062a\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<p>  .box {<br \/>\n    width: 100px;<br \/>\n    height: 100px;<br \/>\n    background-color: red;<br \/>\n    transition: transform 0.5s ease;<br \/>\n  }<br \/>\n  .box.move {<br \/>\n    transform: translateX(200px);<br \/>\n  }<\/p>\n<p> id=&#8221;box&#8221; class=&#8221;box&#8221;&gt;<\/p>\n<p>  const box = document.getElementById(&#8216;box&#8217;);<br \/>\n  box.addEventListener(&#8216;click&#8217;, () =&gt; {<br \/>\n    box.classList.toggle(&#8216;move&#8217;);<br \/>\n  });<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627\u060c \u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f\u0646 \u0631\u0648\u06cc \u06a9\u0627\u062f\u0631\u060c \u06a9\u0644\u0627\u0633\u06cc \u06a9\u0647 \u06cc\u06a9 \u0627\u0646\u062a\u0642\u0627\u0644 CSS \u0631\u0627 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n<p>3. \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/p>\n<p>\u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0648\u0627\u0646\u06cc\u0644\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0627\u0633\u062a\u060c \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0631\u0627 \u0633\u0627\u062f\u0647 \u06a9\u0631\u062f\u0647 \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f.  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0631\u0648\u0631\u06cc \u0628\u0631 \u0628\u0631\u062e\u06cc \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0645\u062d\u0628\u0648\u0628 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p>3.1 GSAP (\u0633\u06a9\u0648\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 GreenSock)<\/p>\n<p>GSAP \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u067e\u0631\u06a9\u0627\u0631\u0628\u0631\u062f \u0628\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0628\u0627 \u06a9\u0627\u0631\u0627\u06cc\u06cc \u0628\u0627\u0644\u0627 \u0627\u0633\u062a.<\/p>\n<p>\u0627\u0645\u06a9\u0627\u0646\u0627\u062a:<\/p>\n<p>\u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u0628\u06cc\u0646 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627<br \/>\n\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0628\u0627 \u06a9\u0627\u0631\u0627\u06cc\u06cc \u0628\u0627\u0644\u0627<br \/>\nAPI \u063a\u0646\u06cc \u0628\u0627 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u062a\u0648\u0627\u0644\u06cc \u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647<\/p>\n<p>gsap.to(&#8220;.box&#8221;, { x: 200, duration: 1 });<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>GSAP \u06cc\u06a9 API \u0633\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u0645\u062a\u062d\u0631\u06a9 \u0633\u0627\u0632\u06cc \u0639\u0646\u0627\u0635\u0631 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0622\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0645\u0646\u0627\u0633\u0628 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>3.2 Anime.js<\/p>\n<p>Anime.js \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0633\u0628\u06a9 \u0648\u0632\u0646 \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 API \u062a\u0645\u06cc\u0632 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u0627\u0645\u06a9\u0627\u0646\u0627\u062a:<\/p>\n<p>\u0633\u06cc\u0646\u062a\u06a9\u0633 \u0622\u0633\u0627\u0646 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647<br \/>\n\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u0686\u0646\u062f\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0648 \u0627\u0647\u062f\u0627\u0641<br \/>\n\u062a\u0645\u0627\u0633 \u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0648\u0639\u062f\u0647<\/p>\n<p>anime({<br \/>\n  targets: &#8216;.box&#8217;,<br \/>\n  translateX: 250,<br \/>\n  duration: 2000,<br \/>\n  easing: &#8216;easeInOutQuad&#8217;<br \/>\n});<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>Anime.js \u0627\u0645\u06a9\u0627\u0646 \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0645\u062e\u062a\u0635\u0631 \u0648 \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0637\u06cc\u0641 \u0648\u0633\u06cc\u0639\u06cc \u0627\u0632 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627 \u0627\u06cc\u062f\u0647 \u0622\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>3.3 Three.js<\/p>\n<p>Three.js \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u0648 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0633\u0647 \u0628\u0639\u062f\u06cc \u0627\u0633\u062a.<\/p>\n<p>\u0627\u0645\u06a9\u0627\u0646\u0627\u062a:<\/p>\n<p>\u0631\u0646\u062f\u0631 \u06af\u0631\u0627\u0641\u06cc\u06a9 \u0633\u0647 \u0628\u0639\u062f\u06cc<br \/>\n\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u0645\u062f\u0644 \u0647\u0627 \u0648 \u0627\u0641\u06a9\u062a \u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0633\u0647 \u0628\u0639\u062f\u06cc<br \/>\n\u0627\u062f\u063a\u0627\u0645 \u0628\u0627 WebGL<\/p>\n<p>const scene = new THREE.Scene();<br \/>\nconst camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000);<br \/>\nconst renderer = new THREE.WebGLRenderer();<br \/>\nrenderer.setSize(window.innerWidth, window.innerHeight);<br \/>\ndocument.body.appendChild(renderer.domElement);<\/p>\n<p>const geometry = new THREE.BoxGeometry();<br \/>\nconst material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });<br \/>\nconst cube = new THREE.Mesh(geometry, material);<br \/>\nscene.add(cube);<\/p>\n<p>camera.position.z = 5;<\/p>\n<p>function animate() {<br \/>\n  requestAnimationFrame(animate);<br \/>\n  cube.rotation.x += 0.01;<br \/>\n  cube.rotation.y += 0.01;<br \/>\n  renderer.render(scene, camera);<br \/>\n}<br \/>\nanimate();<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>Three.js \u0627\u06cc\u062c\u0627\u062f \u062a\u062c\u0631\u0628\u06cc\u0627\u062a \u0633\u0647 \u0628\u0639\u062f\u06cc \u0647\u0645\u0647\u062c\u0627\u0646\u0628\u0647 \u062f\u0631 \u0648\u0628 \u0631\u0627 \u0627\u0645\u06a9\u0627\u0646 \u067e\u0630\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>4. \u062a\u06a9\u0646\u06cc\u06a9 \u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0631\u060c \u062a\u06a9\u0646\u06cc\u06a9 \u0647\u0627 \u0648 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f.<\/p>\n<p>4.1 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0641\u06cc\u0632\u06cc\u06a9<\/p>\n<p>\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0641\u06cc\u0632\u06cc\u06a9 \u0641\u06cc\u0632\u06cc\u06a9 \u062f\u0646\u06cc\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062d\u0631\u06a9\u062a \u0648\u0627\u0642\u0639\u06cc \u0634\u0628\u06cc\u0647 \u0633\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<p>\u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627:<\/p>\n<p>Matter.js: \u06cc\u06a9 \u0645\u0648\u062a\u0648\u0631 \u0641\u06cc\u0632\u06cc\u06a9 \u062f\u0648 \u0628\u0639\u062f\u06cc \u0628\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0648\u0628.<\/p>\n<p>Cannon.js: \u06cc\u06a9 \u0645\u0648\u062a\u0648\u0631 \u0641\u06cc\u0632\u06cc\u06a9 \u0633\u0647 \u0628\u0639\u062f\u06cc \u06a9\u0647 \u0628\u0647 \u062e\u0648\u0628\u06cc \u0628\u0627 Three.js \u0627\u062f\u063a\u0627\u0645 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>const engine = Matter.Engine.create();<br \/>\nconst world = engine.world;<\/p>\n<p>const box = Matter.Bodies.rectangle(400, 200, 80, 80);<br \/>\nMatter.World.add(world, box);<\/p>\n<p>function update() {<br \/>\n  Matter.Engine.update(engine);<br \/>\n  requestAnimationFrame(update);<br \/>\n}<br \/>\nupdate();<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0641\u06cc\u0632\u06cc\u06a9 \u0644\u0627\u06cc\u0647 \u0627\u06cc \u0627\u0632 \u0648\u0627\u0642\u0639 \u06af\u0631\u0627\u06cc\u06cc \u0648 \u062a\u0639\u0627\u0645\u0644 \u0631\u0627 \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u0634\u0645\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<p>4.2 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u067e\u06cc\u0645\u0627\u06cc\u0634\u06cc<\/p>\n<p>\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0627\u0633\u06a9\u0631\u0648\u0644 \u0641\u0639\u0627\u0644 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0645\u0648\u0642\u0639\u06cc\u062a \u0627\u0633\u06a9\u0631\u0648\u0644 \u06a9\u0627\u0631\u0628\u0631 \u0641\u0639\u0627\u0644 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<p>\u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627:<\/p>\n<p>ScrollMagic: \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0627\u0633\u06a9\u0631\u0648\u0644.<\/p>\n<p>AOS (Animate On Scroll): \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u0627\u0633\u06a9\u0631\u0648\u0644 \u0641\u0639\u0627\u0644 \u0645\u06cc \u0634\u0648\u0646\u062f.<\/p>\n<p>AOS.init({<br \/>\n  duration: 1200,<br \/>\n});<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u067e\u06cc\u0645\u0627\u06cc\u0634\u200c\u0634\u062f\u0647 \u0628\u0627 \u0632\u0646\u062f\u0647\u200c\u06a9\u0631\u062f\u0646 \u0645\u062d\u062a\u0648\u0627 \u062f\u0631 \u062d\u06cc\u0646 \u062d\u0631\u06a9\u062a \u06a9\u0627\u0631\u0628\u0631\u060c \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f.<\/p>\n<p>4.3 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0648\u0627\u06a9\u0646\u0634 \u06af\u0631\u0627<\/p>\n<p>\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 \u0628\u0627 \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u0647\u0627 \u0648 \u062c\u0647\u062a\u200c\u06af\u06cc\u0631\u06cc\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0633\u0627\u0632\u06af\u0627\u0631 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.<\/p>\n<p>\u062a\u06a9\u0646\u06cc\u06a9:<\/p>\n<p>\u0627\u0632 \u067e\u0631\u0633 \u0648 \u062c\u0648\u0647\u0627\u06cc \u0631\u0633\u0627\u0646\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<br \/>\n\u0645\u0642\u06cc\u0627\u0633 \u0628\u0646\u062f\u06cc \u0648 \u062a\u0628\u062f\u06cc\u0644 \u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 viewport \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p>const viewportWidth = window.innerWidth;<br \/>\nconst scaleFactor = viewportWidth \/ 1920;<\/p>\n<p>gsap.to(&#8220;.box&#8221;, { scale: scaleFactor, duration: 1 });<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 \u06cc\u06a9 \u062a\u062c\u0631\u0628\u0647 \u062b\u0627\u0628\u062a \u0631\u0627 \u062f\u0631 \u0628\u06cc\u0646 \u062f\u0633\u062a\u06af\u0627\u0647\u200c\u0647\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n<p>5. \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634 \u0647\u0627 \u0628\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0648\u0628<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0631\u0648\u0627\u0646 \u0648 \u0645\u0648\u062b\u0631\u060c \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634 \u0647\u0627 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n<p>5.1 \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f<\/p>\n<p>\u0628\u0647 \u062d\u062f\u0627\u0642\u0644 \u0631\u0633\u0627\u0646\u062f\u0646 \u0631\u0646\u06af \u0622\u0645\u06cc\u0632\u06cc \u0648 \u062c\u0631\u06cc\u0627\u0646 \u0645\u062c\u062f\u062f: \u0627\u0632 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0645\u06a9\u0631\u0631 \u062f\u0631 \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u0686\u06cc\u062f\u0645\u0627\u0646 \u062e\u0648\u062f\u062f\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f requestAnimationFrame: \u0627\u06cc\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627 \u0628\u0627 \u0686\u0631\u062e\u0647 \u0631\u0646\u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0647\u0645\u06af\u0627\u0645 \u0647\u0633\u062a\u0646\u062f.<\/p>\n<p>\u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0646\u0627\u0628\u0639: \u0627\u0632 \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0622\u0645\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0627\u0632 \u0645\u062d\u0627\u0633\u0628\u0627\u062a \u0633\u0646\u06af\u06cc\u0646 \u062f\u0631 \u062d\u0644\u0642\u0647 \u0647\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062e\u0648\u062f\u062f\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p>5.2 \u0645\u0644\u0627\u062d\u0638\u0627\u062a \u062f\u0633\u062a\u0631\u0633\u06cc<\/p>\n<p>\u0627\u0631\u0627\u0626\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646: \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u0645\u0627\u0646\u0639 \u062f\u0633\u062a\u0631\u0633\u06cc \u0646\u06cc\u0633\u062a\u0646\u062f.  \u062f\u0631 \u0635\u0648\u0631\u062a \u0644\u0632\u0648\u0645\u060c \u0645\u062d\u062a\u0648\u0627 \u06cc\u0627 \u06af\u0632\u06cc\u0646\u0647\u200c\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631\u06cc \u0628\u0631\u0627\u06cc \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f.<\/p>\n<p>\u0627\u0632 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u062d\u0631\u06a9\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f: \u0628\u0627 \u0628\u0631\u0631\u0633\u06cc \u0628\u0647 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u06a9\u0627\u0631\u0628\u0631 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0647\u0634 \u062d\u0631\u06a9\u062a \u0627\u062d\u062a\u0631\u0627\u0645 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f window.matchMedia(&#8216;(prefers-reduced-motion: reduce)&#8217;).<\/p>\n<p>5.3 \u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u0628\u06cc\u0646 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627<\/p>\n<p>\u062a\u0633\u062a \u062f\u0631 \u0628\u06cc\u0646 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627: \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0645\u062f\u0627\u0648\u0645 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627 \u0648 \u062f\u0633\u062a\u06af\u0627\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<p>Polyfills \u0648 Fallbacks: \u0628\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0642\u062f\u06cc\u0645\u06cc \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0646\u0645\u06cc \u0634\u0648\u0646\u062f \u0627\u0632 polyfills \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>6. \u0645\u0637\u0627\u0644\u0639\u0627\u062a \u0645\u0648\u0631\u062f\u06cc \u0648 \u0646\u0645\u0648\u0646\u0647<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0646 \u0642\u062f\u0631\u062a \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0628\u0647 \u0686\u0646\u062f \u0646\u0645\u0648\u0646\u0647 \u0648\u0627\u0642\u0639\u06cc \u0646\u06af\u0627\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>6.1 \u0646\u0645\u0627\u06cc\u0634 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u062a\u0639\u0627\u0645\u0644\u06cc<\/p>\n<p>\u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0633\u0627\u06cc\u062a \u0647\u0627\u06cc \u062a\u062c\u0627\u0631\u062a \u0627\u0644\u06a9\u062a\u0631\u0648\u0646\u06cc\u06a9 \u0627\u0632 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062f\u0645\u0648\u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u0645\u062d\u0635\u0648\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f.  \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0635\u0641\u062d\u0647 \u0645\u062d\u0635\u0648\u0644 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062f\u0627\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0631\u0646\u06af\u06cc \u0645\u062e\u062a\u0644\u0641 \u0631\u0627 \u0628\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0628\u06af\u0630\u0627\u0631\u062f \u06cc\u0627 \u062c\u0632\u0626\u06cc\u0627\u062a \u0645\u062d\u0635\u0648\u0644 \u0631\u0627 \u0628\u0632\u0631\u06af\u0646\u0645\u0627\u06cc\u06cc \u06a9\u0646\u062f.<\/p>\n<p>6.2 \u062a\u062c\u0633\u0645 \u062f\u0627\u062f\u0647 \u0647\u0627<\/p>\n<p>\u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u062a\u062c\u0633\u0645 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u063a\u0644\u0628 \u0627\u0632 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0628\u0647 \u0631\u0648\u0634\u06cc \u062c\u0630\u0627\u0628 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f.  \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f D3.js \u0627\u0632 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0646\u0645\u0648\u062f\u0627\u0631\u0647\u0627 \u0648 \u0646\u0645\u0648\u062f\u0627\u0631\u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<p>6.3 \u0628\u0627\u0632\u06cc \u0647\u0627 \u0648 \u062a\u062c\u0631\u0628\u06cc\u0627\u062a \u062a\u0639\u0627\u0645\u0644\u06cc<\/p>\n<p>\u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0647\u0645\u0686\u0646\u06cc\u0646 \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0628\u0627\u0632\u06cc \u0648 \u062a\u062c\u0631\u0628\u0647 \u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f Phaser.js \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0628\u0627\u0632\u06cc\u200c\u0647\u0627\u06cc \u062f\u0648 \u0628\u0639\u062f\u06cc \u0628\u0627 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u06a9\u0647 \u0628\u0647 \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631 \u067e\u0627\u0633\u062e \u0645\u06cc\u200c\u062f\u0647\u0646\u062f.<\/p>\n<p>\u0646\u062a\u06cc\u062c\u0647<\/p>\n<p>\u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06cc\u06a9 \u0627\u0628\u0632\u0627\u0631 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0648\u0628 \u0627\u0633\u062a \u06a9\u0647 \u0637\u06cc\u0641 \u0648\u0633\u06cc\u0639\u06cc \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627 \u0648 \u062a\u06a9\u0646\u06cc\u06a9 \u0647\u0627 \u0631\u0627 \u0645\u062a\u0646\u0627\u0633\u0628 \u0628\u0627 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.  \u0627\u0632 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u067e\u0627\u06cc\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648\u0627\u0646\u06cc\u0644\u06cc \u06af\u0631\u0641\u062a\u0647 \u062a\u0627 \u062a\u06a9\u0646\u06cc\u06a9 \u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0628\u0627 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u062a\u062e\u0635\u0635\u06cc\u060c \u0627\u0645\u06a9\u0627\u0646\u0627\u062a \u0628\u0633\u06cc\u0627\u0631 \u0632\u06cc\u0627\u062f \u0627\u0633\u062a.  \u0628\u0627 \u062f\u0631\u06a9 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0627\u0635\u0644\u06cc\u060c \u06a9\u0627\u0648\u0634 \u062f\u0631 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u0648 \u067e\u06cc\u0631\u0648\u06cc \u0627\u0632 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647\u200c\u0647\u0627\u060c \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u062a\u062c\u0627\u0631\u0628 \u0648\u0628 \u062c\u0630\u0627\u0628 \u0648 \u067e\u0648\u06cc\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u0646\u062f \u06a9\u0647 \u062a\u0639\u0627\u0645\u0644 \u0648 \u0631\u0636\u0627\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n<p>\u0645\u0646\u0627\u0628\u0639 \u0627\u0636\u0627\u0641\u06cc<\/p>\n<p>\u0628\u0631\u0627\u06cc \u06a9\u0633\u0627\u0646\u06cc \u06a9\u0647 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u063a\u0648\u0627\u0635\u06cc \u0639\u0645\u06cc\u0642 \u062a\u0631 \u062f\u0631 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0648\u0628 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0647\u0633\u062a\u0646\u062f\u060c \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0646\u0627\u0628\u0639 \u0627\u0636\u0627\u0641\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f:<\/p>\n<p>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0645\u0646\u0627\u0628\u0639 \u0648 \u062f\u0627\u0646\u0634 \u0628\u0647 \u062f\u0633\u062a \u0622\u0645\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0634\u0645\u0627 \u0628\u0647 \u062e\u0648\u0628\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0648\u0628 \u062e\u06cc\u0631\u0647 \u06a9\u0646\u0646\u062f\u0647 \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0634\u0645\u0627 \u0631\u0627 \u0645\u062c\u0630\u0648\u0628 \u0648 \u062f\u0631\u06af\u06cc\u0631 \u062e\u0648\u062f \u0645\u06cc \u06a9\u0646\u062f\u060c \u0645\u062c\u0647\u0632 \u0647\u0633\u062a\u06cc\u062f.<\/p>\n<p>  \ud83d\udcb0 \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0627\u0647\u062f\u0627 \u0628\u0647 \u0645\u0646 \u06a9\u0645\u06a9 \u06a9\u0646\u06cc\u062f<\/p>\n<div data-article-id=\"1951837\" id=\"article-body\">\n<p><strong>\u0645\u0639\u0631\u0641\u06cc<\/strong><\/p>\n<p>\u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648\u0628\u060c \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u0628\u0647 \u0628\u062e\u0634\u06cc \u062c\u062f\u0627\u06cc\u06cc \u0646\u0627\u067e\u0630\u06cc\u0631 \u0627\u0632 \u0627\u0641\u0632\u0627\u06cc\u0634 \u062a\u062c\u0631\u0628\u0647 \u0648 \u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631 \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0646\u062f.  \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0632\u0628\u0627\u0646 \u0647\u0645\u0647 \u06a9\u0627\u0631\u0647 \u0648 \u0642\u062f\u0631\u062a\u0645\u0646\u062f\u060c \u0646\u0642\u0634 \u0645\u0647\u0645\u06cc \u062f\u0631 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u062f\u0631 \u0648\u0628 \u062f\u0627\u0631\u062f.  \u0627\u0632 \u0627\u0646\u062a\u0642\u0627\u0644 \u0633\u0627\u062f\u0647 \u062a\u0627 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647\u060c \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0628\u0632\u0627\u0631\u0647\u0627 \u0648 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u0632\u0646\u062f\u0647 \u06a9\u0631\u062f\u0646 \u0639\u0646\u0627\u0635\u0631 \u067e\u0648\u06cc\u0627 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.  \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627 \u0648 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0645\u0648\u062c\u0648\u062f \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0648\u0628 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u0627\u0632 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0627\u0648\u0644\u06cc\u0647 \u062a\u0627 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0631\u0627 \u067e\u0648\u0634\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n<p><strong>1. \u0645\u0628\u0627\u0646\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0648\u0628<\/strong><\/p>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u063a\u0648\u0627\u0635\u06cc \u062f\u0631 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627 \u0648 \u062a\u06a9\u0646\u06cc\u06a9 \u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647\u060c \u062f\u0631\u06a9 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0627\u0633\u0627\u0633\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0648\u0628 \u0636\u0631\u0648\u0631\u06cc \u0627\u0633\u062a.<\/p>\n<p><strong>1.1 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0648\u0628 \u0686\u06cc\u0633\u062a\u061f<\/strong><\/p>\n<p>\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0648\u0628 \u0634\u0627\u0645\u0644 \u062a\u063a\u06cc\u06cc\u0631 \u062a\u062f\u0631\u06cc\u062c\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0639\u0646\u0627\u0635\u0631 HTML \u062f\u0631 \u0637\u0648\u0644 \u0632\u0645\u0627\u0646 \u0627\u0633\u062a.  \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062c\u0644\u0648\u0647 \u0647\u0627\u06cc \u0628\u0635\u0631\u06cc\u060c \u0627\u0641\u0632\u0627\u06cc\u0634 \u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631 \u0648 \u0647\u062f\u0627\u06cc\u062a \u062a\u0645\u0631\u06a9\u0632 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f.  \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0631\u0627\u06cc\u062c\u06cc \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0645\u062a\u062d\u0631\u06a9 \u06a9\u0631\u062f \u0639\u0628\u0627\u0631\u062a\u0646\u062f \u0627\u0632:<\/p>\n<ul>\n<li>\u0645\u0648\u0642\u0639\u06cc\u062a<\/li>\n<li>\u0627\u0646\u062f\u0627\u0632\u0647<\/li>\n<li>\u0631\u0646\u06af<\/li>\n<li>\u06a9\u062f\u0648\u0631\u062a<\/li>\n<li>\u062a\u0628\u062f\u06cc\u0644 (\u0686\u0631\u062e\u0634\u060c \u067e\u0648\u0633\u062a\u0647 \u067e\u0648\u0633\u062a\u0647 \u0634\u062f\u0646 \u0648 \u063a\u06cc\u0631\u0647)<\/li>\n<\/ul>\n<p><strong>1.2 \u0645\u0641\u0627\u0647\u06cc\u0645 \u06a9\u0644\u06cc\u062f\u06cc \u062f\u0631 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/strong><\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u0628\u0627\u06cc\u062f \u0686\u0646\u062f \u0645\u0641\u0647\u0648\u0645 \u06a9\u0644\u06cc\u062f\u06cc \u0631\u0627 \u062f\u0631\u06a9 \u06a9\u0646\u06cc\u062f:<\/p>\n<ul>\n<li>\n<strong>\u0642\u0627\u0628 \u0647\u0627:<\/strong> \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u0627\u0632 \u06cc\u06a9 \u0633\u0631\u06cc \u0641\u0631\u06cc\u0645 \u062a\u0634\u06a9\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0646\u062f.  \u0647\u0631 \u0641\u0631\u06cc\u0645 \u0646\u0634\u0627\u0646 \u062f\u0647\u0646\u062f\u0647 \u0648\u0636\u0639\u06cc\u062a \u062e\u0627\u0635\u06cc \u0627\u0632 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u0631 \u06cc\u06a9 \u0632\u0645\u0627\u0646 \u0645\u0639\u06cc\u0646 \u0627\u0633\u062a.<\/li>\n<li>\n<strong>\u062a\u0648\u0627\u0628\u0639 \u0632\u0645\u0627\u0646 \u0628\u0646\u062f\u06cc:<\/strong> \u0627\u06cc\u0646\u0647\u0627 \u0633\u0631\u0639\u062a \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc \u06a9\u0646\u0646\u062f\u060c \u0645\u0627\u0646\u0646\u062f ease-in\u060c ease-out \u0648 linear.<\/li>\n<li>\n<strong>RequestAnimationFrame:<\/strong> \u0627\u06cc\u0646 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0627\u062e\u0644\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u0628\u0627 \u0686\u0631\u062e\u0647 \u0631\u0646\u06af \u0622\u0645\u06cc\u0632\u06cc \u0645\u062c\u062f\u062f \u0645\u0631\u0648\u0631\u06af\u0631\u060c \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0631\u0648\u0627\u0646 \u0631\u0627 \u0627\u0645\u06a9\u0627\u0646 \u067e\u0630\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<\/ul>\n<p><strong>2. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u067e\u0627\u06cc\u0647<\/strong><\/p>\n<p>\u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u062f\u0648\u0646 \u0627\u062a\u06a9\u0627 \u0628\u0647 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u062e\u0627\u0631\u062c\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f.  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0646\u062d\u0648\u0647 \u0634\u0631\u0648\u0639 \u06a9\u0627\u0631 \u0628\u0627 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648\u0627\u0646\u06cc\u0644\u06cc \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p><strong>2.1 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 setInterval \u0648 setTimeout<\/strong><\/p>\n<p>\u0627\u06cc\u0646 <code>setInterval<\/code> \u0648 <code>setTimeout<\/code> \u062a\u0648\u0627\u0628\u0639 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u0646\u062f \u0628\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06a9\u0631\u0631 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u062f\u0631 \u0641\u0648\u0627\u0635\u0644 \u0632\u0645\u0627\u0646\u06cc \u0645\u0634\u062e\u0635\u060c \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">let<\/span> <span class=\"nx\">start<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">null<\/span><span class=\"p\">;<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">element<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">animate<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">step<\/span><span class=\"p\">(<\/span><span class=\"nx\">timestamp<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">start<\/span><span class=\"p\">)<\/span> <span class=\"nx\">start<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">timestamp<\/span><span class=\"p\">;<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">progress<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">timestamp<\/span> <span class=\"o\">-<\/span> <span class=\"nx\">start<\/span><span class=\"p\">;<\/span>\n  <span class=\"nx\">element<\/span><span class=\"p\">.<\/span><span class=\"nx\">style<\/span><span class=\"p\">.<\/span><span class=\"nx\">transform<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`translateX(<\/span><span class=\"p\">${<\/span><span class=\"nb\">Math<\/span><span class=\"p\">.<\/span><span class=\"nf\">min<\/span><span class=\"p\">(<\/span><span class=\"nx\">progress<\/span> <span class=\"o\">\/<\/span> <span class=\"mi\">10<\/span><span class=\"p\">,<\/span> <span class=\"mi\">200<\/span><span class=\"p\">)}<\/span><span class=\"s2\">px)`<\/span><span class=\"p\">;<\/span>\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">progress<\/span> <span class=\"o\"> <span class=\"mi\">2000<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nf\">requestAnimationFrame<\/span><span class=\"p\">(<\/span><span class=\"nx\">step<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nf\">requestAnimationFrame<\/span><span class=\"p\">(<\/span><span class=\"nx\">step<\/span><span class=\"p\">);<\/span>\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644\u060c <code>requestAnimationFrame<\/code> \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0635\u0627\u0641 \u06a9\u0647 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0627\u0641\u0642\u06cc \u062d\u0631\u06a9\u062a \u0645\u06cc \u062f\u0647\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p><strong>2.2 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0646\u062a\u0642\u0627\u0644 CSS \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/strong><\/p>\n<p>\u062a\u0631\u06a9\u06cc\u0628 \u062a\u0631\u0627\u0646\u0632\u06cc\u0634\u0646 \u0647\u0627\u06cc CSS \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc\u06cc \u0628\u0627 \u06a9\u062f \u06a9\u0645\u062a\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\"\/>\n  <span class=\"nc\">.box<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">100px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">height<\/span><span class=\"p\">:<\/span> <span class=\"m\">100px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"no\">red<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">transform<\/span> <span class=\"m\">0.5s<\/span> <span class=\"n\">ease<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n  <span class=\"nc\">.box.move<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">translateX<\/span><span class=\"p\">(<\/span><span class=\"m\">200px<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"nt\"\/>\n<span class=\"nt\"><p> <span class=\"na\">id=<\/span><span class=\"s\">\"box\"<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"box\"<\/span><span class=\"nt\">&gt;<\/span><\/p><\/span>\n<span class=\"nt\"><script\/><\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">box<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">box<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"nx\">box<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">click<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">box<\/span><span class=\"p\">.<\/span><span class=\"nx\">classList<\/span><span class=\"p\">.<\/span><span class=\"nf\">toggle<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">move<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">});<\/span>\n<span class=\"nt\"\/>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627\u060c \u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f\u0646 \u0631\u0648\u06cc \u06a9\u0627\u062f\u0631\u060c \u06a9\u0644\u0627\u0633\u06cc \u06a9\u0647 \u06cc\u06a9 \u0627\u0646\u062a\u0642\u0627\u0644 CSS \u0631\u0627 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n<p><strong>3. \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/strong><\/p>\n<p>\u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0648\u0627\u0646\u06cc\u0644\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0627\u0633\u062a\u060c \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0631\u0627 \u0633\u0627\u062f\u0647 \u06a9\u0631\u062f\u0647 \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f.  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0631\u0648\u0631\u06cc \u0628\u0631 \u0628\u0631\u062e\u06cc \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0645\u062d\u0628\u0648\u0628 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p><strong>3.1 GSAP (\u0633\u06a9\u0648\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 GreenSock)<\/strong><\/p>\n<p>GSAP \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u067e\u0631\u06a9\u0627\u0631\u0628\u0631\u062f \u0628\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0628\u0627 \u06a9\u0627\u0631\u0627\u06cc\u06cc \u0628\u0627\u0644\u0627 \u0627\u0633\u062a.<\/p>\n<ul>\n<li>\n<strong>\u0627\u0645\u06a9\u0627\u0646\u0627\u062a:<\/strong><\/p>\n<ul>\n<li>\u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u0628\u06cc\u0646 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627<\/li>\n<li>\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0628\u0627 \u06a9\u0627\u0631\u0627\u06cc\u06cc \u0628\u0627\u0644\u0627<\/li>\n<li>API \u063a\u0646\u06cc \u0628\u0627 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u062a\u0648\u0627\u0644\u06cc \u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nx\">gsap<\/span><span class=\"p\">.<\/span><span class=\"nf\">to<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">.box<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">x<\/span><span class=\"p\">:<\/span> <span class=\"mi\">200<\/span><span class=\"p\">,<\/span> <span class=\"na\">duration<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span> <span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>GSAP \u06cc\u06a9 API \u0633\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u0645\u062a\u062d\u0631\u06a9 \u0633\u0627\u0632\u06cc \u0639\u0646\u0627\u0635\u0631 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0622\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0645\u0646\u0627\u0633\u0628 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p><strong>3.2 Anime.js<\/strong><\/p>\n<p>Anime.js \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0633\u0628\u06a9 \u0648\u0632\u0646 \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 API \u062a\u0645\u06cc\u0632 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<ul>\n<li>\n<strong>\u0627\u0645\u06a9\u0627\u0646\u0627\u062a:<\/strong><\/p>\n<ul>\n<li>\u0633\u06cc\u0646\u062a\u06a9\u0633 \u0622\u0633\u0627\u0646 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647<\/li>\n<li>\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u0686\u0646\u062f\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0648 \u0627\u0647\u062f\u0627\u0641<\/li>\n<li>\u062a\u0645\u0627\u0633 \u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0648\u0639\u062f\u0647\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nf\">anime<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">targets<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.box<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">translateX<\/span><span class=\"p\">:<\/span> <span class=\"mi\">250<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">duration<\/span><span class=\"p\">:<\/span> <span class=\"mi\">2000<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">easing<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">easeInOutQuad<\/span><span class=\"dl\">'<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>Anime.js \u0627\u0645\u06a9\u0627\u0646 \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0645\u062e\u062a\u0635\u0631 \u0648 \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0637\u06cc\u0641 \u0648\u0633\u06cc\u0639\u06cc \u0627\u0632 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627 \u0627\u06cc\u062f\u0647 \u0622\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p><strong>3.3 Three.js<\/strong><\/p>\n<p>Three.js \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u0648 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0633\u0647 \u0628\u0639\u062f\u06cc \u0627\u0633\u062a.<\/p>\n<ul>\n<li>\n<strong>\u0627\u0645\u06a9\u0627\u0646\u0627\u062a:<\/strong><\/p>\n<ul>\n<li>\u0631\u0646\u062f\u0631 \u06af\u0631\u0627\u0641\u06cc\u06a9 \u0633\u0647 \u0628\u0639\u062f\u06cc<\/li>\n<li>\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u0645\u062f\u0644 \u0647\u0627 \u0648 \u0627\u0641\u06a9\u062a \u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0633\u0647 \u0628\u0639\u062f\u06cc<\/li>\n<li>\u0627\u062f\u063a\u0627\u0645 \u0628\u0627 WebGL\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">scene<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nc\">Scene<\/span><span class=\"p\">();<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">camera<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nc\">PerspectiveCamera<\/span><span class=\"p\">(<\/span><span class=\"mi\">75<\/span><span class=\"p\">,<\/span> <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerWidth<\/span> <span class=\"o\">\/<\/span> <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerHeight<\/span><span class=\"p\">,<\/span> <span class=\"mf\">0.1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1000<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">renderer<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nc\">WebGLRenderer<\/span><span class=\"p\">();<\/span>\n<span class=\"nx\">renderer<\/span><span class=\"p\">.<\/span><span class=\"nf\">setSize<\/span><span class=\"p\">(<\/span><span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerWidth<\/span><span class=\"p\">,<\/span> <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerHeight<\/span><span class=\"p\">);<\/span>\n<span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">body<\/span><span class=\"p\">.<\/span><span class=\"nf\">appendChild<\/span><span class=\"p\">(<\/span><span class=\"nx\">renderer<\/span><span class=\"p\">.<\/span><span class=\"nx\">domElement<\/span><span class=\"p\">);<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">geometry<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nc\">BoxGeometry<\/span><span class=\"p\">();<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">material<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nc\">MeshBasicMaterial<\/span><span class=\"p\">({<\/span> <span class=\"na\">color<\/span><span class=\"p\">:<\/span> <span class=\"mh\">0x00ff00<\/span> <span class=\"p\">});<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">cube<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">THREE<\/span><span class=\"p\">.<\/span><span class=\"nc\">Mesh<\/span><span class=\"p\">(<\/span><span class=\"nx\">geometry<\/span><span class=\"p\">,<\/span> <span class=\"nx\">material<\/span><span class=\"p\">);<\/span>\n<span class=\"nx\">scene<\/span><span class=\"p\">.<\/span><span class=\"nf\">add<\/span><span class=\"p\">(<\/span><span class=\"nx\">cube<\/span><span class=\"p\">);<\/span>\n\n<span class=\"nx\">camera<\/span><span class=\"p\">.<\/span><span class=\"nx\">position<\/span><span class=\"p\">.<\/span><span class=\"nx\">z<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">5<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">animate<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">requestAnimationFrame<\/span><span class=\"p\">(<\/span><span class=\"nx\">animate<\/span><span class=\"p\">);<\/span>\n  <span class=\"nx\">cube<\/span><span class=\"p\">.<\/span><span class=\"nx\">rotation<\/span><span class=\"p\">.<\/span><span class=\"nx\">x<\/span> <span class=\"o\">+=<\/span> <span class=\"mf\">0.01<\/span><span class=\"p\">;<\/span>\n  <span class=\"nx\">cube<\/span><span class=\"p\">.<\/span><span class=\"nx\">rotation<\/span><span class=\"p\">.<\/span><span class=\"nx\">y<\/span> <span class=\"o\">+=<\/span> <span class=\"mf\">0.01<\/span><span class=\"p\">;<\/span>\n  <span class=\"nx\">renderer<\/span><span class=\"p\">.<\/span><span class=\"nf\">render<\/span><span class=\"p\">(<\/span><span class=\"nx\">scene<\/span><span class=\"p\">,<\/span> <span class=\"nx\">camera<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nf\">animate<\/span><span class=\"p\">();<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>Three.js \u0627\u06cc\u062c\u0627\u062f \u062a\u062c\u0631\u0628\u06cc\u0627\u062a \u0633\u0647 \u0628\u0639\u062f\u06cc \u0647\u0645\u0647\u062c\u0627\u0646\u0628\u0647 \u062f\u0631 \u0648\u0628 \u0631\u0627 \u0627\u0645\u06a9\u0627\u0646 \u067e\u0630\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p><strong>4. \u062a\u06a9\u0646\u06cc\u06a9 \u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647<\/strong><\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0631\u060c \u062a\u06a9\u0646\u06cc\u06a9 \u0647\u0627 \u0648 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f.<\/p>\n<p><strong>4.1 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0641\u06cc\u0632\u06cc\u06a9<\/strong><\/p>\n<p>\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0641\u06cc\u0632\u06cc\u06a9 \u0641\u06cc\u0632\u06cc\u06a9 \u062f\u0646\u06cc\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062d\u0631\u06a9\u062a \u0648\u0627\u0642\u0639\u06cc \u0634\u0628\u06cc\u0647 \u0633\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<ul>\n<li>\n<strong>\u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627:<\/strong><\/p>\n<ul>\n<li>\n<strong>Matter.js:<\/strong> \u06cc\u06a9 \u0645\u0648\u062a\u0648\u0631 \u0641\u06cc\u0632\u06cc\u06a9 \u062f\u0648 \u0628\u0639\u062f\u06cc \u0628\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0648\u0628.<\/li>\n<li>\n<strong>Cannon.js:<\/strong> \u06cc\u06a9 \u0645\u0648\u062a\u0648\u0631 \u0641\u06cc\u0632\u06cc\u06a9 \u0633\u0647 \u0628\u0639\u062f\u06cc \u06a9\u0647 \u0628\u0647 \u062e\u0648\u0628\u06cc \u0628\u0627 Three.js \u0627\u062f\u063a\u0627\u0645 \u0645\u06cc \u0634\u0648\u062f.\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">engine<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Matter<\/span><span class=\"p\">.<\/span><span class=\"nx\">Engine<\/span><span class=\"p\">.<\/span><span class=\"nf\">create<\/span><span class=\"p\">();<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">world<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">engine<\/span><span class=\"p\">.<\/span><span class=\"nx\">world<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">box<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Matter<\/span><span class=\"p\">.<\/span><span class=\"nx\">Bodies<\/span><span class=\"p\">.<\/span><span class=\"nf\">rectangle<\/span><span class=\"p\">(<\/span><span class=\"mi\">400<\/span><span class=\"p\">,<\/span> <span class=\"mi\">200<\/span><span class=\"p\">,<\/span> <span class=\"mi\">80<\/span><span class=\"p\">,<\/span> <span class=\"mi\">80<\/span><span class=\"p\">);<\/span>\n<span class=\"nx\">Matter<\/span><span class=\"p\">.<\/span><span class=\"nx\">World<\/span><span class=\"p\">.<\/span><span class=\"nf\">add<\/span><span class=\"p\">(<\/span><span class=\"nx\">world<\/span><span class=\"p\">,<\/span> <span class=\"nx\">box<\/span><span class=\"p\">);<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">update<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">Matter<\/span><span class=\"p\">.<\/span><span class=\"nx\">Engine<\/span><span class=\"p\">.<\/span><span class=\"nf\">update<\/span><span class=\"p\">(<\/span><span class=\"nx\">engine<\/span><span class=\"p\">);<\/span>\n  <span class=\"nf\">requestAnimationFrame<\/span><span class=\"p\">(<\/span><span class=\"nx\">update<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nf\">update<\/span><span class=\"p\">();<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0641\u06cc\u0632\u06cc\u06a9 \u0644\u0627\u06cc\u0647 \u0627\u06cc \u0627\u0632 \u0648\u0627\u0642\u0639 \u06af\u0631\u0627\u06cc\u06cc \u0648 \u062a\u0639\u0627\u0645\u0644 \u0631\u0627 \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u0634\u0645\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<p><strong>4.2 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u067e\u06cc\u0645\u0627\u06cc\u0634\u06cc<\/strong><\/p>\n<p>\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0627\u0633\u06a9\u0631\u0648\u0644 \u0641\u0639\u0627\u0644 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0645\u0648\u0642\u0639\u06cc\u062a \u0627\u0633\u06a9\u0631\u0648\u0644 \u06a9\u0627\u0631\u0628\u0631 \u0641\u0639\u0627\u0644 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<ul>\n<li>\n<strong>\u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627:<\/strong><\/p>\n<ul>\n<li>\n<strong>ScrollMagic:<\/strong> \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0627\u0633\u06a9\u0631\u0648\u0644.<\/li>\n<li>\n<strong>AOS (Animate On Scroll):<\/strong> \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u0627\u0633\u06a9\u0631\u0648\u0644 \u0641\u0639\u0627\u0644 \u0645\u06cc \u0634\u0648\u0646\u062f.\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nx\">AOS<\/span><span class=\"p\">.<\/span><span class=\"nf\">init<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">duration<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1200<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u067e\u06cc\u0645\u0627\u06cc\u0634\u200c\u0634\u062f\u0647 \u0628\u0627 \u0632\u0646\u062f\u0647\u200c\u06a9\u0631\u062f\u0646 \u0645\u062d\u062a\u0648\u0627 \u062f\u0631 \u062d\u06cc\u0646 \u062d\u0631\u06a9\u062a \u06a9\u0627\u0631\u0628\u0631\u060c \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f.<\/p>\n<p><strong>4.3 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0648\u0627\u06a9\u0646\u0634 \u06af\u0631\u0627<\/strong><\/p>\n<p>\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 \u0628\u0627 \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u0647\u0627 \u0648 \u062c\u0647\u062a\u200c\u06af\u06cc\u0631\u06cc\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0633\u0627\u0632\u06af\u0627\u0631 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.<\/p>\n<ul>\n<li>\n<strong>\u062a\u06a9\u0646\u06cc\u06a9:<\/strong><\/p>\n<ul>\n<li>\u0627\u0632 \u067e\u0631\u0633 \u0648 \u062c\u0648\u0647\u0627\u06cc \u0631\u0633\u0627\u0646\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u0645\u0642\u06cc\u0627\u0633 \u0628\u0646\u062f\u06cc \u0648 \u062a\u0628\u062f\u06cc\u0644 \u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 viewport \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f.\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">viewportWidth<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerWidth<\/span><span class=\"p\">;<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">scaleFactor<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">viewportWidth<\/span> <span class=\"o\">\/<\/span> <span class=\"mi\">1920<\/span><span class=\"p\">;<\/span>\n\n<span class=\"nx\">gsap<\/span><span class=\"p\">.<\/span><span class=\"nf\">to<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">.box<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">scale<\/span><span class=\"p\">:<\/span> <span class=\"nx\">scaleFactor<\/span><span class=\"p\">,<\/span> <span class=\"na\">duration<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span> <span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 \u06cc\u06a9 \u062a\u062c\u0631\u0628\u0647 \u062b\u0627\u0628\u062a \u0631\u0627 \u062f\u0631 \u0628\u06cc\u0646 \u062f\u0633\u062a\u06af\u0627\u0647\u200c\u0647\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n<p><strong>5. \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634 \u0647\u0627 \u0628\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0648\u0628<\/strong><\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0631\u0648\u0627\u0646 \u0648 \u0645\u0648\u062b\u0631\u060c \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634 \u0647\u0627 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n<p><strong>5.1 \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f<\/strong><\/p>\n<ul>\n<li>\n<strong>\u0628\u0647 \u062d\u062f\u0627\u0642\u0644 \u0631\u0633\u0627\u0646\u062f\u0646 \u0631\u0646\u06af \u0622\u0645\u06cc\u0632\u06cc \u0648 \u062c\u0631\u06cc\u0627\u0646 \u0645\u062c\u062f\u062f:<\/strong> \u0627\u0632 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0645\u06a9\u0631\u0631 \u062f\u0631 \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u0686\u06cc\u062f\u0645\u0627\u0646 \u062e\u0648\u062f\u062f\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\n<strong>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>requestAnimationFrame<\/code>:<\/strong> \u0627\u06cc\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627 \u0628\u0627 \u0686\u0631\u062e\u0647 \u0631\u0646\u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0647\u0645\u06af\u0627\u0645 \u0647\u0633\u062a\u0646\u062f.<\/li>\n<li>\n<strong>\u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0646\u0627\u0628\u0639:<\/strong> \u0627\u0632 \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0622\u0645\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0627\u0632 \u0645\u062d\u0627\u0633\u0628\u0627\u062a \u0633\u0646\u06af\u06cc\u0646 \u062f\u0631 \u062d\u0644\u0642\u0647 \u0647\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062e\u0648\u062f\u062f\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n<p><strong>5.2 \u0645\u0644\u0627\u062d\u0638\u0627\u062a \u062f\u0633\u062a\u0631\u0633\u06cc<\/strong><\/p>\n<ul>\n<li>\n<strong>\u0627\u0631\u0627\u0626\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646:<\/strong> \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u0645\u0627\u0646\u0639 \u062f\u0633\u062a\u0631\u0633\u06cc \u0646\u06cc\u0633\u062a\u0646\u062f.  \u062f\u0631 \u0635\u0648\u0631\u062a \u0644\u0632\u0648\u0645\u060c \u0645\u062d\u062a\u0648\u0627 \u06cc\u0627 \u06af\u0632\u06cc\u0646\u0647\u200c\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631\u06cc \u0628\u0631\u0627\u06cc \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f.<\/li>\n<li>\n<strong>\u0627\u0632 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u062d\u0631\u06a9\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/strong> \u0628\u0627 \u0628\u0631\u0631\u0633\u06cc \u0628\u0647 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u06a9\u0627\u0631\u0628\u0631 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0647\u0634 \u062d\u0631\u06a9\u062a \u0627\u062d\u062a\u0631\u0627\u0645 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f <code>window.matchMedia('(prefers-reduced-motion: reduce)')<\/code>.<\/li>\n<\/ul>\n<p><strong>5.3 \u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u0628\u06cc\u0646 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627<\/strong><\/p>\n<ul>\n<li>\n<strong>\u062a\u0633\u062a \u062f\u0631 \u0628\u06cc\u0646 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627:<\/strong> \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0645\u062f\u0627\u0648\u0645 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627 \u0648 \u062f\u0633\u062a\u06af\u0627\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/li>\n<li>\n<strong>Polyfills \u0648 Fallbacks:<\/strong> \u0628\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0642\u062f\u06cc\u0645\u06cc \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0646\u0645\u06cc \u0634\u0648\u0646\u062f \u0627\u0632 polyfills \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n<p><strong>6. \u0645\u0637\u0627\u0644\u0639\u0627\u062a \u0645\u0648\u0631\u062f\u06cc \u0648 \u0646\u0645\u0648\u0646\u0647<\/strong><\/p>\n<p>\u0628\u0631\u0627\u06cc \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0646 \u0642\u062f\u0631\u062a \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0628\u0647 \u0686\u0646\u062f \u0646\u0645\u0648\u0646\u0647 \u0648\u0627\u0642\u0639\u06cc \u0646\u06af\u0627\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<p><strong>6.1 \u0646\u0645\u0627\u06cc\u0634 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u062a\u0639\u0627\u0645\u0644\u06cc<\/strong><\/p>\n<p>\u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0633\u0627\u06cc\u062a \u0647\u0627\u06cc \u062a\u062c\u0627\u0631\u062a \u0627\u0644\u06a9\u062a\u0631\u0648\u0646\u06cc\u06a9 \u0627\u0632 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062f\u0645\u0648\u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u0645\u062d\u0635\u0648\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f.  \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0635\u0641\u062d\u0647 \u0645\u062d\u0635\u0648\u0644 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062f\u0627\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0631\u0646\u06af\u06cc \u0645\u062e\u062a\u0644\u0641 \u0631\u0627 \u0628\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0628\u06af\u0630\u0627\u0631\u062f \u06cc\u0627 \u062c\u0632\u0626\u06cc\u0627\u062a \u0645\u062d\u0635\u0648\u0644 \u0631\u0627 \u0628\u0632\u0631\u06af\u0646\u0645\u0627\u06cc\u06cc \u06a9\u0646\u062f.<\/p>\n<p><strong>6.2 \u062a\u062c\u0633\u0645 \u062f\u0627\u062f\u0647 \u0647\u0627<\/strong><\/p>\n<p>\u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u062a\u062c\u0633\u0645 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u063a\u0644\u0628 \u0627\u0632 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0628\u0647 \u0631\u0648\u0634\u06cc \u062c\u0630\u0627\u0628 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f.  \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f D3.js \u0627\u0632 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0646\u0645\u0648\u062f\u0627\u0631\u0647\u0627 \u0648 \u0646\u0645\u0648\u062f\u0627\u0631\u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<p><strong>6.3 \u0628\u0627\u0632\u06cc \u0647\u0627 \u0648 \u062a\u062c\u0631\u0628\u06cc\u0627\u062a \u062a\u0639\u0627\u0645\u0644\u06cc<\/strong><\/p>\n<p>\u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0647\u0645\u0686\u0646\u06cc\u0646 \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0628\u0627\u0632\u06cc \u0648 \u062a\u062c\u0631\u0628\u0647 \u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f Phaser.js \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0628\u0627\u0632\u06cc\u200c\u0647\u0627\u06cc \u062f\u0648 \u0628\u0639\u062f\u06cc \u0628\u0627 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u06a9\u0647 \u0628\u0647 \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631 \u067e\u0627\u0633\u062e \u0645\u06cc\u200c\u062f\u0647\u0646\u062f.<\/p>\n<p><strong>\u0646\u062a\u06cc\u062c\u0647<\/strong><\/p>\n<p>\u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06cc\u06a9 \u0627\u0628\u0632\u0627\u0631 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0648\u0628 \u0627\u0633\u062a \u06a9\u0647 \u0637\u06cc\u0641 \u0648\u0633\u06cc\u0639\u06cc \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627 \u0648 \u062a\u06a9\u0646\u06cc\u06a9 \u0647\u0627 \u0631\u0627 \u0645\u062a\u0646\u0627\u0633\u0628 \u0628\u0627 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.  \u0627\u0632 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u067e\u0627\u06cc\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648\u0627\u0646\u06cc\u0644\u06cc \u06af\u0631\u0641\u062a\u0647 \u062a\u0627 \u062a\u06a9\u0646\u06cc\u06a9 \u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0628\u0627 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u062a\u062e\u0635\u0635\u06cc\u060c \u0627\u0645\u06a9\u0627\u0646\u0627\u062a \u0628\u0633\u06cc\u0627\u0631 \u0632\u06cc\u0627\u062f \u0627\u0633\u062a.  \u0628\u0627 \u062f\u0631\u06a9 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0627\u0635\u0644\u06cc\u060c \u06a9\u0627\u0648\u0634 \u062f\u0631 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u0648 \u067e\u06cc\u0631\u0648\u06cc \u0627\u0632 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647\u200c\u0647\u0627\u060c \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u062a\u062c\u0627\u0631\u0628 \u0648\u0628 \u062c\u0630\u0627\u0628 \u0648 \u067e\u0648\u06cc\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u0646\u062f \u06a9\u0647 \u062a\u0639\u0627\u0645\u0644 \u0648 \u0631\u0636\u0627\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n<p><strong>\u0645\u0646\u0627\u0628\u0639 \u0627\u0636\u0627\u0641\u06cc<\/strong><\/p>\n<p>\u0628\u0631\u0627\u06cc \u06a9\u0633\u0627\u0646\u06cc \u06a9\u0647 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u063a\u0648\u0627\u0635\u06cc \u0639\u0645\u06cc\u0642 \u062a\u0631 \u062f\u0631 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0648\u0628 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0647\u0633\u062a\u0646\u062f\u060c \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0646\u0627\u0628\u0639 \u0627\u0636\u0627\u0641\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f:<\/p>\n<p>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0645\u0646\u0627\u0628\u0639 \u0648 \u062f\u0627\u0646\u0634 \u0628\u0647 \u062f\u0633\u062a \u0622\u0645\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0634\u0645\u0627 \u0628\u0647 \u062e\u0648\u0628\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0648\u0628 \u062e\u06cc\u0631\u0647 \u06a9\u0646\u0646\u062f\u0647 \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0634\u0645\u0627 \u0631\u0627 \u0645\u062c\u0630\u0648\u0628 \u0648 \u062f\u0631\u06af\u06cc\u0631 \u062e\u0648\u062f \u0645\u06cc \u06a9\u0646\u062f\u060c \u0645\u062c\u0647\u0632 \u0647\u0633\u062a\u06cc\u062f.<\/p>\n<hr\/>\n<h2>\n<p>  \ud83d\udcb0 \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0627\u0647\u062f\u0627 \u0628\u0647 \u0645\u0646 \u06a9\u0645\u06a9 \u06a9\u0646\u06cc\u062f<br \/>\n<\/h2>\n<p><img alt=\"BuyMeACoffee\" loading=\"lazy\" width=\"162\" height=\"28\"\/><\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Summarize this content to 400 words in Persian Lang \u0645\u0639\u0631\u0641\u06cc \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648\u0628\u060c \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u0628\u0647 \u0628\u062e\u0634\u06cc \u062c\u062f\u0627\u06cc\u06cc \u0646\u0627\u067e\u0630\u06cc\u0631 \u0627\u0632 \u0627\u0641\u0632\u0627\u06cc\u0634 \u062a\u062c\u0631\u0628\u0647 \u0648 \u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631 \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0646\u062f. \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0632\u0628\u0627\u0646 \u0647\u0645\u0647 \u06a9\u0627\u0631\u0647 \u0648 \u0642\u062f\u0631\u062a\u0645\u0646\u062f\u060c \u0646\u0642\u0634 \u0645\u0647\u0645\u06cc \u062f\u0631 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u062f\u0631 \u0648\u0628 \u062f\u0627\u0631\u062f. \u0627\u0632 \u0627\u0646\u062a\u0642\u0627\u0644 \u0633\u0627\u062f\u0647 \u062a\u0627 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc &hellip;<\/p>\n","protected":false},"author":2,"featured_media":72645,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-72644","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/72644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=72644"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/72644\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/72645"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=72644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=72644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=72644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}