{"id":425,"date":"2026-01-27T09:08:25","date_gmt":"2026-01-27T09:08:25","guid":{"rendered":"https:\/\/notebook.raina.com.tw\/code\/?p=425"},"modified":"2026-01-29T08:02:54","modified_gmt":"2026-01-29T08:02:54","slug":"onscroll-animation","status":"publish","type":"post","link":"https:\/\/notebook.raina.com.tw\/code\/onscroll-animation\/","title":{"rendered":"\u3010\u81ea\u88fdJS\u5916\u639b\u3011Animation on scroll\u6372\u8ef8\u52d5\u756b\uff0c\u6372\u5230\u54ea\u88e1\u81ea\u52d5\u9032\u5834\u3001\u6ed1\u4e0a\u53bb\u81ea\u52d5\u9000\u5834\uff0c\u7528AI\u5ba2\u88fd\u5316JS\u5916\u639b"},"content":{"rendered":"\n<div class=\"wp-block-group has-palette-color-5-background-color has-background is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>\u6587\u7ae0\u76ee\u9304<\/p>\n\n\n\n<div class=\"wp-block-getwid-table-of-contents is-style-ordered\"><ol class=\"wp-block-getwid-table-of-contents__list\"><li><a href=\"#gec5de1e80dc0\">\u7db2\u9801\u8a2d\u8a08\u5e2b\u5207\u7248\u5957\u7528\u7db2\u7ad9JS\u4e92\u52d5\u7279\u6548<\/a><\/li><li><a href=\"#gaf43d9be52d5\">\u5f9e\u5c0b\u627e\u4e92\u52d5JS\u5916\u639b\u5230\u5275\u9020\u5916\u639b &#8211; \u6539\u9020\u8996\u89ba\u52d5\u614bJS<\/a><\/li><li><a href=\"#g5b23ffeaabed\">\u89aa\u81ea\u5be6\u8e10\u6539\u9020onScroll\u7684JS\u5916\u639b &#8211; \u5be6\u8e10\u9700\u6c42\u3001\u5b8c\u5168\u5ba2\u88fd<\/a><ol><li><a href=\"#gbc1e72f56afd\">\u6539\u9020JS\u5916\u639b\u7684\u6e90\u8d77<\/a><\/li><li><a href=\"#g7d4226d605d4\">\u6539\u9020\u5916\u639b\u89e3\u6c7a\u7684\u554f\u984c<\/a><\/li><\/ol><\/li><li><a href=\"#gced757068b4b\">\u81ea\u5275onScroll\u52d5\u614b\u5916\u639b\u64cd\u4f5c\u5f71\u7247\u5c55\u793a<\/a><\/li><li><a href=\"#g366aaefa3c06\">\u6574\u5408\u81ea\u88fd\u7db2\u9801\u7de8\u8f2f\u5668<\/a><\/li><li><a href=\"#g5ed6b94cb29b\">AI\u61c9\u7528\u7a0b\u5f0f\u5de5\u5177\u958b\u767c\u8981\u9ede<\/a><\/li><\/ol><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"gec5de1e80dc0\">\u7db2\u9801\u8a2d\u8a08\u5e2b\u5207\u7248\u5957\u7528\u7db2\u7ad9JS\u4e92\u52d5\u7279\u6548<\/h2>\n\n\n\n<p><strong>\u7db2\u9801\u8a2d\u8a08\u5e2b\u524d\u7f6e\u4f5c\u696d\u53ef\u5206\u6210\u4e09\u500b\u6a13\u5c64\u5e73\u9762\u8996\u89ba\u80fd\u529b\u3001\u5207\u7248\u80fd\u529b\u3001\u524d\u7aef\u8cc7\u6599\u4e32\u63a5\u80fd\u529b\uff0c\u7576\u7136\u8d8a\u5f80\u5f8c\u9762\u8d8a\u504f\u5411\u5de5\u7a0b\u5e2b\uff01<\/strong>\u5e73\u9762\u8996\u89ba\u5c31\u50cf\u50b3\u7d71\u7684\u540d\u7247\u3001\u6d77\u5831\u8a2d\u8a08\u7de8\u6392\u5be6\u529b\uff0c\u53ea\u662f\u4e00\u822c\u5e73\u9762\u8a2d\u8a08\u5e2b\u4e0d\u61c2\u7db2\u9801RWD\u683c\u5f0f\uff0c\u800c\u7db2\u9801\u8a2d\u8a08\u5e2b\u5728\u8a2d\u8a08\u6642\u5c31\u6e05\u695a\u660e\u767d\u7db2\u7ad9\u67b6\u69cb\uff0c\u6309\u7167\u7db2\u7ad9RWD\u67b6\u69cb\u539f\u7406\u8a2d\u8a08\u3002<\/p>\n\n\n\n<p>\u5207\u7248\u80fd\u529b\uff0c\u6642\u5e38\u63d0\u53ca\u7684\u7684DIV+CSS\u5207\u7248\u80fd\u529b\uff0c\u4e0d\u540c\u65bc\u4e00\u822c\u7db2\u9801\u8a2d\u8a08\u5e2b\uff0c\u9700\u8981\u5177\u5099\u6709\u521d\u7d1a\u7a0b\u5f0f\u7d50\u69cb\u601d\u7dad\uff0cCSS\u5c31\u662f\u5c07\u5716\u7247\u8f49\u5316\u70ba\u5c64\u7d1a\u8cc7\u8a0a\u7684\u7de8\u6392\uff0c\u9664\u4e86\u53ef\u4ee5\u8b93SEO\u6a5f\u5668\u6613\u8b80\u6613\u61c2\uff0c\u4e5f\u662f\u929c\u63a5\u7a0b\u5f0f\u4e32\u63a5\u7684\u5fc5\u5099\u5de5\u4f5c\uff0c\u8a31\u591a\u5e73\u9762\u8a2d\u8a08\u5e2b\u7684\u5207\u7248\u80fd\u529b\u662f\u6709\u9650\u7684\uff0c\u66f4\u5c08\u696d\u7684\u5207\u7248\u8005\u6703\u5957\u7528JS\u4e92\u52d5\u5916\u639b\u3002\u5b8c\u7f8e\u7684\u4e92\u52d5\u5c55\u793a\uff0c\u5c31\u662f\u5207\u7248\u80fd\u529b\u7684\u63d0\u5347\u3002\u9019\u500b\u9801\u9762\u7684\u300c\u6372\u8ef8\u52d5\u756b\u300d\u5916\u639b\u5c31\u662f\u5c55\u793a\u4e92\u52d5\u7684\u57fa\u790e\uff01<\/p>\n\n\n\n<p>\u524d\u7aef\u8cc7\u6599\u4e32\u63a5\u80fd\u529b\uff0c\u504f\u5411\u524d\u7aef\u5de5\u7a0b\u5e2b\uff0c\u4f46\u5fc5\u9808\u5148\u5207\u7248\uff0c\u624d\u80fd\u5957\u7528\uff01<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"gaf43d9be52d5\">\u5f9e\u5c0b\u627e\u4e92\u52d5JS\u5916\u639b\u5230\u5275\u9020\u5916\u639b &#8211; \u6539\u9020\u8996\u89ba\u52d5\u614bJS<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/notebook.raina.com.tw\/code\/wp-content\/uploads\/2026\/01\/opt_AI\u6372\u8ef8\u5916\u639b-1024x1024.jpg\" alt=\"\u81ea\u88fdAI\u6372\u8ef8\u5916\u639b\" class=\"wp-image-435\" srcset=\"https:\/\/notebook.raina.com.tw\/code\/wp-content\/uploads\/2026\/01\/opt_AI\u6372\u8ef8\u5916\u639b-1024x1024.jpg 1024w, https:\/\/notebook.raina.com.tw\/code\/wp-content\/uploads\/2026\/01\/opt_AI\u6372\u8ef8\u5916\u639b-300x300.jpg 300w, https:\/\/notebook.raina.com.tw\/code\/wp-content\/uploads\/2026\/01\/opt_AI\u6372\u8ef8\u5916\u639b-150x150.jpg 150w, https:\/\/notebook.raina.com.tw\/code\/wp-content\/uploads\/2026\/01\/opt_AI\u6372\u8ef8\u5916\u639b-768x768.jpg 768w, https:\/\/notebook.raina.com.tw\/code\/wp-content\/uploads\/2026\/01\/opt_AI\u6372\u8ef8\u5916\u639b.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"g5b23ffeaabed\">\u89aa\u81ea\u5be6\u8e10\u6539\u9020onScroll\u7684JS\u5916\u639b &#8211; \u5be6\u8e10\u9700\u6c42\u3001\u5b8c\u5168\u5ba2\u88fd<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"gbc1e72f56afd\">\u6539\u9020JS\u5916\u639b\u7684\u6e90\u8d77<\/h3>\n\n\n\n<p>\u5f88\u4e45\u4e4b\u524d\u5c31\u8cb7\u904e\u4e00\u6b3eonScroll\u5916\u639b\uff0c\u4f46\u5c0d\u65b9\u5df2\u7d93\u505c\u6b62\u66f4\u65b0\u975e\u5e38\u4e45\uff0c\u9019\u5916\u639b\u662f\u4f9d\u9644Jquery\u8a2d\u8a08\uff0c\u53ea\u6709\u9032\u5834\u3001\u6c92\u6709\u9000\u5834\uff0c\u4e5f\u6c92\u6709\u4e2d\u9593\u505c\u9813\u904e\u7a0b\u7684\u7279\u6548&#8230;\u6211\u5c07\u9019\u6b3e\u5916\u639b\u5305\u91cd\u65b0\u5347\u7d1a\uff0c\u4e26\u4e14\u5f9e\u4f9d\u9644Jquery\u904b\u4f5c\u6539\u6210\u539f\u751f\u5373\u53ef\u4f7f\u7528\u3002\u6211\u523b\u610f\u7d50\u5408<a href=\"https:\/\/animate.style\/\">animate.style<\/a>\u8a2d\u8a08\u4e00\u6b3e<strong>\u539f\u751f\u578b\u7684JS onScroll\u5916\u639b<\/strong>\u3002<\/p>\n\n\n\n<p>\u6b64\u7bc7\u6587\u7ae0\u53ea\u662f\u9f13\u52f5\u4f60\u81ea\u5df1\u53ef\u4ee5\u52d5\u624b\u88fd\u4f5c\u5c08\u5c6c\u65bc\u4f60\u9700\u6c42\u7684\u5916\u639b\u3002\u6709\u4e86AI\u5f88\u591a\u4e8b\u60c5\u8b8a\u5f97\u5f88\u65b9\u4fbf\u3002<\/p>\n\n\n\n<p><strong>\u4ee5\u524d\u4e0a\u904e\u7db2\u9801\u52d5\u756b\u8ab2\u7a0b\uff0c\u4f46\u4e0a\u5b8c\u9084\u662f\u8166\u888b\u4e00\u7247\u7a7a\u767d\uff0c\u9084\u662f\u5728\u5c0b\u627e\u5916\u639b\u76f4\u63a5\u5957\u7528<\/strong>\uff0c\u73fe\u5728\u53ef\u4ee5\u6211\u5011\u53ef\u4ee5\u81ea\u5df1\u5275\u9020\u5916\u639b\u4f7f\u7528\uff0c\u4f60\u53ef\u4ee5\u5b8c\u5168\u6839\u64da\u9700\u6c42\u6253\u9020\u5c08\u5c6c\u5916\u639b\uff0c\u5c31\u50cf<a href=\"https:\/\/animate.style\/\">animate.style<\/a>\uff0c\u6c92\u6709\u61f8\u6d6e\u529f\u80fd\uff0c\u6211\u5c31<strong>\u589e\u52a0\u4e86\u61f8\u6d6e\u529f\u80fd\uff0c\u4e8b\u5f8c\u5982\u679c\u6709\u4e0d\u8db3\u7684\u4e5f\u80fd\u96a8\u6642\u64f4\u5145\u3002<\/strong><\/p>\n\n\n\n<p>\u5728\u9801\u9762\u4e2d\u653e\u7f6e\u5404\u985e\u52d5\u756b\u7279\u6548\u4ee5\u5f8c\u518d\u4e5f\u4e0d\u56f0\u96e3\uff0c\u9760\u81ea\u5df1\u5beb\u4e0d\u5982\u8ddfAI\u5171\u540c\u5408\u4f5c\uff0c\u6253\u9020\u51fa\u66f4\u591a\u597d\u7528\u7684\u5916\u639b\u5305\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"g7d4226d605d4\">\u6539\u9020\u5916\u639b\u89e3\u6c7a\u7684\u554f\u984c<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4e0d\u5b58\u5728\u7684\u5916\u639b\u4f60\u53ef\u4ee5\u81ea\u5275<\/li>\n\n\n\n<li>\u591a\u7a2e\u5916\u639b\u6574\u5408\u6210\u4e00\u500b\u5916\u639b<\/li>\n\n\n\n<li>\u6839\u64da\u500b\u4eba\u4f7f\u7528\u7fd2\u6163\u5275\u9020\u5c08\u5c6c\u65bc\u81ea\u5df1\u7684\u5916\u639b<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"gced757068b4b\">\u81ea\u5275onScroll\u52d5\u614b\u5916\u639b\u64cd\u4f5c\u5f71\u7247\u5c55\u793a<\/h2>\n\n\n\n<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }<\/style><div class='embed-container'><iframe src='https:\/\/drive.google.com\/file\/d\/1sfDisXRFLfabn9XrmGQd2cbDg08RGRaZ\/preview' frameborder='0'><\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"g366aaefa3c06\">\u6574\u5408\u81ea\u88fd\u7db2\u9801\u7de8\u8f2f\u5668<\/h2>\n\n\n\n<p>\u81ea\u88fd\u5916\u639b\u4ee5\u5f8c\uff0c\u6211\u5011\u53ef\u4ee5\u5728\u88fd\u4f5c\u4e00\u500b\u5df2\u7d93\u8a2d\u8a08\u5b8c\u6210\u7684\u7db2\u9801\u5de5\u5177\uff0c\u5354\u52a9\u6211\u5011\u5957\u7528onScroll\u52d5\u756b\uff0c\u900f\u904e\u300c\u6240\u898b\u5373\u6240\u5f97\u300d\u7684\u7de8\u8f2f\u5668\u80fd\u529b\uff0c\u505a\u51fa\u4f60\u8981\u7684\u7db2\u9801\u5de5\u5177\u3002<\/p>\n\n\n\n<p>\u4ee5\u4e0b\u4e5f\u662fRaina\u751f\u6210\u51fa\u4f86\u7684\u7db2\u9801\u61c9\u7528\u7a0b\u5f0f\u5de5\u5177\uff0c\u7576\u7136\u9019\u53ea\u662f\u7d50\u5408onScroll\u5916\u639b\u7684\u5373\u6642\u7de8\u8f2f\u5668\u3002<strong>Raina\u958b\u767c\u975e\u5e38\u591a\u7de8\u8f2f\u5668\u61c9\u7528\u5de5\u5177\uff0c\u91dd\u5c0d\u4e0d\u540c\u9700\u6c42\u9818\u57df\u800c\u958b\u767c\u3002<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"g5ed6b94cb29b\">AI\u61c9\u7528\u7a0b\u5f0f\u5de5\u5177\u958b\u767c\u8981\u9ede<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>AI\u7684\u61c9\u7528\u7a0b\u5f0f\u4e00\u6b21\u53ea\u505a\u4e00\u4ef6\u4e8b<\/li>\n\n\n\n<li>\u76ee\u7684\u6e05\u695a\uff0c\u77e5\u9053\u8981\u7522\u751f\u4ec0\u9ebc\u7d50\u679c<\/li>\n\n\n\n<li>\u52a0\u901f\u539f\u672c\u7684\u5de5\u4f5c\u6548\u7387<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1300\" height=\"654\" src=\"https:\/\/notebook.raina.com.tw\/code\/wp-content\/uploads\/2026\/01\/\u52d5\u756b\u7de8\u8f2f\u5668.jpg\" alt=\"\u7528AI\u81ea\u884c\u88fd\u4f5c\u52d5\u756b\u7de8\u8f2f\u5668\" class=\"wp-image-447\" srcset=\"https:\/\/notebook.raina.com.tw\/code\/wp-content\/uploads\/2026\/01\/\u52d5\u756b\u7de8\u8f2f\u5668.jpg 1300w, https:\/\/notebook.raina.com.tw\/code\/wp-content\/uploads\/2026\/01\/\u52d5\u756b\u7de8\u8f2f\u5668-300x151.jpg 300w, https:\/\/notebook.raina.com.tw\/code\/wp-content\/uploads\/2026\/01\/\u52d5\u756b\u7de8\u8f2f\u5668-1024x515.jpg 1024w, https:\/\/notebook.raina.com.tw\/code\/wp-content\/uploads\/2026\/01\/\u52d5\u756b\u7de8\u8f2f\u5668-768x386.jpg 768w\" sizes=\"auto, (max-width: 1300px) 100vw, 1300px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\u6587\u7ae0\u76ee\u9304 \u7db2\u9801\u8a2d\u8a08\u5e2b\u5207\u7248\u5957\u7528\u7db2\u7ad9JS\u4e92\u52d5\u7279\u6548 \u7db2\u9801\u8a2d\u8a08\u5e2b\u524d\u7f6e\u4f5c\u696d\u53ef\u5206\u6210\u4e09\u500b\u6a13\u5c64\u5e73\u9762\u8996\u89ba\u80fd\u529b\u3001\u5207\u7248\u80fd\u529b\u3001\u524d\u7aef\u8cc7\u6599 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":426,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"slim_seo":{"title":"\u3010\u81ea\u88fdJS\u5916\u639b\u3011Animation on scroll\u6372\u8ef8\u52d5\u756b\uff0c\u6372\u5230\u54ea\u88e1\u81ea\u52d5\u9032\u5834\u3001\u6ed1\u4e0a\u53bb\u81ea\u52d5\u9000\u5834\uff0c\u7528AI\u5ba2\u88fd\u5316JS\u5916\u639b - Raina\u8a31\u8a9e\u771f\u7684AI\u7a0b\u5f0f\u7b46\u8a18\u672c","description":"\u6587\u7ae0\u76ee\u9304 \u7db2\u9801\u8a2d\u8a08\u5e2b\u5207\u7248\u5957\u7528\u7db2\u7ad9JS\u4e92\u52d5\u7279\u6548 \u7db2\u9801\u8a2d\u8a08\u5e2b\u524d\u7f6e\u4f5c\u696d\u53ef\u5206\u6210\u4e09\u500b\u6a13\u5c64\u5e73\u9762\u8996\u89ba\u80fd\u529b\u3001\u5207\u7248\u80fd\u529b\u3001\u524d\u7aef\u8cc7\u6599\u4e32\u63a5\u80fd\u529b\uff0c\u7576\u7136\u8d8a\u5f80\u5f8c\u9762\u8d8a\u504f\u5411\u5de5\u7a0b\u5e2b\uff01 \u5e73\u9762\u8996\u89ba\u5c31\u50cf\u50b3\u7d71\u7684\u540d\u7247\u3001\u6d77\u5831\u8a2d\u8a08\u7de8\u6392\u5be6\u529b\uff0c\u53ea\u662f\u4e00\u822c\u5e73\u9762\u8a2d\u8a08\u5e2b\u4e0d\u61c2\u7db2\u9801RWD\u683c\u5f0f\uff0c\u800c\u7db2\u9801\u8a2d\u8a08\u5e2b\u5728\u8a2d\u8a08\u6642\u5c31\u6e05\u695a\u660e\u767d\u7db2\u7ad9\u67b6\u69cb\uff0c\u6309\u7167\u7db2\u7ad9RWD\u67b6\u69cb\u539f\u7406\u8a2d\u8a08\u3002 \u5207\u7248\u80fd\u529b\uff0c\u6642\u5e38\u63d0\u53ca\u7684\u7684"},"footnotes":""},"categories":[1],"tags":[28,29],"book":[15],"class_list":["post-425","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","tag-28","tag-29","book-js-plug-in-development"],"blocksy_meta":{"vertical_spacing_source":"inherit","content_style_source":"inherit","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"meta_box":{"Developmentfileread-permissions":"need-password","howpassword":"","ProgramFiles-SourceCode":"431","version_recode":[{"versionre_cord":"1.0","version_img":"426","version_sp":"\u7d50\u5408animate.css\u7684\u5916\u639b"},{"versionre_cord":"2.0","version_img":"426","version_sp":"\u589e\u52a0\u57fa\u672c\u6587\u5b57\u7279\u6548"}],"UseTeaching":[],"Implementationresults":[]},"_links":{"self":[{"href":"https:\/\/notebook.raina.com.tw\/code\/wp-json\/wp\/v2\/posts\/425","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notebook.raina.com.tw\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notebook.raina.com.tw\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notebook.raina.com.tw\/code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notebook.raina.com.tw\/code\/wp-json\/wp\/v2\/comments?post=425"}],"version-history":[{"count":0,"href":"https:\/\/notebook.raina.com.tw\/code\/wp-json\/wp\/v2\/posts\/425\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notebook.raina.com.tw\/code\/wp-json\/wp\/v2\/media\/426"}],"wp:attachment":[{"href":"https:\/\/notebook.raina.com.tw\/code\/wp-json\/wp\/v2\/media?parent=425"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notebook.raina.com.tw\/code\/wp-json\/wp\/v2\/categories?post=425"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notebook.raina.com.tw\/code\/wp-json\/wp\/v2\/tags?post=425"},{"taxonomy":"book","embeddable":true,"href":"https:\/\/notebook.raina.com.tw\/code\/wp-json\/wp\/v2\/book?post=425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}