{"id":6457,"date":"2024-09-07T11:03:27","date_gmt":"2024-09-07T02:03:27","guid":{"rendered":"https:\/\/taitan916.info\/blog\/?p=6457"},"modified":"2024-06-05T17:06:25","modified_gmt":"2024-06-05T08:06:25","slug":"post-6457","status":"publish","type":"post","link":"https:\/\/taitan916.info\/blog\/archives\/6457","title":{"rendered":"\u753b\u50cf\u306b\u30de\u30a6\u30b9\u3092\u5408\u308f\u305b\u308b\u3068\u62e1\u5927\u8868\u793a\u3055\u305b\u308b\u300cdrift\u300d\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u5229\u7528\u65b9\u6cd5"},"content":{"rendered":"

amazon\u7b49EC\u30b5\u30a4\u30c8\u3067\u5546\u54c1\u753b\u50cf\u306b\u30de\u30a6\u30b9\u3092\u5408\u308f\u305b\u308b\u3068\u5f53\u8a72\u90e8\u5206\u304c\u62e1\u5927\u8868\u793a\u3055\u308c\u308b\u3068\u3044\u3046\u6a5f\u80fd\u3092\u3088\u304f\u898b\u304b\u3051\u308b\u3002\u3053\u308c\u3092\u5b9f\u88c5\u3057\u305f\u3044\u3068\u8981\u671b\u3092\u53d7\u3051\u305f\u305f\u3081\u3001\u5b9f\u88c5\u65b9\u6cd5\u3092\u8abf\u3079\u305f\u3068\u3053\u308d\u300cdrift\u300d\u3068\u3044\u3046JavaScript\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u5bfe\u5fdc\u3067\u304d\u305d\u3046\u3002\u4ee5\u4e0b\u306b\u30b5\u30f3\u30d7\u30eb\u3068\u5b9f\u88c5\u65b9\u6cd5\u3092\u30e1\u30e2\u3002<\/p>\n

 <\/p>\n

\u30b5\u30f3\u30d7\u30eb<\/h2>\n

https:\/\/taitan916.info\/sample\/drift\/<\/a><\/p>\n

\u5de6\u5074\u306e\u753b\u50cf\u306b\u30de\u30a6\u30b9\u3092\u5408\u308f\u305b\u308b\u3068\u62e1\u5927\u753b\u50cf\u304c\u53f3\u5074\u306b\u8868\u793a\u3055\u308c\u308b\u7b48\u3002<\/p>\n

 <\/p>\n

drift<\/h2>\n

GitHub<\/h3>\n

https:\/\/github.com\/strawdynamics\/drift<\/a><\/p>\n

CDN<\/h3>\n

CDN\u3067\u4f7f\u3046\u5834\u5408\u306f\u4ee5\u4e0b\u3092\u8a18\u8ff0\u3059\u308b\u3002<\/p>\n

<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/drift-zoom\/1.5.1\/Drift.min.js\"><\/script>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/drift-zoom\/1.5.1\/drift-basic.min.css\"><\/pre>\n
\u7570\u306a\u308b\u30d0\u30fc\u30b8\u30e7\u30f3\u3092\u5229\u7528\u3057\u305f\u3044\u5834\u5408\u306f\u4ee5\u4e0b\u304b\u3089\u63a2\u3059\u3002<\/p>\n
https:\/\/cdnjs.com\/libraries\/drift-zoom\/1.5.1<\/a><\/p>\n
 <\/p>\n
\u5229\u7528\u65b9\u6cd5<\/h2>\n
\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/h3>\n
<style>\r\n.contents{\r\n    display: flex;\r\n}\r\n.zoom-image{\r\n    display: block;\r\n    width: 300px;\r\n    margin: 0 auto;\r\n}\r\n.zoom-image-area{\r\n    width: 40%;\r\n}\r\n.zoom-detail-area{\r\n    height: 500px;\r\n    width: 60%;\r\n    position: relative;\r\n    width: 65%;\r\n}\r\n<\/style>\r\n\r\n<div class=\"contents\">\r\n    <div class=\"zoom-image-area\">\r\n        <img src=\"test.webp?w=400\" data-zoom=\"test.webp?w=1200\" class=\"zoom-image\">\r\n    <\/div>\r\n    <div class=\"zoom-detail-area\">\r\n        \u5546\u54c1\u60c5\u5831<br>\r\n        \u5546\u54c1\u60c5\u5831<br>\r\n        \u5546\u54c1\u60c5\u5831<br>\r\n        \u5546\u54c1\u60c5\u5831<br>\r\n        \u5546\u54c1\u60c5\u5831<br>\r\n        \u5546\u54c1\u60c5\u5831<br>\r\n        \u5546\u54c1\u60c5\u5831<br>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/drift-zoom\/1.5.1\/Drift.min.js\"><\/script>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/drift-zoom\/1.5.1\/drift-basic.min.css\">\r\n<script>\r\nnew Drift(document.querySelector(`.zoom-image`), {\r\n    paneContainer: document.querySelector('.zoom-detail-area'),\r\n    zoomFactor: 4,\r\n});\r\n<\/script><\/pre>\n
 <\/p>\n
\u6240\u611f<\/h2>\n
\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u5229\u7528\u81ea\u4f53\u306f\u554f\u984c\u7121\u3044\u304cCSS\u3092\u8272\u3005\u6307\u5b9a\u3057\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u306e\u304c\u30cd\u30c3\u30af\u304b\u3082\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
amazon\u7b49EC\u30b5\u30a4\u30c8\u3067\u5546\u54c1\u753b\u50cf\u306b\u30de\u30a6\u30b9\u3092\u5408\u308f\u305b\u308b\u3068\u5f53\u8a72\u90e8\u5206\u304c\u62e1\u5927\u8868\u793a\u3055\u308c\u308b\u3068 ... <\/p>\n","protected":false},"author":1,"featured_media":1067,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4],"tags":[91,100],"class_list":["post-6457","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-image","tag-library"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts\/6457","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/comments?post=6457"}],"version-history":[{"count":1,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts\/6457\/revisions"}],"predecessor-version":[{"id":6458,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts\/6457\/revisions\/6458"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/media\/1067"}],"wp:attachment":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/media?parent=6457"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/categories?post=6457"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/tags?post=6457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}