{"id":1781,"date":"2022-02-28T01:06:10","date_gmt":"2022-02-27T16:06:10","guid":{"rendered":"https:\/\/www.dogrow.net\/hp\/?p=1781"},"modified":"2022-03-09T22:41:00","modified_gmt":"2022-03-09T13:41:00","slug":"blog114","status":"publish","type":"post","link":"https:\/\/www.dogrow.net\/hp\/blog114\/","title":{"rendered":"(114) CSS\u306e translate\u3067\u8981\u7d20\u3092\u52d5\u304b\u3059\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u3067\u304d\u308b\u3002"},"content":{"rendered":"<h1 class=\"my_h\">1. \u3084\u308a\u305f\u3044\u3053\u3068<\/h1>\n<p>CSS\u3067\u8272\u3005\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u3063\u305f\u304c <span class=\"my_fc_blueB\">@keyframes<\/span> \u3067\u6642\u9593\u7d4c\u904e\u306b\u5fdc\u3058\u3066\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u5909\u5316\u3055\u305b\u308b\u3082\u306e\u3070\u304b\u308a\u3060\u3063\u305f\u3002<\/p>\n<p>\u3067\u3082&#8230;<br \/>\n@keyframes \u3092\u4f7f\u308f\u306a\u304f\u3066\u3082\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3055\u305b\u3089\u308c\u308b\u3002<\/p>\n<p>\u4eca\u56de\u306f\u3001\u7c21\u5358\u306a\u30b3\u30fc\u30c9\u3067<br \/>\n<span class=\"my_fc_deeppinkBBig\">\u30de\u30a6\u30b9\u306b\u8ffd\u5f93\u3059\u308b\u30dc\u30fc\u30eb<\/span><br \/>\n\u3092\u4f5c\u3063\u3066\u307f\u305f\u3044\u3002<\/p>\n<h1 class=\"my_h\">2. \u3084\u3063\u3066\u307f\u308b<\/h1>\n<p>\u3068\u3063\u3066\u3082\u7c21\u5358\u3060\u3063\u305f\u3002<br \/>\n\u305f\u3063\u305f\u306e\u3053\u308c\u3060\u3051\u3060\u3002<\/p>\n<p><b>index.html<\/b><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; \/&gt;\r\n    &lt;script src=&quot;script.js&quot;&gt;&lt;\/script&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;span id=&quot;anim&quot;&gt;\u25cf&lt;\/span&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><b>style.css<\/b><\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n#anim{\r\n  position: absolute;\r\n  transition: transform 1s;     \/* 1\u79d2\u9593\u304b\u3051\u3066\u5b9f\u884c\u3055\u305b\u308b *\/\r\n}\r\n<\/pre>\n<p><b>script.js<\/b><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nwindow.onload = function() {\r\n  const elem = document.getElementById('anim');\r\n  \/\/ \u30de\u30a6\u30b9\u79fb\u52d5\u30a4\u30d9\u30f3\u30c8\u3092\u6355\u6349\r\n  document.addEventListener('mousemove', function(e){\r\n    \/\/ \u300c\u30dc\u30fc\u30eb\u306e\u8868\u793a\u5ea7\u6a19 = \u30de\u30a6\u30b9\u306e\u8868\u793a\u5ea7\u6a19\u300d\u3068\u3059\u308b\u3002\r\n    elem.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;\r\n    \/\/ \u203b\u3053\u306e\u3068\u304d\u3001\u30dc\u30fc\u30eb\u306b\u306f\u300c1\u79d2\u9593\u304b\u3051\u3066\u5b9f\u884c\u3055\u305b\u308b\u300d\u6307\u5b9a\u3092\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u3086\u3063\u304f\u308a\u3068\u52d5\u304f\u3002\r\n  });\r\n}\r\n<\/pre>\n<p>6\u884c\u76ee\u306e\u6587\u5b57\u5217\u306e\u4f5c\u308a\u65b9\u306f <span class=\"my_fc_deeppinkB\">\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u30ea\u30c6\u30e9\u30eb<\/span> \u306a\u308b\u3082\u306e\u3002\u3044\u3061\u3044\u3061\u6587\u5b57\u5217\u3092 <span class=\"my_fc_crimsonBBig\">+<\/span> \u3067\u9023\u7d50\u3057\u306a\u304f\u3066\u3082\u3088\u3044\u306e\u3067\u697d\u3061\u3093\u3060\u3002<br \/>\n\u904e\u53bb\u8a18\u4e8b <a href=\"https:\/\/www.dogrow.net\/hp\/blog106\/\" target=\"_blank\" rel=\"noopener\">(106) JavaScript\u3067\u8907\u6570\u884c\u6587\u5b57\u5217\u3092\u66f8\u304f\u3002<\/a> \u3067\u3054\u7d39\u4ecb\u3057\u3066\u3044\u308b\u3002<\/p>\n<p>\u5b9f\u969b\u306b\u52d5\u3044\u3066\u3044\u308b\u69d8\u5b50\u3092\u4ee5\u4e0b\u306e\u30da\u30fc\u30b8\u3067\u78ba\u8a8d\u3067\u304d\u308b\u3002<br \/>\n<a href=\"https:\/\/www.dogrow.net\/hp\/sample\/00114\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.dogrow.net\/hp\/sample\/00114\/<br \/>\n<img decoding=\"async\" src=\"https:\/\/www.dogrow.net\/hp\/wp-content\/uploads\/2022\/02\/i001-1.gif\" alt=\"\" class=\"my_add_bs1\" \/><\/a><\/p>\n<p>script.js\u306e\u30b3\u30e1\u30f3\u30c8\u306b\u66f8\u3044\u3066\u3042\u308b\u901a\u308a\u3001JavaScript\u3067\u306f<br \/>\n1) \u30de\u30a6\u30b9\u79fb\u52d5\u30a4\u30d9\u30f3\u30c8\u3092\u6355\u6349<br \/>\n2) \u30dc\u30fc\u30eb\u306e\u5ea7\u6a19\u3068\u3057\u3066\u30de\u30a6\u30b9\u306e\u5ea7\u6a19\u3092\u8a2d\u5b9a<br \/>\n\u3060\u3051\u3092\u3057\u3066\u3044\u308b\u3002<\/p>\n<p>\u3059\u308b\u3068&#8230;<br \/>\nstyle.css\u3067\u306f\u30dc\u30fc\u30eb\u306b\u5bfe\u3057\u3066<br \/>\n<span class=\"my_fc_deeppinkBBig\">transition\u8a2d\u5b9a\u3055\u308c\u305f\u3089 1\u79d2\u9593\u304b\u3051\u3066\u5b9f\u884c\u305b\u3088<\/span><br \/>\n\u3068\u547d\u3058\u3066\u3042\u308b\u306e\u3067\u3001\u30de\u30a6\u30b9\u3092\u8ffd\u3063\u3066\u3086\u3063\u304f\u308a\u3068\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3059\u308b\u3002<br \/>\n\u3053\u308c\u304c\u4eca\u56de\u306e\u809d\u304b\u3082\u3057\u308c\u306a\u3044\u3002<\/p>\n<hr class=\"my_hr_bottom\">\n","protected":false},"excerpt":{"rendered":"<p>1. \u3084\u308a\u305f\u3044\u3053\u3068 CSS\u3067\u8272\u3005\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u3063\u305f\u304c @keyframes \u3067\u6642\u9593\u7d4c\u904e\u306b\u5fdc\u3058\u3066\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u5909\u5316\u3055\u305b\u308b\u3082\u306e\u3070\u304b\u308a\u3060\u3063\u305f\u3002 \u3067\u3082&#8230; @keyframes \u3092\u4f7f\u308f\u306a\u304f\u3066\u3082\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3055\u305b\u3089\u308c\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.dogrow.net\/hp\/blog114\/\">\u7d9a\u304d\u3092\u8aad\u3080 &raquo;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38],"tags":[],"class_list":["post-1781","post","type-post","status-publish","format-standard","hentry","category-css"],"views":964,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/1781","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/comments?post=1781"}],"version-history":[{"count":19,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/1781\/revisions"}],"predecessor-version":[{"id":1926,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/1781\/revisions\/1926"}],"wp:attachment":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/media?parent=1781"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/categories?post=1781"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/tags?post=1781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}