{"id":16594,"date":"2016-03-05T17:08:41","date_gmt":"2016-03-05T13:38:41","guid":{"rendered":"http:\/\/www.xn--mgbguh09aqiwi.com\/?p=16594"},"modified":"2016-03-05T17:12:59","modified_gmt":"2016-03-05T13:42:59","slug":"%d8%a7%d9%81%da%a9%d8%aa-%d9%be%d8%a7%d8%b1%d8%a7%d9%84%d8%a7%da%a9%d8%b3-%d8%ad%d8%a8%d8%a7%d8%a8-%d8%a8%d8%b1%d8%a7%db%8c-%d9%be%d8%b3-%d8%b2%d9%85%db%8c%d9%86%d9%87-%d8%b3%d8%a7%db%8c%d8%aa","status":"publish","type":"post","link":"https:\/\/www.xn--mgbguh09aqiwi.com\/%d8%a7%d9%81%da%a9%d8%aa-%d9%be%d8%a7%d8%b1%d8%a7%d9%84%d8%a7%da%a9%d8%b3-%d8%ad%d8%a8%d8%a7%d8%a8-%d8%a8%d8%b1%d8%a7%db%8c-%d9%be%d8%b3-%d8%b2%d9%85%db%8c%d9%86%d9%87-%d8%b3%d8%a7%db%8c%d8%aa.html","title":{"rendered":"\u0627\u0641\u06a9\u062a \u067e\u0627\u0631\u0627\u0644\u0627\u06a9\u0633 \u062d\u0628\u0627\u0628 \u0628\u0631\u0627\u06cc \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0648\u0628 \u0633\u0627\u06cc\u062a ( html5 , css3 )"},"content":{"rendered":"

\u0637\u0628\u0642 \u0627\u06cc\u0645\u06cc\u0644 \u0647\u0627\u06cc \u0641\u0631\u0627\u0648\u0627\u0646\u06cc \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0645\u0639\u0631\u0641\u06cc \u0627\u0641\u06a9\u062a \u0647\u0627\u06cc \u067e\u0627\u0631\u0627\u0644\u0627\u06a9\u0633 \u062f\u0631 \u0648\u0628 \u0633\u0627\u06cc\u062a \u062f\u0627\u0634\u062a\u0645 , \u062a\u0635\u0645\u06cc\u0645 \u06af\u0631\u0641\u062a\u0645 \u0627\u0632 \u0627\u06cc\u0646 \u0628\u0647 \u0628\u0639\u062f \u0628\u06cc\u0634\u062a\u0631 \u0628\u0647 \u0627\u06cc\u0646 \u0646\u0648\u0639 \u0627\u0641\u06a9\u062a \u0647\u0627\u06cc \u0632\u06cc\u0628\u0627 \u0628\u067e\u0631\u062f\u0627\u0632\u0645 \u0648 \u0645\u0637\u0627\u0644\u0628 \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0631 \u0627\u06cc\u0646 \u0632\u0645\u06cc\u0646\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u0622\u0645\u0648\u0632\u0634\u06cc \u0645\u0646\u062a\u0634\u0631 \u06a9\u0646\u0645 .<\/p>\n

\u067e\u0627\u0631\u0627\u0644\u0627\u06a9\u0633 (Parallax)\u00a0 \u062f\u0631 \u0644\u063a\u062a \u0628\u0647 \u0645\u0639\u0646\u0627\u06cc \u0627\u062e\u062a\u0644\u0627\u0641 \u0645\u0646\u0638\u0631 \u0627\u0633\u062a \u0648\u0644\u06cc \u062f\u0631 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0628\u0647 \u0645\u0639\u0646\u06cc \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc \u067e\u06cc\u0645\u0627\u06cc\u0634 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0628\u0631\u0627\u06cc \u0639\u0645\u0642 \u0628\u062e\u0634\u06cc \u0628\u0647 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0627\u0633\u062a.<\/p>\n

\u062f\u0631 \u0627\u0648\u0644\u06cc\u0646 \u067e\u0633\u062a\u06cc \u06a9\u0647 \u062f\u0631 \u0631\u0627\u0628\u0637\u0647 \u0628\u0627 \u0627\u06cc\u0646 \u0646\u0648\u0639 \u0637\u0631\u0627\u062d\u06cc \u0645\u0646\u062a\u0634\u0631 \u0645\u06cc\u06a9\u0646\u0645 , \u06cc\u06a9 \u0627\u0641\u06a9\u062a \u0632\u06cc\u0628\u0627 \u06a9\u0647 \u0641\u0642\u0637 \u0628\u0627 html5 \u0648 css3 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a \u0631\u0627 \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u06af\u0631\u0627\u0645\u06cc \u0622\u0645\u0627\u062f\u0647 \u0633\u0627\u062e\u062a\u0647 \u0627\u0645 .<\/p>\n

\u0627\u06cc\u0646 \u0627\u0641\u06a9\u062a \u0645\u06cc\u062a\u0648\u0627\u0646\u062f \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0634\u0645\u0627 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062f\u0627\u06cc\u0631\u0647 \u0647\u0627\u06cc \u0686\u0646\u062f \u0628\u0639\u062f\u06cc \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062f\u0647 \u06a9\u0647 \u0628\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627\u06cc \u0645\u0627\u0648\u0633 , \u062f\u0627\u06cc\u0631\u0647 \u0647\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0628\u0627\u06cc\u06cc \u062c\u0627\u0628\u062c\u0627 \u0645\u06cc\u0634\u0648\u0646\u062f .<\/p>\n

<\/p>\n

$\"\u0627\u0641\u06a9\u062a$ <\/a><\/p>\n

\u0648 \u0627\u0645\u0627 \u0622\u0645\u0648\u0632\u0634 :<\/p>\n

\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u06a9\u0627\u0641\u06cc\u0633\u062a \u06a9\u062f \u0647\u0627\u06cc html \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a body \u0648\u0628 \u0633\u0627\u06cc\u062a \u062e\u0648\u062f \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0647 :<\/p>\n

<div class=\"vms\">\r\n\t<div class=\"pos-detect-top-1\"><\/div>\r\n\t<div class=\"pos-detect-top-2\"><\/div>\r\n\t<div class=\"pos-detect-top-3\"><\/div>\r\n\t<div class=\"pos-detect-top-4\"><\/div>\r\n\t<div class=\"pos-detect-top-5\"><\/div>\r\n\t<div class=\"pos-detect-top-6\"><\/div>\r\n\t<div class=\"pos-detect-top-7\"><\/div>\r\n\t<div class=\"pos-detect-top-8\"><\/div>\r\n\t<div class=\"pos-detect-top-9\"><\/div>\r\n\t<div class=\"pos-detect-top-10\"><\/div>\r\n\t<div class=\"pos-detect-top-11\"><\/div>\r\n\t<div class=\"pos-detect-top-12\"><\/div>\r\n\t\r\n\t<div class=\"pos-detect-center-1\"><\/div>\r\n\t<div class=\"pos-detect-center-2\"><\/div>\r\n\t<div class=\"pos-detect-center-3\"><\/div>\r\n\t<div class=\"pos-detect-center-4\"><\/div>\r\n\t<div class=\"pos-detect-center-5\"><\/div>\r\n\t<div class=\"pos-detect-center-6\"><\/div>\r\n\t<div class=\"pos-detect-center-7\"><\/div>\r\n\t<div class=\"pos-detect-center-8\"><\/div>\r\n\t<div class=\"pos-detect-center-9\"><\/div>\r\n\t<div class=\"pos-detect-center-10\"><\/div>\r\n\t<div class=\"pos-detect-center-11\"><\/div>\r\n\t<div class=\"pos-detect-center-12\"><\/div>\r\n\t\r\n\t<div class=\"pos-detect-bottom-1\"><\/div>\r\n\t<div class=\"pos-detect-bottom-2\"><\/div>\r\n\t<div class=\"pos-detect-bottom-3\"><\/div>\r\n\t<div class=\"pos-detect-bottom-4\"><\/div>\r\n\t<div class=\"pos-detect-bottom-5\"><\/div>\r\n\t<div class=\"pos-detect-bottom-6\"><\/div>\r\n\t<div class=\"pos-detect-bottom-7\"><\/div>\r\n\t<div class=\"pos-detect-bottom-8\"><\/div>\r\n\t<div class=\"pos-detect-bottom-9\"><\/div>\r\n\t<div class=\"pos-detect-bottom-10\"><\/div>\r\n\t<div class=\"pos-detect-bottom-11\"><\/div>\r\n\t<div class=\"pos-detect-bottom-12\"><\/div>\r\n    \r\n\t<div class=\"background-layer\">\r\n    \t<div class=\"bubble-1\"><\/div>\r\n    \t<div class=\"bubble-2\"><\/div>\r\n    \t<div class=\"bubble-3\"><\/div>\r\n    \t<div class=\"bubble-4\"><\/div>\r\n    \t<div class=\"bubble-5\"><\/div>\r\n    \t<div class=\"bubble-6\"><\/div>\r\n    \t<div class=\"bubble-7\"><\/div>\r\n    \t<div class=\"bubble-8\"><\/div>\r\n    \t<div class=\"bubble-9\"><\/div>\r\n    \t<div class=\"bubble-10\"><\/div>\r\n    \t<div class=\"bubble-11\"><\/div>\r\n    \t<div class=\"bubble-12\"><\/div>\r\n\t<\/div>\r\n\r\n\t<div class=\"middleground-layer\">\r\n\t\t<div class=\"bubble-1\"><\/div>\r\n\t\t<div class=\"bubble-2\"><\/div>\r\n\t\t<div class=\"bubble-3\"><\/div>\r\n\t\t<div class=\"bubble-4\"><\/div>\r\n\t\t<div class=\"bubble-5\"><\/div>\r\n\t\t<div class=\"bubble-6\"><\/div>\r\n\t\t<div class=\"bubble-7\"><\/div>\r\n\t\t<div class=\"bubble-8\"><\/div>\r\n\t\t<div class=\"bubble-9\"><\/div>\r\n\t\t<div class=\"bubble-10\"><\/div>\r\n\t\t<div class=\"bubble-11\"><\/div>\r\n\t\t<div class=\"bubble-12\"><\/div>\r\n\t<\/div>\r\n\r\n\t<div class=\"foreground-layer\">\r\n\t\t<div class=\"bubble-1\"><\/div>\r\n\t\t<div class=\"bubble-2\"><\/div>\r\n\t\t<div class=\"bubble-3\"><\/div>\r\n\t\t<div class=\"bubble-4\"><\/div>\r\n\t\t<div class=\"bubble-5\"><\/div>\r\n\t\t<div class=\"bubble-6\"><\/div>\r\n\t\t<div class=\"bubble-7\"><\/div>\r\n\t\t<div class=\"bubble-8\"><\/div>\r\n\t\t<div class=\"bubble-9\"><\/div>\r\n\t\t<div class=\"bubble-10\"><\/div>\r\n\t\t<div class=\"bubble-11\"><\/div>\r\n\t\t<div class=\"bubble-12\"><\/div>\r\n\t<\/div>\r\n<\/div><\/pre>\n\u0648 \u0633\u067e\u0633 \u06a9\u062f \u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 css \u0648\u0628 \u0633\u0627\u06cc\u062a \u062e\u0648\u062f \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f :<\/p>\nbody {\r\n  z-index: 0;\r\n  width: 100vw;\r\n  height: 100vh;\r\n  background: #007AFF;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow: hidden;\r\n}\r\n.vms {\r\n  animation: vms 3s linear;\r\n  position: fixed;\r\n}\r\n\r\ndiv[class^='pos-detect'] {\r\n  width: calc(100vw\/6);\r\n  height: calc(101vh\/6);\r\n  float: left;\r\n}\r\n\r\ndiv[class $='ground-layer'] {\r\n  position: absolute;\r\n  width: 100vw;\r\n  height: 100vh;\r\n  pointer-events: none;\r\n  top: 50vh;\r\n  left: 50vw;\r\n  margin-top: -50vh;\r\n  margin-left: -50vw;\r\n  transition-property: all;\r\n  transition-timing-function: cubic-bezier(0.23,1,0.32,1);\r\n} \r\ndiv[class ^='bubble-'] {\r\n  position: absolute;\r\n  width: 15vw;\r\n  height: 15vw;\r\n  border-radius: 100%;\r\n  background: #fff;\r\n}\r\n\r\ndiv[class ^='bubble-']:nth-child(even) {\r\n  width: 10vw;\r\n  height: 10vw;\r\n}\r\n\r\n.background-layer {\r\n  z-index: 1;\r\n  transition-duration: 30s;\r\n  opacity: 0.1;\r\n}\r\n  .background-layer .bubble-1 {\r\n    margin-top: 16vh;\r\n    margin-left: 6vw;\r\n  }\r\n  .background-layer .bubble-2 {\r\n    margin-top: 8vh;\r\n    margin-left: 35vw;\r\n  }\r\n  .background-layer .bubble-3 {\r\n    margin-top: 31vh;\r\n    margin-left: 73vw;\r\n  }\r\n  .background-layer .bubble-4 {\r\n    margin-top: 57vh;\r\n    margin-left: 20vw;\r\n  }\r\n  .background-layer .bubble-5 {\r\n    margin-top: 69vh;\r\n    margin-left: 62vw;\r\n  }\r\n  .background-layer .bubble-6 {\r\n    margin-top: 9vh;\r\n    margin-left: 78vw;\r\n  }\r\n  .background-layer .bubble-7 {\r\n    margin-top: 23vh;\r\n    margin-left: 44vw;\r\n  }\r\n  .background-layer .bubble-8 {\r\n    margin-top: 55vh;\r\n    margin-left: 47vw;\r\n  }\r\n  .background-layer .bubble-9 {\r\n    margin-top: 75vh;\r\n    margin-left: 8vw;\r\n  }\r\n  .background-layer .bubble-10 {\r\n    margin-top: 89vh;\r\n    margin-left: 78vw;\r\n  }\r\n  .background-layer .bubble-11 {\r\n    margin-top: 89vh;\r\n    margin-left: 30vw;\r\n  }\r\n  .background-layer .bubble-12 {\r\n    margin-top: 63vh;\r\n    margin-left: 91vw;\r\n  }\r\n\r\n\r\n.middleground-layer {\r\n  z-index: 2;\r\n  transition-duration: 20s;  \r\n  opacity: 0.3;\r\n}\r\n  .middleground-layer .bubble-1 {\r\n    margin-top: -2vh;\r\n    margin-left: 10vw;\r\n  }\r\n  .middleground-layer .bubble-2 {\r\n    margin-top: 27vh;\r\n    margin-left: 24vw;\r\n  }\r\n  .middleground-layer .bubble-3 {\r\n    margin-top: 9vh;\r\n    margin-left: 60vw;\r\n  }\r\n  .middleground-layer .bubble-4 {\r\n    margin-top: 45vh;\r\n    margin-left: 38vw;\r\n  }\r\n  .middleground-layer .bubble-5 {\r\n    margin-top: 54vh;\r\n    margin-left: 78vw;\r\n  }\r\n  .middleground-layer .bubble-6 {\r\n    margin-top: 79vh;\r\n    margin-left: 72vw;\r\n  }\r\n  .middleground-layer .bubble-7 {\r\n    margin-top: 19vh;\r\n    margin-left: 78vw;\r\n  }\r\n  .middleground-layer .bubble-8 {\r\n    margin-top: 45vh;\r\n    margin-left: 68vw;\r\n  }\r\n  .middleground-layer .bubble-9 {\r\n    margin-top: 68vh;\r\n    margin-left: 43vw;\r\n  }\r\n  .middleground-layer .bubble-10 {\r\n    margin-top: 40vh;\r\n    margin-left: 5vw;\r\n  }\r\n  .middleground-layer .bubble-11 {\r\n    margin-top: 65vh;\r\n    margin-left: 14vw;\r\n  }\r\n  .middleground-layer .bubble-12 {\r\n    margin-top: 25vh;\r\n    margin-left: 48vw;\r\n  }\r\n\r\n\r\n.foreground-layer {\r\n  z-index: 3;\r\n  transition-duration: 13s;\r\n  opacity: 0.5;\r\n}\r\n  .foreground-layer .bubble-1 {\r\n    margin-top: 69vh;\r\n    margin-left: -5vw;\r\n  }\r\n  .foreground-layer .bubble-2 {\r\n    margin-top: 26vh;\r\n    margin-left: 30vw;\r\n  }\r\n  .foreground-layer .bubble-3 {\r\n    margin-top: 14vh;\r\n    margin-left: 77vw;\r\n  }\r\n  .foreground-layer .bubble-4 {\r\n    margin-top: 85vh;\r\n    margin-left: 39vw;\r\n  }\r\n  .foreground-layer .bubble-5 {\r\n    margin-top: 67vh;\r\n    margin-left: 73vw;\r\n  }\r\n  .foreground-layer .bubble-6 {\r\n    margin-top: 4vh;\r\n    margin-left: 94vw;\r\n  }\r\n  .foreground-layer .bubble-7 {\r\n    margin-top: 5vh;\r\n    margin-left: 48vw;\r\n  }\r\n  .foreground-layer .bubble-8 {\r\n    margin-top: 35vh;\r\n    margin-left: 58vw;\r\n  }\r\n  .foreground-layer .bubble-9 {\r\n    margin-top: 25vh;\r\n    margin-left: 8vw;\r\n  }\r\n  .foreground-layer .bubble-10 {\r\n    margin-top: 54vh;\r\n    margin-left: 24vw;\r\n  }\r\n  .foreground-layer .bubble-11 {\r\n    margin-top: 41vh;\r\n    margin-left: 93vw;\r\n  }\r\n  .foreground-layer .bubble-12 {\r\n    margin-top: 55vh;\r\n    margin-left: 52vw;\r\n  }\r\n\r\n\r\n.pos-detect-top-1:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 11);\r\n  left: calc(100vw \/ 12 * 11);\r\n}\r\n.pos-detect-top-2:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 11);\r\n  left: calc(100vw \/ 12 * 9);\r\n}\r\n.pos-detect-top-3:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 11);\r\n  left: calc(100vw \/ 12 * 7);\r\n}\r\n.pos-detect-top-4:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 11);\r\n  left: calc(100vw \/ 12 * 5);\r\n}\r\n.pos-detect-top-5:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 11);\r\n  left: calc(100vw \/ 12 * 3);\r\n}\r\n.pos-detect-top-6:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 11);\r\n  left: calc(100vw \/ 12);\r\n}\r\n.pos-detect-top-7:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 9);\r\n  left: calc(100vw \/ 12 * 11);\r\n}\r\n.pos-detect-top-8:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 9);\r\n  left: calc(100vw \/ 12 * 9);\r\n}\r\n.pos-detect-top-9:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 9);\r\n  left: calc(100vw \/ 12 * 7);\r\n}\r\n.pos-detect-top-10:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 9);\r\n  left: calc(100vw \/ 12 * 5);\r\n}\r\n.pos-detect-top-11:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 9);\r\n  left: calc(100vw \/ 12 * 3);\r\n}\r\n.pos-detect-top-12:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 9);\r\n  left: calc(100vw \/ 12);\r\n}\r\n.pos-detect-center-1:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 7);\r\n  left: calc(100vw \/ 12 * 11);\r\n}\r\n.pos-detect-center-2:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 7);\r\n  left: calc(100vw \/ 12 * 9);\r\n}\r\n.pos-detect-center-3:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 7);\r\n  left: calc(100vw \/ 12 * 7);\r\n}\r\n.pos-detect-center-4:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 7);\r\n  left: calc(100vw \/ 12 * 5);\r\n}\r\n.pos-detect-center-5:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 7);\r\n  left: calc(100vw \/ 12 * 3);\r\n}\r\n.pos-detect-center-6:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 7);\r\n  left: calc(100vw \/ 12);\r\n}\r\n.pos-detect-center-7:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 5);\r\n  left: calc(100vw \/ 12 * 11);\r\n}\r\n.pos-detect-center-8:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 5);\r\n  left: calc(100vw \/ 12 * 9);\r\n}\r\n.pos-detect-center-9:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 5);\r\n  left: calc(100vw \/ 12 * 7);\r\n}\r\n.pos-detect-center-10:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 5);\r\n  left: calc(100vw \/ 12 * 5);\r\n}\r\n.pos-detect-center-11:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 5);\r\n  left: calc(100vw \/ 12 * 3);\r\n}\r\n.pos-detect-center-12:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 5);\r\n  left: calc(100vw \/ 12);\r\n}\r\n.pos-detect-bottom-1:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 3);\r\n  left: calc(100vw \/ 12 * 11);\r\n}\r\n.pos-detect-bottom-2:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 3);\r\n  left: calc(100vw \/ 12 * 9);\r\n}\r\n.pos-detect-bottom-3:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 3);\r\n  left: calc(100vw \/ 12 * 7);\r\n}\r\n.pos-detect-bottom-4:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 3);\r\n  left: calc(100vw \/ 12 * 5);\r\n}\r\n.pos-detect-bottom-5:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 3);\r\n  left: calc(100vw \/ 12 * 3);\r\n}\r\n.pos-detect-bottom-6:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12 * 3);\r\n  left: calc(100vw \/ 12);\r\n}\r\n.pos-detect-bottom-7:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12);\r\n  left: calc(100vw \/ 12 * 11);\r\n}\r\n.pos-detect-bottom-8:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12);\r\n  left: calc(100vw \/ 12 * 9);\r\n}\r\n.pos-detect-bottom-9:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12);\r\n  left: calc(100vw \/ 12 * 7);\r\n}\r\n.pos-detect-bottom-10:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12);\r\n  left: calc(100vw \/ 12 * 5);\r\n}\r\n.pos-detect-bottom-11:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12);\r\n  left: calc(100vw \/ 12 * 3);\r\n}\r\n.pos-detect-bottom-12:hover ~ div[class $='ground-layer'] {\r\n  top: calc(100vh \/ 12);\r\n  left: calc(100vw \/ 12);\r\n}\r\n@-webkit-keyframes vms {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}\r\n@-moz-keyframes vms {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}\r\n@keyframes vms {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}<\/pre>\n\u062f\u0645\u0648\u06cc \u0627\u0641\u06a9\u062a<\/a><\/span><\/p>\n
\u062f\u0627\u0646\u0644\u0648\u062f \u0641\u0627\u06cc\u0644 \u0622\u0645\u0627\u062f\u0647 \u0627\u0641\u06a9\u062a \u067e\u0627\u0631\u0627\u0644\u0627\u06a9\u0633 \u062d\u0628\u0627\u0628 \u0628\u0631\u0627\u06cc \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0648\u0628 \u0633\u0627\u06cc\u062a ( html5 , css3 )<\/a><\/strong><\/span><\/p>\n
\u067e\u062e\u0634 \u0627\u062e\u062a\u0635\u0627\u0635\u06cc<\/p>\n
\u0622\u0645\u0648\u0632\u0634 : \u0648\u062d\u06cc\u062f \u0645\u062c\u06cc\u062f\u06cc<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"
\u0637\u0628\u0642 \u0627\u06cc\u0645\u06cc\u0644 \u0647\u0627\u06cc \u0641\u0631\u0627\u0648\u0627\u0646\u06cc \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0645\u0639\u0631\u0641\u06cc \u0627\u0641\u06a9\u062a \u0647\u0627\u06cc \u067e\u0627\u0631\u0627\u0644\u0627\u06a9\u0633 \u062f\u0631 \u0648\u0628 \u0633\u0627\u06cc\u062a \u062f\u0627\u0634\u062a\u0645 , \u062a\u0635\u0645\u06cc\u0645 \u06af\u0631\u0641\u062a\u0645 \u0627\u0632 \u0627\u06cc\u0646 \u0628\u0647 \u0628\u0639\u062f \u0628\u06cc\u0634\u062a\u0631 \u0628\u0647 \u0627\u06cc\u0646 \u0646\u0648\u0639 \u0627\u0641\u06a9\u062a \u0647\u0627\u06cc \u0632\u06cc\u0628\u0627 \u0628\u067e\u0631\u062f\u0627\u0632\u0645 \u0648 \u0645\u0637\u0627\u0644\u0628 \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0631 \u0627\u06cc\u0646 \u0632\u0645\u06cc\u0646\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u0622\u0645\u0648\u0632\u0634\u06cc \u0645\u0646\u062a\u0634\u0631 \u06a9\u0646\u0645 . \u067e\u0627\u0631\u0627\u0644\u0627\u06a9\u0633 (Parallax)\u00a0 \u062f\u0631 \u0644\u063a\u062a \u0628\u0647 \u0645\u0639\u0646\u0627\u06cc \u0627\u062e\u062a\u0644\u0627\u0641 \u0645\u0646\u0638\u0631 \u0627\u0633\u062a \u0648\u0644\u06cc \u062f\u0631 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0628\u0647 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[565,1629,16],"tags":[17781,17780,17784,17779,17778,17783,17782],"_links":{"self":[{"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/posts\/16594"}],"collection":[{"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/comments?post=16594"}],"version-history":[{"count":0,"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/posts\/16594\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/media?parent=16594"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/categories?post=16594"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/tags?post=16594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}