{"id":2767,"date":"2017-12-12T12:18:57","date_gmt":"2017-12-12T06:48:57","guid":{"rendered":"https:\/\/cns72.com\/vytcdc.com.sg\/?p=2767"},"modified":"2019-11-20T12:13:14","modified_gmt":"2019-11-20T06:43:14","slug":"wow-js","status":"publish","type":"post","link":"https:\/\/cns72.com\/vytcdc.com.sg\/wow-js\/","title":{"rendered":"WOW.js"},"content":{"rendered":"<p>Reveal CSS animation as you scroll down a page. By default, you can use it to trigger <a href=\"https:\/\/github.com\/daneden\/animate.css\">animate.css<\/a> animations. But you can easily change the settings to your favorite animation library.<\/p>\n<p>Advantages:<\/p>\n<ul>\n<li>Smaller than other JavaScript parallax plugins, like Scrollorama (they do fantastic things, but can be too heavy for simple needs)<\/li>\n<li>Super simple to install, and works with animate.css, so if you already use it, that will be very fast to setup<\/li>\n<li>Fast execution and lightweight code: the browser will like it \ud83d\ude09<\/li>\n<\/ul>\n<h2>License<\/h2>\n<h3><a id=\"user-content-commercial-license\" class=\"anchor\" href=\"https:\/\/github.com\/matthieua\/WOW#commercial-license\" aria-hidden=\"true\"><\/a>Commercial license<\/h3>\n<p>If you want to use WOW.js to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase a WOW.js Commercial License at <a href=\"http:\/\/www.uplabs.com\/posts\/wow-js-commercial?utm_source=wow&amp;utm_medium=pricing&amp;utm_campaign=wow\">uplabs.com\/posts\/wow-js-commercial<\/a><\/p>\n<h3><a id=\"user-content-open-source-license\" class=\"anchor\" href=\"https:\/\/github.com\/matthieua\/WOW#open-source-license\" aria-hidden=\"true\"><\/a>Open source license<\/h3>\n<p>If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use this project under the terms of the GPLv3.<\/p>\n<h3>Basic usage<\/h3>\n<p>In order to hide all elements when they are supposed to be hidden. (Anti Flickering)<\/p>\n<ul>\n<li>CSS .wow { visibility: hidden; }<\/li>\n<li>HTML<\/li>\n<\/ul>\n<div class=\"highlight highlight-text-html-basic\">\n<pre>  &lt;<span class=\"pl-ent\">section<\/span> <span class=\"pl-e\">class<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>wow slideInLeft<span class=\"pl-pds\">\"<\/span><\/span>&gt;&lt;\/<span class=\"pl-ent\">section<\/span>&gt;\r\n  &lt;<span class=\"pl-ent\">section<\/span> <span class=\"pl-e\">class<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>wow slideInRight<span class=\"pl-pds\">\"<\/span><\/span>&gt;&lt;\/<span class=\"pl-ent\">section<\/span>&gt;<\/pre>\n<\/div>\n<ul>\n<li>JavaScript<\/li>\n<\/ul>\n<div class=\"highlight highlight-source-js\">\n<pre><span class=\"pl-k\">new<\/span> <span class=\"pl-en\">WOW<\/span>().<span class=\"pl-en\">init<\/span>();\r\n\r\n<\/pre>\n<h3>Advanced usage<\/h3>\n<ul>\n<li>HTML<\/li>\n<\/ul>\n<div class=\"highlight highlight-text-html-basic\">\n<pre>  &lt;<span class=\"pl-ent\">section<\/span> <span class=\"pl-e\">class<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>wow slideInLeft<span class=\"pl-pds\">\"<\/span><\/span> <span class=\"pl-e\">data-wow-duration<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>2s<span class=\"pl-pds\">\"<\/span><\/span> <span class=\"pl-e\">data-wow-delay<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>5s<span class=\"pl-pds\">\"<\/span><\/span>&gt;&lt;\/<span class=\"pl-ent\">section<\/span>&gt;\r\n  &lt;<span class=\"pl-ent\">section<\/span> <span class=\"pl-e\">class<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>wow slideInRight<span class=\"pl-pds\">\"<\/span><\/span> <span class=\"pl-e\">data-wow-offset<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>10<span class=\"pl-pds\">\"<\/span><\/span>  <span class=\"pl-e\">data-wow-iteration<\/span>=<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>10<span class=\"pl-pds\">\"<\/span><\/span>&gt;&lt;\/<span class=\"pl-ent\">section<\/span>&gt;<\/pre>\n<\/div>\n<ul>\n<li>JavaScript<\/li>\n<\/ul>\n<div class=\"highlight highlight-source-js\">\n<pre><span class=\"pl-k\">var<\/span> wow <span class=\"pl-k\">=<\/span> <span class=\"pl-k\">new<\/span> <span class=\"pl-en\">WOW<\/span>(\r\n  {\r\n    boxClass<span class=\"pl-k\">:<\/span>     <span class=\"pl-s\"><span class=\"pl-pds\">'<\/span>wow<span class=\"pl-pds\">'<\/span><\/span>,      <span class=\"pl-c\">\/\/ animated element css class (default is wow)<\/span>\r\n    animateClass<span class=\"pl-k\">:<\/span> <span class=\"pl-s\"><span class=\"pl-pds\">'<\/span>animated<span class=\"pl-pds\">'<\/span><\/span>, <span class=\"pl-c\">\/\/ animation css class (default is animated)<\/span>\r\n    offset<span class=\"pl-k\">:<\/span>       <span class=\"pl-c1\">0<\/span>,          <span class=\"pl-c\">\/\/ distance to the element when triggering the animation (default is 0)<\/span>\r\n    mobile<span class=\"pl-k\">:<\/span>       <span class=\"pl-c1\">true<\/span>,       <span class=\"pl-c\">\/\/ trigger animations on mobile devices (default is true)<\/span>\r\n    live<span class=\"pl-k\">:<\/span>         <span class=\"pl-c1\">true<\/span>,       <span class=\"pl-c\">\/\/ act on asynchronously loaded content (default is true)<\/span>\r\n    <span class=\"pl-en\">callback<\/span><span class=\"pl-k\">:<\/span>     <span class=\"pl-k\">function<\/span>(<span class=\"pl-smi\">box<\/span>) {\r\n      <span class=\"pl-c\">\/\/ the callback is fired every time an animation is started<\/span>\r\n      <span class=\"pl-c\">\/\/ the argument that is passed in is the DOM node being animated<\/span>\r\n    },\r\n    scrollContainer<span class=\"pl-k\">:<\/span> <span class=\"pl-c1\">null<\/span> <span class=\"pl-c\">\/\/ optional scroll container selector, otherwise use window<\/span>\r\n  }\r\n);\r\n<span class=\"pl-smi\">wow<\/span>.<span class=\"pl-en\">init<\/span>();<\/pre>\n<\/div>\n<h3><a id=\"user-content-asynchronous-content-support\" class=\"anchor\" href=\"https:\/\/github.com\/matthieua\/WOW#asynchronous-content-support\" aria-hidden=\"true\"><\/a>Asynchronous content support<\/h3>\n<p>In IE 10+, Chrome 18+ and Firefox 14+, animations will be automatically triggered for any DOM nodes you add after calling <code>wow.init()<\/code>. If you do not like that, you can disable this by setting <code>live<\/code> to <code>false<\/code>.<\/p>\n<p>If you want to support older browsers (e.g. IE9+), as a fallback, you can call the <code>wow.sync()<\/code> method after you have added new DOM elements to animate (but <code>live<\/code> should still be set to <code>true<\/code>). Calling <code>wow.sync()<\/code> has no side effects.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Reveal CSS animation as you scroll down a page. By default, you can use it to trigger animate.css animations. But you can easily change the settings to your favorite animation library. Advantages: Smaller than other JavaScript parallax plugins, like Scrollorama (they do fantastic things, but can be too heavy for simple needs) Super simple to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2768,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[45],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.0.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WOW.js - TCDC<\/title>\n<link rel=\"canonical\" href=\"https:\/\/cns72.com\/vytcdc.com.sg\/wow-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WOW.js - TCDC\" \/>\n<meta property=\"og:description\" content=\"Reveal CSS animation as you scroll down a page. By default, you can use it to trigger animate.css animations. But you can easily change the settings to your favorite animation library. Advantages: Smaller than other JavaScript parallax plugins, like Scrollorama (they do fantastic things, but can be too heavy for simple needs) Super simple to [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cns72.com\/vytcdc.com.sg\/wow-js\/\" \/>\n<meta property=\"og:site_name\" content=\"TCDC\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vytcdc\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-12T06:48:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-20T06:43:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cns72.com\/vytcdc.com.sg\/wp-content\/uploads\/2017\/12\/wow-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"523\" \/>\n\t<meta property=\"og:image:height\" content=\"177\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vytcdc\" \/>\n<meta name=\"twitter:site\" content=\"@vytcdc\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"2 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/#website\",\"url\":\"https:\/\/cns72.com\/vytcdc.com.sg\/\",\"name\":\"TCDC\",\"description\":\"Career Development Courses\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/cns72.com\/vytcdc.com.sg\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/wow-js\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/cns72.com\/vytcdc.com.sg\/wp-content\/uploads\/2017\/12\/wow-logo.jpg\",\"width\":523,\"height\":177},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/wow-js\/#webpage\",\"url\":\"https:\/\/cns72.com\/vytcdc.com.sg\/wow-js\/\",\"name\":\"WOW.js - TCDC\",\"isPartOf\":{\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/wow-js\/#primaryimage\"},\"datePublished\":\"2017-12-12T06:48:57+00:00\",\"dateModified\":\"2019-11-20T06:43:14+00:00\",\"author\":{\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/#\/schema\/person\/c57e5f7b91685a93f23a57aaafd38e82\"},\"breadcrumb\":{\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/wow-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cns72.com\/vytcdc.com.sg\/wow-js\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/wow-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/\",\"url\":\"https:\/\/cns72.com\/vytcdc.com.sg\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/wow-js\/\",\"url\":\"https:\/\/cns72.com\/vytcdc.com.sg\/wow-js\/\",\"name\":\"WOW.js\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/#\/schema\/person\/c57e5f7b91685a93f23a57aaafd38e82\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f8f959f70994a4401c8704d6b2143474?s=96&d=mm&r=g\",\"caption\":\"admin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/posts\/2767"}],"collection":[{"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/comments?post=2767"}],"version-history":[{"count":0,"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/posts\/2767\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/media\/2768"}],"wp:attachment":[{"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/media?parent=2767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/categories?post=2767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/tags?post=2767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}