{"id":165,"date":"2023-01-27T21:05:58","date_gmt":"2023-01-27T12:05:58","guid":{"rendered":"https:\/\/phantom-cgray03.xyz\/?p=165"},"modified":"2023-02-07T17:56:34","modified_gmt":"2023-02-07T08:56:34","slug":"165","status":"publish","type":"post","link":"https:\/\/phantom-cgray03.xyz\/?p=165","title":{"rendered":"\u3010\u88c5\u98fe\u3011\u30b9\u30af\u30ed\u30fc\u30eb\u3067\u7d19\u5439\u96ea"},"content":{"rendered":"

<\/p>\n

\n
\u00a0<\/div>\n<\/div>\n
\u00a0<\/div>\n

\u4e0b\u8a18Beyond\u30b3\u30fc\u30c9<\/p>\n

JS head<\/p>\n

<!--\u4e0b\u8a18\u306escript\u3092\u30bf\u30b0\u8a2d\u5b9a\u306ehead\u306b\u30ab\u30c3\u30c8\uff06\u30da\u30fc\u30b9\u30c8\u3057\u3066\u304f\u3060\u3055\u3044-->\r\n<script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\" integrity=\"sha256-\/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej\/m4=\" crossorigin=\"anonymous\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.4.0\/dist\/confetti.browser.min.js\"><\/script>\r\n<script>\r\n    var sbconfetti_explosion = sbconfetti_explosion || {};\r\n    (function(_) {\r\n        \/* \u5bfe\u8c61\u306eclass *\/\r\n        const target = \".js-scroll-point\";\r\n\r\n        _.init = function() {\r\n            const confettiAnime = function() {\r\n                confetti({\r\n                    particleCount: 100,\r\n                    spread: 70,\r\n                    origin: {\r\n                        x: 0,\r\n                        y: 0.7,\r\n                    },\r\n                });\r\n                confetti({\r\n                    particleCount: 100,\r\n                    spread: 70,\r\n                    origin: {\r\n                        x: 1,\r\n                        y: 0.7,\r\n                    },\r\n                });\r\n                confetti({\r\n                    particleCount: 100,\r\n                    spread: 70,\r\n                    origin: {\r\n                        x: 0.5,\r\n                        y: 0.7,\r\n                    },\r\n                });\r\n            };\r\n\r\n            \/\/\u4ea4\u5dee\u3057\u305f\u6642\u306b\u767a\u751f\u3059\u308b\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\r\n            const callback = (entries, observer) => {\r\n                entries.forEach((entry) => {\r\n                    if (entry.isIntersecting) {\r\n                        confettiAnime();\r\n                        observer.unobserve(entry.target);\r\n                    }\r\n                });\r\n            };\r\n\r\n            const observer = new IntersectionObserver(callback);\r\n\r\n            \/\/\u76e3\u8996\u3059\u308b\u8981\u7d20\u306e\u914d\u5217\u3092\u53d6\u5f97\r\n            const observers = [...document.querySelectorAll(\".js-scroll-point\")];\r\n\r\n            \/\/\u914d\u5217\u306b\u6307\u5b9a\u3057\u305f\u8981\u7d20\u3092IntersectionObserver\u3067\u76e3\u8996\r\n            observers.forEach((el) => {\r\n                observer.observe(el);\r\n            });\r\n        };\r\n    })(sbconfetti_explosion);\r\n<\/script>\r\n<\/code><\/pre>\n
HTML<\/p>\n
<!--   \u7d19\u5439\u96ea\u304c\u73fe\u308c\u308b\u4f4d\u7f6e\u306e\u8981\u7d20\u306b\u3001\u30af\u30e9\u30b9js-scroll-point\u3092\u3064\u3051\u3066\u304f\u3060\u3055\u3044 -->\r\n<div class=\"confetti_explosion\">\r\n\r\n    <div class=\"js-scroll-point\"><\/div>\r\n\r\n<\/div>\r\n<div><\/div><\/code><\/pre>\n
CSS<\/p>\n
 .confetti_explosion {\r\n  \/* \u6a2a\u5e45 *\/\r\n  max-width: 700px;\r\n  \/* \u6587\u5b57\u30b5\u30a4\u30ba *\/\r\n  font-size: 24px;\r\n  \/* \u5916\u5074\u306e\u4f59\u767d|\u4e0a|\u5de6\u53f3auto=\u4e2d\u592e|\u4e0b| *\/\r\n  margin: 0 auto 20px;\r\n  width: 100%;\r\n  padding: 2px;\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u00a0 \u00a0 \u4e0b\u8a18Beyond\u30b3\u30fc\u30c9 JS head lt;!–\u4e0b\u8a18\u306escript\u3092\u30bf\u30b0\u8a2d\u5b9a\u306ehead\u306b\u30ab\u30c3\u30c8\uff06\u30da\u30fc\u30b9\u30c8\u3057\u3066\u304f\u3060\u3055\u3044–gt; lt;script src=”https:\/\/code.jquery.co<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[4,10],"class_list":["post-165","post","type-post","status-publish","format-standard","hentry","category-9","tag-simplicity02","tag-10"],"_links":{"self":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=165"}],"version-history":[{"count":4,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/165\/revisions"}],"predecessor-version":[{"id":224,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/165\/revisions\/224"}],"wp:attachment":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}