{"id":6346,"date":"2023-06-27T12:54:09","date_gmt":"2023-06-27T03:54:09","guid":{"rendered":"http:\/\/manual.oneup-creative.kr\/?p=6346"},"modified":"2026-04-20T04:31:04","modified_gmt":"2026-04-20T04:31:04","slug":"%ed%99%88%ed%8e%98%ec%9d%b4%ec%a7%80-wow-js-%ed%9a%a8%ea%b3%bc-%ec%84%a4%eb%aa%85","status":"publish","type":"post","link":"https:\/\/pohang.eduwp.kr\/?p=6346","title":{"rendered":"\ud648\ud398\uc774\uc9c0 wow.js \ud6a8\uacfc \uc124\uba85"},"content":{"rendered":"<p><a href=\"https:\/\/i0.wp.com\/blog.singihae.com\/wp-content\/uploads\/2017\/08\/wowjs_screenshot.png\" data-rel=\"lightbox-image-1\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\" class=\"swipebox\"><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-6845 jetpack-lazy-image jetpack-lazy-image--handled\" src=\"https:\/\/i0.wp.com\/blog.singihae.com\/wp-content\/uploads\/2017\/08\/wowjs_screenshot.png?resize=676%2C305\" alt=\"\" width=\"676\" height=\"305\" data-recalc-dims=\"1\" srcset=\"https:\/\/i0.wp.com\/www.buppagistar.com\/wp-content\/uploads\/2017\/08\/wowjs_screenshot.png?w=806&amp;ssl=1 806w, https:\/\/i0.wp.com\/www.buppagistar.com\/wp-content\/uploads\/2017\/08\/wowjs_screenshot.png?resize=768%2C347&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.buppagistar.com\/wp-content\/uploads\/2017\/08\/wowjs_screenshot.png?resize=600%2C271&amp;ssl=1 600w\" data-lazy-loaded=\"1\" sizes=\"(max-width: 676px) 100vw, 676px\" loading=\"eager\" \/><\/a><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\ubaa9\ucc28 \ud1a0\uae00\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/pohang.eduwp.kr\/?p=6346\/#%EC%9E%A5%EC%A0%90\" >\uc7a5\uc810<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/pohang.eduwp.kr\/?p=6346\/#CSS_%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98_%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0\" >CSS \uc560\ub2c8\uba54\uc774\uc158 \uc801\uc6a9\ud558\uae30<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/pohang.eduwp.kr\/?p=6346\/#%EA%B3%A0%EA%B8%89_%EC%98%B5%EC%85%98\" >\uace0\uae09 \uc635\uc158<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/pohang.eduwp.kr\/?p=6346\/#%EC%82%AC%EC%9A%A9%EC%9E%90_%EC%84%A4%EC%A0%95\" >\uc0ac\uc6a9\uc790 \uc124\uc815<\/a><\/li><\/ul><\/nav><\/div>\n<h3 id=\"ftoc-heading-3\" class=\"ftwp-heading\"><span class=\"ez-toc-section\" id=\"%EC%9E%A5%EC%A0%90\"><\/span>\uc7a5\uc810<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li><a href=\"http:\/\/johnpolacek.github.io\/scrollorama\/\" target=\"_blank\" rel=\"noopener\">Scrollorama<\/a>\uc640 \uac19\uc740 \ub2e4\ub978 JavaScript \uc2dc\ucc28 \ud50c\ub7ec\uadf8\uc778\ubcf4\ub2e4 \uc791\uc2b5\ub2c8\ub2e4 (\ud658\uc0c1\uc801\uc778 \uc77c\uc744\ud558\uc9c0\ub9cc \ub2e8\uc21c\ud55c \uc694\uad6c\uc5d0 \ub108\ubb34 \ubb34\uac70\uc6b8 \uc218 \uc788\uc74c)<\/li>\n<li>\uac04\ub2e8\ud788 \uc124\uce58\ud558\uace0 animate.css\uc640 \ud568\uaed8 \uc0ac\uc6a9\ud558\ubbc0\ub85c \uc124\uc815\uc774 \ub9e4\uc6b0 \ube60\ub974\ub2e4.<\/li>\n<li>\ube60\ub978 \uc2e4\ud589\uc774 \uac00\ub2a5\ud558\uace0 \ucf54\ub4dc\uac00 \uac00\ubccd\ub2e4.<\/li>\n<li>\uc124\uc815\uc744 \ubcc0\uacbd\ud560 \uc218 \uc788\ub2e4.<\/li>\n<\/ol>\n<ol>\n<li><strong>animate.css \uc5f0\uacb0\ud558\uae30<\/strong>\n<div class=\"hcb_wrap\">\n<pre class=\"prism undefined-numbers lang-css\" data-lang=\"CSS\"><code>&lt;link rel=\"stylesheet\" href=\"css\/animate.css\" \/&gt;<\/code><\/pre>\n<\/div>\n<p>\uc544\ub2c8\uba74<span>\u00a0<\/span><a href=\"https:\/\/cdnjs.com\/libraries\/animate.css\" target=\"_blank\" rel=\"noopener\">CDNJS<\/a><span>\u00a0<\/span>\uc774\uc6a9\ud558\uae30<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism undefined-numbers lang-css\" data-lang=\"CSS\"><code>&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/animate.css\/3.5.2\/animate.min.css\" \/&gt;<\/code><\/pre>\n<\/div>\n<\/li>\n<li><strong>wow.js \uc5f0\uacb0 \ubc0f \uc2e4\ud589<\/strong>\n<div class=\"hcb_wrap\">\n<pre class=\"prism undefined-numbers lang-js\" data-lang=\"JavaScript\"><code>&lt;script src=\"js\/wow.min.js\"&gt;&lt;\/script&gt; &lt;script&gt; new WOW().init(); &lt;\/script&gt;<\/code><\/pre>\n<\/div>\n<\/li>\n<\/ol>\n<h2 id=\"ftoc-heading-5\" class=\"ftwp-heading\"><span class=\"ez-toc-section\" id=\"CSS_%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98_%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0\"><\/span>CSS \uc560\ub2c8\uba54\uc774\uc158 \uc801\uc6a9\ud558\uae30<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li><strong>html\uc5d0 \uc801\uc6a9\ud558\uae30<\/strong>\n<div class=\"hcb_wrap\">\n<pre class=\"prism undefined-numbers lang-html\" data-lang=\"HTML\"><code>&lt;div class=\"wow\"&gt; Content to Reveal Here &lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<\/li>\n<li>\uc560\ub2c8\uba54\uc774\uc158 \uc2a4\ud0c0\uc77c \uc120\ud0dd<br \/>\n<a href=\"https:\/\/daneden.github.io\/animate.css\/\" target=\"_blank\" rel=\"noopener\">Animate.css<\/a>\uc5d0\uc11c \uc560\ub2c8\uba54\uc774\uc158 \uc2a4\ud0c0\uc77c\uc744 \uc120\ud0dd\ud55c \ub2e4\uc74c CSS \ud074\ub798\uc2a4\ub97c HTML \uc694\uc18c\uc5d0 \ucd94\uac00\ud55c\ub2e4.<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism undefined-numbers lang-html\" data-lang=\"HTML\"><code>&lt;div class=\"wow bounceInUp\"&gt; Content to Reveal Here &lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<\/li>\n<\/ol>\n<p><span>\uc774\ub7ec\uba74 \ub05d\ub0ac\ub2e4. \ud55c \ubc88 \uc2a4\ud06c\ub864\uc744 \ud574\uc11c \ud655\uc778\uc744 \ud574\ubcf4\uc790.<\/span><\/p>\n<h2 id=\"ftoc-heading-6\" class=\"ftwp-heading ftwp-heading-target\"><span class=\"ez-toc-section\" id=\"%EA%B3%A0%EA%B8%89_%EC%98%B5%EC%85%98\"><\/span>\uace0\uae09 \uc635\uc158<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>data-wow-duration:<\/strong><span>\u00a0<\/span>\uc560\ub2c8\uba54\uc774\uc158 \uae30\uac04\uc744 \ubcc0\uacbd<\/li>\n<li><strong>data-wow-delay:<\/strong><span>\u00a0<\/span>\uc560\ub2c8\uba54\uc774\uc158 \uc2dc\uc791 \uc804\uc5d0 \uc9c0\uc5f0\uc2dc\uac04 \ubcc0\uacbd<\/li>\n<li><strong>data-wow-offset:<\/strong><span>\u00a0<\/span>\uc560\ub2c8\uba54\uc774\uc158 \uc2dc\uc791 \uac70\ub9ac (\ube0c\ub77c\uc6b0\uc800 \ud558\ub2e8\uacfc \uad00\ub828\ub428)<\/li>\n<li><strong>data-wow-iteration:<\/strong><span>\u00a0<\/span>\uc560\ub2c8\uba54\uc774\uc158\uc774 \ubc18\ubcf5\ub418\ub294 \ud69f\uc218<\/li>\n<\/ul>\n<div class=\"hcb_wrap\">\n<pre class=\"prism undefined-numbers lang-html\" data-lang=\"HTML\"><code>&lt;section class=\"wow slideInLeft\" data-wow-duration=\"2s\" data-wow-delay=\"5s\"&gt; &lt;\/section&gt;<\/code><\/pre>\n<\/div>\n<div class=\"hcb_wrap\">\n<pre class=\"prism undefined-numbers lang-html\" data-lang=\"HTML\"><code>&lt;section class=\"wow slideInRight\" data-wow-offset=\"10\" data-wow-iteration=\"10\"&gt; &lt;\/section&gt;<\/code><\/pre>\n<\/div>\n<h2 id=\"ftoc-heading-7\" class=\"ftwp-heading\"><span class=\"ez-toc-section\" id=\"%EC%82%AC%EC%9A%A9%EC%9E%90_%EC%84%A4%EC%A0%95\"><\/span>\uc0ac\uc6a9\uc790 \uc124\uc815<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>boxClass:<\/strong><span>\u00a0<\/span>\uc0ac\uc6a9\uc790\uac00 \uc2a4\ud06c\ub864 \ud560 \ub54c \uc228\uaca8\uc9c4 box\ub97c \ud45c\uc2dc\ud558\ub294 \ud074\ub798\uc2a4 \uc774\ub984\uc774\ub2e4.<\/li>\n<li><strong>animateClass:<\/strong><span>\u00a0<\/span>CSS \uc560\ub2c8\uba54\uc774\uc158\uc744 \ud2b8\ub9ac\uac70\ud558\ub294 \ud074\ub798\uc2a4 \uc774\ub984 (\uae30\ubcf8\uc801\uc73c\ub85c animate.css \ub77c\uc774\ube0c\ub7ec\ub9ac\uc758 &#8216;animated&#8217;\uc774\ub2e4.)<\/li>\n<li><strong>offset:<\/strong><span>\u00a0<\/span>\ube0c\ub77c\uc6b0\uc800 \ubdf0\ud3ec\ud2b8\uc758 \ud558\ub2e8\uacfc \uc228\uaca8\uc9c4 \uc0c1\uc790\uc758 \uc0c1\ub2e8 \uc0ac\uc774\uc758 \uac70\ub9ac\ub97c \uc815\uc758\ud55c\ub2e4.<br \/>\n\uc0ac\uc6a9\uc790\uac00 \uc2a4\ud06c\ub864\ud558\uc5ec \uc774 \uac70\ub9ac\uc5d0 \ub3c4\ub2ec\ud558\uba74 \uc228\uaca8\uc9c4 \uc0c1\uc790\uac00 \ud45c\uc2dc\ub41c\ub2e4.<\/li>\n<li><strong>mobile:<\/strong><span>\u00a0<\/span>\ubaa8\ubc14\uc77c \uae30\uae30\uc5d0\uc11c WOW.js\ub97c \ucf1c\uac70\ub098 \ub04c \uc218 \uc788\ub2e4.<\/li>\n<li><strong>live:<\/strong><span>\u00a0<\/span>\ud398\uc774\uc9c0\uc5d0\uc11c \uc0c8\ub85c\uc6b4 WOW \uc694\uc18c\ub97c \uc8fc\uc758\uae4a\uac8c \ud655\uc778\ud560 \uc218 \uc788\ub2e4.<\/li>\n<\/ul>\n<div class=\"hcb_wrap\">\n<pre class=\"prism undefined-numbers lang-js\" data-lang=\"JavaScript\"><code>wow = new WOW({ boxClass: 'wow', \/\/ \uae30\ubcf8\uac12 animateClass: 'animated', \/\/ \uae30\ubcf8\uac12 offset: 0, \/\/ \uae30\ubcf8\uac12 mobile: true, \/\/ \uae30\ubcf8\uac12 live: true \/\/ \uae30\ubcf8\uac12 }) wow.init();<\/code><\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\uc7a5\uc810 Scrollorama\uc640 \uac19\uc740 \ub2e4\ub978 JavaScript \uc2dc\ucc28 \ud50c\ub7ec\uadf8\uc778\ubcf4\ub2e4 \uc791\uc2b5\ub2c8\ub2e4 (\ud658\uc0c1\uc801\uc778 \uc77c\uc744\ud558\uc9c0\ub9cc \ub2e8\uc21c\ud55c \uc694\uad6c\uc5d0 \ub108\ubb34 \ubb34\uac70\uc6b8 \uc218 \uc788\uc74c) \uac04\ub2e8\ud788 \uc124\uce58\ud558\uace0 animate.css\uc640 \ud568\uaed8 \uc0ac\uc6a9\ud558\ubbc0\ub85c \uc124\uc815\uc774 \ub9e4\uc6b0 \ube60\ub974\ub2e4. \ube60\ub978 \uc2e4\ud589\uc774 \uac00\ub2a5\ud558\uace0 \ucf54\ub4dc\uac00 \uac00\ubccd\ub2e4. \uc124\uc815\uc744&#8230;<\/p>\n","protected":false},"author":1,"featured_media":6366,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32],"tags":[47,48,49],"class_list":["post-6346","post","type-post","status-publish","format-standard","has-post-thumbnail","category-32","tag-animate","tag-code","tag-wow"],"_links":{"self":[{"href":"https:\/\/pohang.eduwp.kr\/index.php?rest_route=\/wp\/v2\/posts\/6346","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pohang.eduwp.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pohang.eduwp.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pohang.eduwp.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pohang.eduwp.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6346"}],"version-history":[{"count":1,"href":"https:\/\/pohang.eduwp.kr\/index.php?rest_route=\/wp\/v2\/posts\/6346\/revisions"}],"predecessor-version":[{"id":7143,"href":"https:\/\/pohang.eduwp.kr\/index.php?rest_route=\/wp\/v2\/posts\/6346\/revisions\/7143"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pohang.eduwp.kr\/index.php?rest_route=\/wp\/v2\/media\/6366"}],"wp:attachment":[{"href":"https:\/\/pohang.eduwp.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6346"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pohang.eduwp.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6346"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pohang.eduwp.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}