{"id":1332,"date":"2016-04-15T09:43:52","date_gmt":"2016-04-15T09:43:52","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=1332"},"modified":"2023-11-18T02:38:39","modified_gmt":"2023-11-18T02:38:39","slug":"animate-html-elements-by-jquery-plug-in","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/animate-html-elements-by-jquery-plug-in\/","title":{"rendered":"Animate HTML Elements by jQuery plug-in"},"content":{"rendered":"

Animating HTML elements<\/strong><\/h3>\n

In jQuery animate method\u2019s<\/a> tutorial, I showed how you can use the $.animate method for simple animations of HTML elements like a div, circle, and other UI elements.<\/p>\n

Similarly, in the free template section<\/a>, I used animate.css<\/em> plug-in for creating animations in different elements that used different effects like bounceIn<\/em>, bounceOut,<\/em> etc. However, only a single animation can be applied by using that CSS plug-in.<\/p>\n

In this tutorial, I will show you how to apply multiple animations on single and multiple group elements by using animate-plus<\/em> plug-in.<\/p>\n

This plug-in<\/a> also uses animate.css<\/em> underway and adds more useful features that I will show you with live examples. At the bottom, you can also see simple steps for setting up this cool plug-in to use on your web pages.<\/p>\n

An example of continuous animation of div tag<\/strong><\/h3>\n

In this example, the text in the div tag is animated continuously by using the plug-in. The text is animated by using the bounceIn<\/strong> <\/em>and flash values of animate.css.<\/p>\n

\"jQuery<\/p>\n

The code:<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.1\/jquery.min.js\"><\/script>\r\n<link rel=\"stylesheet\" href=\"css\/animate.css\" \/>\r\n<script type=\"text\/javascript\" src=\"js\/animate-plus.js\"><\/script>\r\n\r\n\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"animate-plus\" data-animations=\"bounceIn,flash\" data-animation-repeat=\"true\">An animate-plus plug-in demo<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
So, in the data-animations<\/em> attribute, you may specify one or more animation values. In order to repeat the animation, the data-animation-repeat<\/em> value is kept true<\/strong><\/em>.<\/p>\n
Also, in order to use animate-plus, you have to refer to the animate-plus<\/em> class in the HTML tag.<\/p>\n
Animating a group of elements demo<\/strong><\/h3>\n
The added feature enables animation for the group of elements. For example, if you have two div or span tags, you may use the data-animation-group<\/em> attribute in both tags and create a grouped animation.<\/p>\n
\"jQuery<\/p>\n
Example code:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.1\/jquery.min.js\"><\/script>\r\n<link rel=\"stylesheet\" href=\"css\/animate.css\" \/>\r\n<script type=\"text\/javascript\" src=\"js\/animate-plus.js\"><\/script>\r\n\r\n\r\n<\/head>\r\n<body>\r\n<span\r\n    class=\"animate-plus\"\r\n    data-animation-group=\"grpanimation\"\r\n    data-animations=\"fadeInUp, flip\"\r\n    data-animation-order=\"1,4\"\r\n>\r\n    A group animation demo | \r\n<\/span>\r\n\r\n<span\r\n    class=\"animate-plus\"\r\n    data-animation-group=\"grpanimation\"\r\n    data-animations=\"fadeInRight, rotateIn\"\r\n    data-animation-order=\"2,3\"\r\n>\r\n    Animation No 2\r\n<\/span>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
One of the features is, you may set the order of animations by using the data-animation-order<\/em> attribute.<\/p>\n
In the above example, the first <span> tag has two animations: fadeInUp and flip<\/em>. While its animation order is 1 and 4.<\/p>\n
The second span tag is also given two animation values: fadeInRight and rotateIn<\/em> and the order is 2 and 3.<\/p>\n
As the demo page is loaded, the fadeInUp<\/em> animation will execute for the first <span> element. This will be followed by fadeInRight<\/em> animation for second <span> element. Then comes the rotateIn<\/em> for the second <span> tag and finally flip<\/em> will execute for the first <span> element.<\/p>\n
A demo of delaying animation in group elements<\/strong><\/h3>\n
Just extending the above demo and adding another option i.e. data-animation-delay<\/em>. This will delay the animation for the specified element. Take care of the order carefully, for what you want to apply delay for.<\/p>\n
See the delay example where the second <span> tag\u2019s animation will start with a gap of 1 and 2 seconds, respectively:<\/p>\n
Code:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.1\/jquery.min.js\"><\/script>\r\n<link rel=\"stylesheet\" href=\"css\/animate.css\" \/>\r\n<script type=\"text\/javascript\" src=\"js\/animate-plus.js\"><\/script>\r\n\r\n\r\n<\/head>\r\n<body>\r\n<span\r\n    class=\"animate-plus\"\r\n    data-animation-group=\"grpanimation\"\r\n    data-animations=\"fadeInUp, flip\"\r\n    data-animation-order=\"1,4\"\r\n>\r\n    A group animation demo | \r\n<\/span>\r\n\r\n<span\r\n    class=\"animate-plus\"\r\n    data-animation-group=\"grpanimation\"\r\n    data-animations=\"fadeInRight, rotateIn\"\r\n    data-animation-order=\"2,3\"\r\n    data-animation-delay=\"1s,2s\"\r\n>\r\n    Animation No 2\r\n<\/span>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
A demo of animating elements with scroll<\/strong><\/h3>\n
In certain designs, animating a logo or some text as the element becomes visible after scrolling the screen adds a good impression and gets the user\u2019s attention.<\/p>\n
You may add this option by using the data-animation-when-visible = \u201ctrue\u201d<\/em> attribute.<\/p>\n
A div with appropriate height is created for the sake of a demo page showing the vertical scroll bar. As you scroll down, the text in the <span> tag animates. If you go up and scroll down again, the text in span will animate again by using these attributes:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.1\/jquery.min.js\"><\/script>\r\n<link rel=\"stylesheet\" href=\"css\/animate.css\" \/>\r\n<script type=\"text\/javascript\" src=\"js\/animate-plus.js\"><\/script>\r\n\r\n<style>\r\n.divcls{\r\n    height:700px;\r\n}\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n<body>\r\n<div class=\"divcls\">Scroll down for animating span text<\/div>\r\n\r\n<span\r\n    class=\"animate-plus\"\r\n    data-animations=\"fadeInRight, rotateIn\"\r\n    data-animation-when-visible=\"true\"\r\n    data-animation-reset-offscreen=\"true\"\r\n>\r\n    This text animates as visible on screen\r\n<\/span>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
A more practice example \u2013 Using with Bootstrap\u2019s navbar<\/strong><\/h3>\n
The above examples are simple text animations in the div or span tag. In this example, I am using the top bar of a free theme available on this website, choco-bar<\/a>, which is based on Bootstrap framework.<\/p>\n
For the demo, I am using only the top navbar where the logo area and menu items are given animations by using the animate-plug plug-in. The logo\/business name area\u2019s text will keep on animating continuously with a delay of one second.<\/p>\n
Whereas, the menu items will animate as the web page loads. A div element is given the height for the vertical scroll bar. As you get down and scroll back on top till menu bar is visible, the menu items will appear with animations again. Have a look at the demo:<\/p>\n
\"jQuery<\/a><\/p>\n
See online demo<\/a><\/strong><\/h6>\n
The code used for the menu bar\u2019s business name and menu items:<\/p>\n
<a class=\"navbar-brand bizname animate-plus\" data-animations=\"zoomIn\" data-animation-repeat=\"true\" data-animation-delay=\"1s\" href=\"#main-carousel\">Choco Bar<\/a>\r\n\r\n<div class=\"collapse navbar-collapse scrollspy smooth-scroll \" id=\"nav-collapse\">\r\n\r\n<ul class=\"nav navbar-nav navbar-left animate-plus\" data-animations=\"zoomIn\" data-animation-when-visible=\"true\" data-animation-reset-offscreen=\"true\">\r\n\r\n<li class=\"active\"><a href=\"#main-carousel\">Home<\/a><\/li>\r\n\r\n<li ><a href=\"#specialities\">Specialities<\/a><\/li>\r\n\r\n<li><a href=\"#custfeedback\">Feedback<\/a><\/li>\r\n\r\n<li><a href=\"#recipes\">Recipes<\/a><\/li>\r\n\r\n<li><a href=\"#products\">Products<\/a><\/li>\r\n\r\n<li><a href=\"#enquiry\">Order<\/a><\/li>\r\n\r\n<li><a href=\"#\">Download Theme<\/a><\/li>\r\n\r\n<\/ul>\r\n\r\n<\/div><\/pre>\n
See the complete code of navbar of Bootstrap<\/a> with animations in the demo page\u2019s view source.<\/p>\n
Setting up animate-plus plug-in for your web projects<\/strong><\/h3>\n
You need to include the .js file of the plug-in (animate-plus.js) in the desired folder and refer it in the <head> or <body> section after jQuery and animate.css file. This is how I referred in demo pages:<\/p>\n
<script src=”http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.1\/jquery.min.js”><\/script><\/p>\n
<link rel=”stylesheet” href=”css\/animate.css” \/><\/p>\n
<script type=”text\/javascript” src=”js\/animate-plus.js”><\/script><\/p><\/blockquote>\n
That\u2019s it!<\/p>\n","protected":false},"excerpt":{"rendered":"
Animating HTML elements In jQuery animate method\u2019s tutorial, I showed how you can use the $.animate method for simple animations of HTML elements like a div, circle, and other UI elements. Similarly, in the free template section, I used animate.css plug-in for creating animations in different elements that used different effects like bounceIn, bounceOut, etc. … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":1335,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[41],"yoast_head":"\nAnimate HTML Elements by jQuery plug-in<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/animate-html-elements-by-jquery-plug-in\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animate HTML Elements by jQuery plug-in\" \/>\n<meta property=\"og:description\" content=\"Animating HTML elements In jQuery animate method\u2019s tutorial, I showed how you can use the $.animate method for simple animations of HTML elements like a div, circle, and other UI elements. Similarly, in the free template section, I used animate.css plug-in for creating animations in different elements that used different effects like bounceIn, bounceOut, etc. ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/animate-html-elements-by-jquery-plug-in\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-15T09:43:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-18T02:38:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/04\/33.0_3-jQuery-animate-boots.png\" \/>\n\t<meta property=\"og:image:width\" content=\"981\" \/>\n\t<meta property=\"og:image:height\" content=\"55\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/animate-html-elements-by-jquery-plug-in\/\",\"url\":\"https:\/\/www.jquery-az.com\/animate-html-elements-by-jquery-plug-in\/\",\"name\":\"Animate HTML Elements by jQuery plug-in\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-04-15T09:43:52+00:00\",\"dateModified\":\"2023-11-18T02:38:39+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/animate-html-elements-by-jquery-plug-in\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/animate-html-elements-by-jquery-plug-in\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/animate-html-elements-by-jquery-plug-in\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animate HTML Elements by jQuery plug-in\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Animate HTML Elements by jQuery plug-in","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/animate-html-elements-by-jquery-plug-in\/","og_locale":"en_US","og_type":"article","og_title":"Animate HTML Elements by jQuery plug-in","og_description":"Animating HTML elements In jQuery animate method\u2019s tutorial, I showed how you can use the $.animate method for simple animations of HTML elements like a div, circle, and other UI elements. Similarly, in the free template section, I used animate.css plug-in for creating animations in different elements that used different effects like bounceIn, bounceOut, etc. ... Read more","og_url":"https:\/\/www.jquery-az.com\/animate-html-elements-by-jquery-plug-in\/","article_published_time":"2016-04-15T09:43:52+00:00","article_modified_time":"2023-11-18T02:38:39+00:00","og_image":[{"width":981,"height":55,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/04\/33.0_3-jQuery-animate-boots.png","type":"image\/png"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/animate-html-elements-by-jquery-plug-in\/","url":"https:\/\/www.jquery-az.com\/animate-html-elements-by-jquery-plug-in\/","name":"Animate HTML Elements by jQuery plug-in","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-04-15T09:43:52+00:00","dateModified":"2023-11-18T02:38:39+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/animate-html-elements-by-jquery-plug-in\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/animate-html-elements-by-jquery-plug-in\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/animate-html-elements-by-jquery-plug-in\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"Animate HTML Elements by jQuery plug-in"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1332"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=1332"}],"version-history":[{"count":5,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1332\/revisions"}],"predecessor-version":[{"id":11410,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1332\/revisions\/11410"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/1335"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=1332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=1332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=1332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}