{"id":5697,"date":"2024-04-14T21:03:22","date_gmt":"2024-04-14T13:03:22","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5697"},"modified":"2024-04-14T21:03:22","modified_gmt":"2024-04-14T13:03:22","slug":"give-motion-to-an-element-during-scrolling","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/ko\/give-motion-to-an-element-during-scrolling\/","title":{"rendered":"\uc2a4\ud06c\ub864\ud558\ub294 \ub3d9\uc548 \uc694\uc18c\uc5d0 \ubaa8\uc158 \uc81c\uacf5"},"content":{"rendered":"<div class=\"docs_rich-text w-richtext\">\n<p><\/p>\n<p>Webflow\uc758 After Effects \ubc0f Lottie \uc2dc\ub9ac\uc988\uc758 \uc77c\ud658\uc73c\ub85c After Effects\uc5d0\uc11c Lottie \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc81c\uc791\ud588\uc2b5\ub2c8\ub2e4. \uc774 \uac00\uc774\ub4dc\uc5d0\uc11c\ub294 Lottie \uc790\uc0b0\uc774 \ubcf4\uc774\ub294 \ub3d9\uc548 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud558\ub3c4\ub85d \uad6c\uc131\ud569\ub2c8\ub2e4.<\/p>\n<p>\uc6b0\ub9ac\ub294 \uc774\ub97c 4\ub2e8\uacc4\ub85c \ub2ec\uc131\ud560 \uac83\uc785\ub2c8\ub2e4:<\/p>\n<ol>\n<li>Lottie \uc790\uc0b0 \ud1b5\ud569<\/li>\n<li>\uc2a4\ud06c\ub864 \ud2b8\ub9ac\uac70 \uc124\uc815<\/li>\n<li>\uc560\ub2c8\uba54\uc774\uc158 \uc124\uc815\n<\/li>\n<\/ol>\n<h2>1. \ub85c\ud2f0 \uc790\uc0b0 \ud1b5\ud569<\/h2>\n<p>After Effects\uc5d0\uc11c Lottie \uc560\ub2c8\uba54\uc774\uc158\uc744 \ub0b4\ubcf4\ub0b4\uace0 Webflow \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc5c5\ub85c\ub4dc\ud574\uc57c \ud569\ub2c8\ub2e4. Bodymovin\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc560\ub2c8\uba54\uc774\uc158\uc744 \ub0b4\ubcf4\ub0c8\uc2b5\ub2c8\ub2e4. \uc804\uccb4 \uac00\uc774\ub4dc\uc758 3\ub2e8\uacc4\uc640 4\ub2e8\uacc4\uc5d0\uc11c \uc774\ub97c \uc218\ud589\ud558\ub294 \ubc29\ubc95\uc744 \uc54c\uc544\ubcf4\uc138\uc694.\u00a0<\/p>\n<p>\uc774 \uacfc\uc81c\ub97c \uc704\ud574\uc11c\ub294 3\uac1c\uc758 \uc139\uc158\uc744 \uc900\ube44\ud574\uc57c \ud569\ub2c8\ub2e4. \uc139\uc158 \uac00\uc774\ub4dc\ub97c \ucc38\uc870\ud558\uac70\ub098 <a href=\"https:\/\/webflow.com\/website\/After-Effects-and-Lottie-or-Animate-while-scrolling\">\ud504\ub85c\uc81d\ud2b8\ub97c \ubcf5\uc81c\ud558\ub2e4<\/a>.<\/p>\n<p>\uc560\ub2c8\uba54\uc774\uc158\uc744 \ucc3e\uc544\uc11c \ucd94\uac00\ud558\ub824\uba74 \uc67c\ucabd \uc0ac\uc774\ub4dc\ubc14\uc758 \uc790\uc0b0 \ud328\ub110\uc5d0\uc11c \uc774\ubbf8\uc9c0 \uc544\uc774\ucf58\uc744 \uc120\ud0dd\ud558\uace0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc911\uc559 \uc139\uc158\uc5d0 \ub193\uc2b5\ub2c8\ub2e4.\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"50.23474178403755%\" data-rt-dimensions=\"426:214\" data-page-url=\"https:\/\/vimeo.com\/411109453\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/411109453\"><\/iframe><\/div>\n<\/figure>\n<p>\ud6cc\ub96d\ud55c! \uc774\uc81c \ud2b8\ub9ac\uac70\ub97c \uc124\uc815\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<h2>2. \uc2a4\ud06c\ub864 \uae30\ubc18 \ud2b8\ub9ac\uac70 \uc124\uc815<\/h2>\n<p>\ud2b8\ub9ac\uac70\ub97c \ucd94\uac00\ud558\uae30 \uc804\uc5d0 \ub2e4\ub978 \uc694\uc18c\uac00 \uc544\ub2cc \uc560\ub2c8\uba54\uc774\uc158\uc774 \uc120\ud0dd\ub418\uc5c8\ub294\uc9c0 \ud655\uc778\ud574\uc57c \ud569\ub2c8\ub2e4. \uc6b0\ub9ac\ub294 \uc2a4\ud06c\ub864\ud560 \ub54c \uc774 \uc560\ub2c8\uba54\uc774\uc158\uc774 \ubc1c\uc0dd\ud558\uae30\ub97c \uc6d0\ud569\ub2c8\ub2e4. \uc624\ub978\ucabd \uc0ac\uc774\ub4dc\ubc14\uc758 \uc0c1\ud638 \uc791\uc6a9 \ud328\ub110\uc5d0\uc11c \uc694\uc18c \ud2b8\ub9ac\uac70 \uba54\ub274\ub97c \uc5f4\uace0 \ubcf4\uae30\uc5d0\uc11c \uc2a4\ud06c\ub864\ud558\ub294 \ub3d9\uc548\uc744 \uc120\ud0dd\ud569\ub2c8\ub2e4.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"50.23474178403755%\" data-rt-dimensions=\"426:214\" data-page-url=\"https:\/\/vimeo.com\/411109394\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/411109394\"><\/iframe><\/div>\n<\/figure>\n<p>\ucd5c\uc885 \ub2e8\uacc4\uc5d0\uc11c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\uc131\ud558\ub824\uba74 \ud574\ub2f9 \uc0c1\ud638 \uc791\uc6a9 \ud328\ub110\uc744 \uc720\uc9c0\ud558\uc138\uc694.<\/p>\n<h2>3. \uc560\ub2c8\uba54\uc774\uc158 \uc124\uc815<\/h2>\n<p>\uc560\ub2c8\uba54\uc774\uc158\uc744 \uc18c\uac1c\ud558\uc5ec \uc774\ub97c \uc0dd\uc0dd\ud558\uac8c \uad6c\ud604\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc544\ub798\uc5d0 <strong>\uc2a4\ud06c\ub864 \uc2dc<\/strong>, \uc120\ud0dd\ud558\ub2e4 <strong>\uc2a4\ud06c\ub864 \uc560\ub2c8\uba54\uc774\uc158 \uc7ac\uc0dd<\/strong> \uc791\uc5c5 \uba54\ub274\uc5d0\uc11c \uc2a4\ud06c\ub864 \uc560\ub2c8\uba54\uc774\uc158 \uc606\uc5d0 \uc788\ub294 \ub354\ud558\uae30 \uae30\ud638\ub97c \ud0ed\ud558\uace0 \ub4dc\ub86d\ub2e4\uc6b4 \uba54\ub274\uc5d0\uc11c Lottie\ub97c \uc120\ud0dd\ud558\uc5ec \ucd08\uae30 \uc791\uc5c5\uc744 \ud3ec\ud568\ud569\ub2c8\ub2e4.\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"50.23474178403755%\" data-rt-dimensions=\"426:214\" data-page-url=\"https:\/\/vimeo.com\/411109342\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/411109342\"><\/iframe><\/div>\n<\/figure>\n<p>\uc2a4\ud06c\ub864 \uc791\uc5c5 \ud0c0\uc784\ub77c\uc778\uc5d0\uc11c 100%\uc758 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc120\ud0dd\ud558\uace0 \uc544\ub798\uc758 Lottie\uc5d0\uc11c 100%\ub85c \uc870\uc815\ud569\ub2c8\ub2e4.\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"50.23474178403755%\" data-rt-dimensions=\"426:214\" data-page-url=\"https:\/\/vimeo.com\/411109293\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/411109293\"><\/iframe><\/div>\n<\/figure>\n<p>\uc774\uc81c \uc560\ub2c8\uba54\uc774\uc158\uc740 0%\uc5d0\uc11c \uc2dc\uc791\ud558\uc5ec \ubcf4\uae30 \ubc16\uc73c\ub85c \uc2a4\ud06c\ub864\ub420 \ub54c 100%\uc5d0 \ub3c4\ub2ec\ud569\ub2c8\ub2e4.\u00a0<\/p>\n<p>\uc2e4\uc2dc\uac04 \ubbf8\ub9ac\ubcf4\uae30 \ubaa8\ub4dc\ub97c \ud65c\uc131\ud654\ud558\uac70\ub098 \ubbf8\ub9ac\ubcf4\uae30\uc5d0\uc11c \uc791\uc5c5\uc744 \ud3c9\uac00\ud558\uc5ec \uc2a4\ud06c\ub864\ud558\uba74\uc11c \uc560\ub2c8\uba54\uc774\uc158 \uc9c4\ud589 \uc0c1\ud669\uc744 \uad00\ucc30\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\u00a0<\/p>\n<pThat's all \u2014 you have successfully crafted a scroll-based Lottie animation in the Webflow designer. Kudos!\n<\/div>","protected":false},"excerpt":{"rendered":"Webflow\uc758 After Effects \ubc0f Lottie \uc2dc\ub9ac\uc988\uc758 \uc77c\ud658\uc73c\ub85c Lottie \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc81c\uc791\ud588\uc2b5\ub2c8\ub2e4\u2026","protected":false},"author":2,"featured_media":5698,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[301],"tags":[],"class_list":{"0":"post-5697","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-interactions-animations","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/ko\/wp-json\/wp\/v2\/posts\/5697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/ko\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/ko\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/ko\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/ko\/wp-json\/wp\/v2\/comments?post=5697"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/ko\/wp-json\/wp\/v2\/posts\/5697\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/ko\/wp-json\/wp\/v2\/media\/5698"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/ko\/wp-json\/wp\/v2\/media?parent=5697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/ko\/wp-json\/wp\/v2\/categories?post=5697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/ko\/wp-json\/wp\/v2\/tags?post=5697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}