{"id":5859,"date":"2024-06-23T11:43:46","date_gmt":"2024-06-23T02:43:46","guid":{"rendered":"https:\/\/taitan916.info\/blog\/?p=5859"},"modified":"2024-04-17T15:51:32","modified_gmt":"2024-04-17T06:51:32","slug":"post-5859","status":"publish","type":"post","link":"https:\/\/taitan916.info\/blog\/archives\/5859","title":{"rendered":"jQuery\u3068CSS\u3067\u6307\u5b9a\u3057\u305f\u30c6\u30ad\u30b9\u30c8\u306b\u5bfe\u3057\u3066\u30e9\u30a4\u30f3\u30de\u30fc\u30ab\u30fc\u3092\u5f15\u304f\u65b9\u6cd5"},"content":{"rendered":"

\u30b5\u30a4\u30c8\u5185\u3067\u5f37\u8abf\u3057\u305f\u3044\u30c6\u30ad\u30b9\u30c8\u306b\u5bfe\u3057\u3066\u86cd\u5149\u30da\u30f3\u3067\u30de\u30fc\u30ab\u30fc\u3092\u5f15\u304f\u3088\u3046\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u88c5\u3057\u3066\u3044\u308b\u30b5\u30a4\u30c8\u3092\u898b\u304b\u3051\u308b\u3053\u3068\u304c\u3042\u308b\u3002\u307e\u305f\u3001\u30da\u30fc\u30b8\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u5f53\u8a72\u30c6\u30ad\u30b9\u30c8\u90e8\u5206\u304c\u8868\u793a\u3055\u308c\u305f\u6642\u70b9\u3067\u30de\u30fc\u30ab\u30fc\u304c\u5f15\u304b\u308c\u308b\u3068\u3044\u3046\u4ed5\u69d8\u3002\u8abf\u3079\u3066\u307f\u305f\u3068\u3053\u308djQuery\u3068CSS\u3067\u5b9f\u88c5\u3067\u304d\u305f\u3002\u4ee5\u4e0b\u306b\u5b9f\u88c5\u65b9\u6cd5\u3092\u30e1\u30e2\u3002<\/p>\n

 <\/p>\n

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

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

 <\/p>\n

\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/h2>\n
<!DOCTYPE html>\r\n<html lang=\"ja\">\r\n<head>\r\n<title>jQuery\u3068CSS\u3067\u6307\u5b9a\u3057\u305f\u30c6\u30ad\u30b9\u30c8\u306b\u5bfe\u3057\u3066\u30e9\u30a4\u30f3\u30de\u30fc\u30ab\u30fc\u3092\u5f15\u304f\u30b5\u30f3\u30d7\u30eb<\/title>\r\n<style>\r\n.marker{\r\n    display: inline;\r\n    position: relative;\r\n    background-image: linear-gradient(90deg, #ff6, #ff6);\r\n    background-repeat: no-repeat;\r\n    background-position: bottom left;\r\n    background-size: 0 40%;\r\n    transition: all 1s ease-in-out;\r\n}\r\n.marker.active{\r\n    background-size: 100% 40%;\r\n}\r\n.mb-200{\r\n    margin-bottom:200px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <div class=\"mb-200\">\r\n        \u30c6\u30ad\u30b9\u30c8\r\n    <\/div>\r\n    <div class=\"mb-200\">\r\n        \u30c6\u30ad\u30b9\u30c8\r\n    <\/div>\r\n    <div class=\"mb-200\">\r\n        \u30c6\u30ad\u30b9\u30c8\r\n    <\/div>\r\n\r\n    <div class=\"mb-200\">\r\n        <span class=\"marker\">\r\n            \u30de\u30fc\u30ab\u30fc\u30c6\u30ad\u30b9\u30c8\u30de\u30fc\u30ab\u30fc\u30c6\u30ad\u30b9\u30c8\u30de\u30fc\u30ab\u30fc\u30c6\u30ad\u30b9\u30c8\u30de\u30fc\u30ab\u30fc\u30c6\u30ad\u30b9\u30c8\u30de\u30fc\u30ab\u30fc\u30c6\u30ad\u30b9\u30c8\u30de\u30fc\u30ab\u30fc\u30c6\u30ad\u30b9\u30c8\r\n        <\/span>\r\n    <\/div>\r\n\r\n    <div class=\"mb-200\">\r\n        \u30c6\u30ad\u30b9\u30c8\r\n    <\/div>\r\n\r\n    <div class=\"mb-200\">\r\n        <span class=\"marker\">\r\n            \u30de\u30fc\u30ab\u30fc\u30c6\u30ad\u30b9\u30c8\u30de\u30fc\u30ab\u30fc\u30c6\u30ad\u30b9\u30c8\u30de\u30fc\u30ab\u30fc\u30c6\u30ad\u30b9\u30c8\u30de\u30fc\u30ab\u30fc\u30c6\u30ad\u30b9\u30c8\u30de\u30fc\u30ab\u30fc\u30c6\u30ad\u30b9\u30c8\u30de\u30fc\u30ab\u30fc\u30c6\u30ad\u30b9\u30c8\r\n        <\/span>\r\n    <\/div>\r\n\r\n    <div class=\"mb-200\">\r\n        \u30c6\u30ad\u30b9\u30c8\r\n    <\/div>\r\n\r\n    <script type=\"text\/javascript\" src=\"https:\/\/code.jquery.com\/jquery-3.7.1.min.js\"><\/script>\r\n    <script>\r\n    $(window).scroll(function (){\r\n        $(`.marker`).each(function(){\r\n            if( $(window).scrollTop() > $(this).offset().top - $(window).height() ){\r\n                $(this).addClass(`active`);\r\n            }\r\n        });\r\n    });\r\n    <\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
\u30de\u30fc\u30ab\u30fc\u3092\u5f15\u304d\u305f\u3044\u30c6\u30ad\u30b9\u30c8\u3092.marker\u3067\u56f2\u3080\u3053\u3068\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u30b5\u30a4\u30c8\u5185\u3067\u5f37\u8abf\u3057\u305f\u3044\u30c6\u30ad\u30b9\u30c8\u306b\u5bfe\u3057\u3066\u86cd\u5149\u30da\u30f3\u3067\u30de\u30fc\u30ab\u30fc\u3092\u5f15\u304f\u3088\u3046\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 ... <\/p>\n","protected":false},"author":1,"featured_media":1070,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,4,10],"tags":[],"class_list":["post-5859","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","category-javascript","category-css"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t