{"id":122,"date":"2021-12-13T13:38:07","date_gmt":"2021-12-13T04:38:07","guid":{"rendered":"http:\/\/gaku-on.com\/?p=122"},"modified":"2021-12-13T13:41:29","modified_gmt":"2021-12-13T04:41:29","slug":"%e3%80%90jq%e3%80%91%e8%a6%81%e7%b4%a0%e3%81%8c%e7%94%bb%e9%9d%a2%e5%86%85%e3%81%ab%e5%85%a5%e3%81%a3%e3%81%9f%e3%82%89%e3%81%b5%e3%82%8f%e3%81%a3%e3%81%a8","status":"publish","type":"post","link":"http:\/\/gaku-on.com\/?p=122","title":{"rendered":"\u3010JQ\u3011\u8981\u7d20\u304c\u753b\u9762\u5185\u306b\u5165\u3063\u305f\u3089\u3075\u308f\u3063\u3068"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-imasashi-net wp-block-embed-imasashi-net\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"ytqLdU9WMV\"><a href=\"https:\/\/imasashi.net\/element-fadein.html\">\u6d77\u5916\u306e\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u3067\u3088\u304f\u307f\u308b\u300c\u8981\u7d20\u304c\u753b\u9762\u5185\u306b\u5165\u3063\u305f\u3089\u3075\u308f\u3063\u3068\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u3059\u308b\u3042\u308c\u300d\u306e\u5b9f\u88c5\u65b9\u6cd5<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;\u6d77\u5916\u306e\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u3067\u3088\u304f\u307f\u308b\u300c\u8981\u7d20\u304c\u753b\u9762\u5185\u306b\u5165\u3063\u305f\u3089\u3075\u308f\u3063\u3068\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u3059\u308b\u3042\u308c\u300d\u306e\u5b9f\u88c5\u65b9\u6cd5&#8221; &#8212; imasashi.net\" src=\"https:\/\/imasashi.net\/element-fadein.html\/embed#?secret=ytqLdU9WMV\" data-secret=\"ytqLdU9WMV\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>&lt;head&gt;\u5185\u306b\u4ee5\u4e0b\u3000Jquery\u3068script\u3092\u5165\u308c\u3066\u304a\u304f<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!--jQuery\u306eCDN--&gt;\n&lt;script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.min.js\"&gt;&lt;\/script&gt;\n \n&lt;!--\/\/Google\u306eCDN--&gt;\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"&gt;&lt;\/script&gt;\n \n&lt;!--\/\/Microsoft\u306eCDN--&gt;\n&lt;script src=\"https:\/\/ajax.aspnetcdn.com\/ajax\/jQuery\/jquery-3.5.0.min.js\"&gt;&lt;\/script&gt;\n\n&lt;script&gt;$(function(){\n\t$(window).scroll(function (){\n\t\t$('.fadein').each(function(){\n\t\t\tvar elemPos = $(this).offset().top;\n\t\t\tvar scroll = $(window).scrollTop();\n\t\t\tvar windowHeight = $(window).height();\n\t\t\tif (scroll &gt; elemPos - windowHeight + 200){\n\t\t\t\t$(this).addClass('scrollin');\n\t\t\t}\n\t\t});\n\t});\n});\t&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>\u4ee5\u4e0b\u306fHTML<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div&gt;\n\n\t&lt;section class=\"fadein\"&gt;\n\t\t&lt;h2&gt;\u60c5\u5831\u8a2d\u8a08&lt;\/h2&gt;\n\t\t&lt;p&gt;\u4f55\u304b\u3057\u3089\u306e\u8aac\u660e\u6587\u3002\u4f55\u304b\u3057\u3089\u306e\u8aac\u660e\u6587\u3002\u4f55\u304b\u3057\u3089\u306e\u8aac\u660e\u6587\u3002&lt;\/p&gt;\n\t&lt;\/section&gt;\n\n\t&lt;section class=\"fadein\"&gt;\n\t\t&lt;h2&gt;\u30b5\u30a4\u30c8\u30de\u30c3\u30d7&lt;\/h2&gt;\n\t\t&lt;p&gt;\u4f55\u304b\u3057\u3089\u306e\u8aac\u660e\u6587\u3002\u4f55\u304b\u3057\u3089\u306e\u8aac\u660e\u6587\u3002\u4f55\u304b\u3057\u3089\u306e\u8aac\u660e\u6587\u3002&lt;\/p&gt;\n\t&lt;\/section&gt;\n\n\t&lt;section class=\"fadein\"&gt;\n\t\t&lt;h2&gt;\u30ef\u30a4\u30e4\u30fc\u30d5\u30ec\u30fc\u30e0&lt;\/h2&gt;\n\t\t&lt;p&gt;\u4f55\u304b\u3057\u3089\u306e\u8aac\u660e\u6587\u3002\u4f55\u304b\u3057\u3089\u306e\u8aac\u660e\u6587\u3002\u4f55\u304b\u3057\u3089\u306e\u8aac\u660e\u6587\u3002&lt;\/p&gt;\n\t&lt;\/section&gt;\n\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>\u4ee5\u4e0b\u306fCSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* \u753b\u9762\u5916\u306b\u3044\u308b\u72b6\u614b *\/\n.fadein {\n\topacity : 0.1;\n\ttransform : translate(0, 50px);\n\ttransition : all 500ms;\n\t}\n\n\/* \u753b\u9762\u5185\u306b\u5165\u3063\u305f\u72b6\u614b *\/\n.fadein.scrollin {\n\topacity : 1;\n\ttransform : translate(0, 0);\n\t}<\/code><\/pre>\n\n\n\n<p>\u524d\u534a\u3067\u306f\u30c7\u30d5\u30a9\u30eb\u30c8 =&nbsp;<em>\u30a8\u30d5\u30a7\u30af\u30c8\u304c\u304b\u304b\u308b\u524d\u306e\u72b6\u614b<\/em>\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002fadein\u306eclass\u3060\u3051\u304c\u4ed8\u4e0e\u3055\u308c\u305f\u8981\u7d20\u306f\u300c\u900f\u660e\u5ea6\u304c0.1\u3067\u3001\u4e0b\u65b9\u306b50px\u79fb\u52d5\u3057\u3066\u3044\u308b\u300d\u72b6\u614b\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u672c\u6765\u8868\u793a\u3057\u305f\u3044\u4f4d\u7f6e\u3088\u308a50px\u4e0b\u3067\u3001\u3080\u3063\u3061\u3083\u534a\u900f\u660e\u306a\u72b6\u614b\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u5f8c\u534a\u3067\u306f<em>\u30a8\u30d5\u30a7\u30af\u30c8\u5f8c\u306e\u72b6\u614b = \u8aad\u307e\u305b\u305f\u3044\u72b6\u614b<\/em>\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002\u201dfadein\u201d \u3068 \u201cscrollin\u201d \u3068\u3044\u3046class\u304c\u30c0\u30d6\u30eb\u3067\u52a0\u308f\u308b\u3068\u300c\u900f\u660e\u5ea6\u304c1\u3067\u3001\u5143\u306e\u4f4d\u7f6e\u306b\u79fb\u52d5\u3057\u3066\u3044\u308b\u300d\u72b6\u614b\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3067\u30015\u884c\u76ee\u306b\u3044\u308btransition\u3067\u3001\u3053\u306e\u9593\u3092\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u7e4b\u3050\u3068\u3044\u3046\u3053\u3068\u3092\u3084\u3063\u3066\u3044\u307e\u3059\u3002\u3053\u3046\u3057\u3066\u304a\u304f\u3068\u3001\u300cscrollin\u3068\u3044\u3046class\u304c\u4ed8\u3044\u305f\u77ac\u9593\u306b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u59cb\u307e\u308b\u300d\u72b6\u614b\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&lt;head&gt;\u5185\u306b\u4ee5\u4e0b\u3000Jquery\u3068s&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-122","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/posts\/122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/gaku-on.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=122"}],"version-history":[{"count":3,"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/posts\/122\/revisions"}],"predecessor-version":[{"id":126,"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/posts\/122\/revisions\/126"}],"wp:attachment":[{"href":"http:\/\/gaku-on.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/gaku-on.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=122"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/gaku-on.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}