{"id":1182,"date":"2014-05-02T23:10:48","date_gmt":"2014-05-03T04:10:48","guid":{"rendered":"https:\/\/webdesignerwall.com\/?p=1182"},"modified":"2016-11-17T12:02:54","modified_gmt":"2016-11-17T17:02:54","slug":"animating-background-colors","status":"publish","type":"post","link":"https:\/\/webdesignerwall.com\/tutorials\/animating-background-colors","title":{"rendered":"Animating Background Colors"},"content":{"rendered":"<p>As promised in my previous <a href=\"https:\/\/webdesignerwall.com\/general\/themify-is-redesigned\">post<\/a>, I will be sharing some of the scripts used on the <a href=\"http:\/\/themify.me\">Themify<\/a> redesign. Today I&#8217;m going to share the animating background color script as seen on the site. It is a simple jQuery script that animates a series of background colors in a loop. It runs smoothly on desktop, tablet, and even mobile devices.<\/p>\n<p class=\"btn preview left\"><a href=\"https:\/\/webdesignerwall.com\/demo\/animating-bg-colors\/\">View Demo <span>Animating BG Colors<\/span><\/a><\/p>\n<p class=\"btn download\"><a href=\"https:\/\/webdesignerwall.com\/file\/animating-bg-colors.zip\" title=\"Download source files\">Download <span> Demo ZIP<\/span><\/a><br \/>\n<!--more --><\/p>\n<h3>Required Javascripts<\/h3>\n<p>It requires jQuery, jQuery UI, and the animated_bg.js script.<\/p>\n<ul>\n<li>jQuery<\/li>\n<li>jQuery UI<\/li>\n<li>animated_bg.js<\/li>\n<\/ul>\n<h3>How To Use It<\/h3>\n<h4>1. Include the scripts<\/h4>\n<p>Include the required Javascripts in the page.<\/p>\n<pre><code>\r\n&lt;script src=\"js\/jquery-1.11.0.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"js\/jquery-ui.min.js\"&gt;&lt;\/script&gt; \r\n&lt;script src=\"js\/animated_bg.js\"&gt;&lt;\/script&gt;\r\n<\/code><\/pre>\n<h4>Add .animated_bg class<\/h4>\n<p>Then add animated_bg class to any element where you want the animating background color function to appear. It can be added in html, body, link, heading, div, form elements, etc. It literally works on any element!<\/p>\n<pre><code>\r\n&lt;div class=\"animated_bg\"&gt;\r\n\tcontent\r\n&lt;\/div&gt; \r\n<\/code><\/pre>\n<h4>Custom animating colors<\/h4>\n<p>You can add your own custom colors and animation speed. In the sample code below, I&#8217;ve added .animated_bg2 and .animated_bg3 to show different colors and speed. Add as many colors as you want.<\/p>\n<pre><code>\r\n&lt;script&gt;\r\n\tjQuery(document).ready(function(){\r\n\r\n\t\t$('.animated_bg2').animatedBG({\r\n\t\t\tcolorSet: ['#abebfe', '#aad667', '#57e6ee', '#ff7ebb'],\r\n\t\t\tspeed: 2000\r\n\t\t});\r\n\r\n\t\t$('.animated_bg3').animatedBG({\r\n\t\t\tcolorSet: ['#71a98b', '#b15c8e', '#dc6b68', '#6c5a94', '#b14c4e', '#736357'],\r\n\t\t\tspeed: 6000\r\n\t\t});\r\n\r\n\t});\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\n<h3>CSS Fallback<\/h3>\n<p>In the CSS, specify the background color of the element to be the same as the first color of the animation. In case Javascript fails, it will fallback to the CSS background-color property.<\/p>\n<pre><code>\r\n\/* set bg color same as the first color defined in the animation function *\/\r\n.animated_bg {\r\n\tbackground: #ef008c; \r\n\tcolor: #fff;\r\n}\r\n.animated_bg2 {\r\n\tbackground: #abebfe; \r\n\tcolor: #000;\r\n}\r\n.animated_bg3 {\r\n\tbackground: #71a98b; \r\n\tcolor: #fff;\r\n}\r\n<\/code><\/pre>\n<h3>Have Fun!<\/h3>\n<p>View final <a href=\"https:\/\/webdesignerwall.com\/demo\/animating-bg-colors\/\">demo<\/a> or download the <a href=\"https:\/\/webdesignerwall.com\/file\/animating-bg-colors.zi\">demo zip<\/a>. Feel free to use this script for your projects or any purpose. If you would like to provide credits, please link it to this article or <a href=\"http:\/\/themify.me\">themify.me<\/a> site.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As promised in my previous post, I will be sharing some of the scripts used on the Themify redesign. Today I&#8217;m going to share the animating background color script as seen on the site. It is a simple jQuery script that animates a series of background colors in a loop. It runs smoothly on desktop, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4111,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[31,1],"tags":[6,30],"class_list":["post-1182","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-featured","category-tutorials","tag-design","tag-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Animating Background Colors - Web Designer Wall<\/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:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/animating-background-colors\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animating Background Colors - Web Designer Wall\" \/>\n<meta property=\"og:description\" content=\"As promised in my previous post, I will be sharing some of the scripts used on the Themify redesign. Today I&#8217;m going to share the animating background color script as seen on the site. It is a simple jQuery script that animates a series of background colors in a loop. It runs smoothly on desktop, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/animating-background-colors\" \/>\n<meta property=\"og:site_name\" content=\"Web Designer Wall\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webdesignerwall\" \/>\n<meta property=\"article:published_time\" content=\"2014-05-03T04:10:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-11-17T17:02:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdesignerwall.mystagingwebsite.com\/wp-content\/uploads\/2014\/05\/animated-backgrounds.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1900\" \/>\n\t<meta property=\"og:image:height\" content=\"802\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Aigars Silkalns\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@nickla\" \/>\n<meta name=\"twitter:site\" content=\"@nickla\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aigars Silkalns\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/animating-background-colors\",\"url\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/animating-background-colors\",\"name\":\"Animating Background Colors - Web Designer Wall\",\"isPartOf\":{\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/animating-background-colors#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/animating-background-colors#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesignerwall.com\/wp-content\/uploads\/2014\/05\/animated-backgrounds.jpg\",\"datePublished\":\"2014-05-03T04:10:48+00:00\",\"dateModified\":\"2016-11-17T17:02:54+00:00\",\"author\":{\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/#\/schema\/person\/9c6a1ce807a45918d4157d0497157c84\"},\"breadcrumb\":{\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/animating-background-colors#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/animating-background-colors\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/animating-background-colors#primaryimage\",\"url\":\"https:\/\/webdesignerwall.com\/wp-content\/uploads\/2014\/05\/animated-backgrounds.jpg\",\"contentUrl\":\"https:\/\/webdesignerwall.com\/wp-content\/uploads\/2014\/05\/animated-backgrounds.jpg\",\"width\":1900,\"height\":802},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/animating-background-colors#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animating Background Colors\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/#website\",\"url\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/\",\"name\":\"Web Designer Wall\",\"description\":\"Design Trends and Tutorials - A wall of design ideas, web trends, and tutorials.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/#\/schema\/person\/9c6a1ce807a45918d4157d0497157c84\",\"name\":\"Aigars Silkalns\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesignerwall.mystagingwebsite.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g\",\"caption\":\"Aigars Silkalns\"},\"sameAs\":[\"https:\/\/webdesignerwall.mystagingwebsite.com\"],\"url\":\"https:\/\/webdesignerwall.com\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Animating Background Colors - Web Designer Wall","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:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/animating-background-colors","og_locale":"en_US","og_type":"article","og_title":"Animating Background Colors - Web Designer Wall","og_description":"As promised in my previous post, I will be sharing some of the scripts used on the Themify redesign. Today I&#8217;m going to share the animating background color script as seen on the site. It is a simple jQuery script that animates a series of background colors in a loop. It runs smoothly on desktop, [&hellip;]","og_url":"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/animating-background-colors","og_site_name":"Web Designer Wall","article_publisher":"https:\/\/www.facebook.com\/webdesignerwall","article_published_time":"2014-05-03T04:10:48+00:00","article_modified_time":"2016-11-17T17:02:54+00:00","og_image":[{"width":1900,"height":802,"url":"https:\/\/webdesignerwall.mystagingwebsite.com\/wp-content\/uploads\/2014\/05\/animated-backgrounds.jpg","type":"image\/jpeg"}],"author":"Aigars Silkalns","twitter_card":"summary_large_image","twitter_creator":"@nickla","twitter_site":"@nickla","twitter_misc":{"Written by":"Aigars Silkalns","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/animating-background-colors","url":"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/animating-background-colors","name":"Animating Background Colors - Web Designer Wall","isPartOf":{"@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/animating-background-colors#primaryimage"},"image":{"@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/animating-background-colors#primaryimage"},"thumbnailUrl":"https:\/\/webdesignerwall.com\/wp-content\/uploads\/2014\/05\/animated-backgrounds.jpg","datePublished":"2014-05-03T04:10:48+00:00","dateModified":"2016-11-17T17:02:54+00:00","author":{"@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/#\/schema\/person\/9c6a1ce807a45918d4157d0497157c84"},"breadcrumb":{"@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/animating-background-colors#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/animating-background-colors"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/animating-background-colors#primaryimage","url":"https:\/\/webdesignerwall.com\/wp-content\/uploads\/2014\/05\/animated-backgrounds.jpg","contentUrl":"https:\/\/webdesignerwall.com\/wp-content\/uploads\/2014\/05\/animated-backgrounds.jpg","width":1900,"height":802},{"@type":"BreadcrumbList","@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/tutorials\/animating-background-colors#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdesignerwall.mystagingwebsite.com\/"},{"@type":"ListItem","position":2,"name":"Animating Background Colors"}]},{"@type":"WebSite","@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/#website","url":"https:\/\/webdesignerwall.mystagingwebsite.com\/","name":"Web Designer Wall","description":"Design Trends and Tutorials - A wall of design ideas, web trends, and tutorials.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdesignerwall.mystagingwebsite.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/#\/schema\/person\/9c6a1ce807a45918d4157d0497157c84","name":"Aigars Silkalns","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesignerwall.mystagingwebsite.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g","caption":"Aigars Silkalns"},"sameAs":["https:\/\/webdesignerwall.mystagingwebsite.com"],"url":"https:\/\/webdesignerwall.com\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/posts\/1182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/comments?post=1182"}],"version-history":[{"count":3,"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/posts\/1182\/revisions"}],"predecessor-version":[{"id":1185,"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/posts\/1182\/revisions\/1185"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/media\/4111"}],"wp:attachment":[{"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/media?parent=1182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/categories?post=1182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdesignerwall.com\/wp-json\/wp\/v2\/tags?post=1182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}