Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Background & Effects >> Animating Background Colors


Code Snippet </> Info


Snippet Name: Animating Background Colors

Description: Create eye catching animating background color changing effects to your page.
Example: View Code Demo

Note:

Author: Nick La

Last Modified: 2015-08-26 21:36:50

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!doctype html> <head> <title>HTML5 CSS3 Animating Background Colors</title> <style> /* Begin HTML5 CSS3 Animating Background Colors */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ /* == Created by: Nick La : http://webdesignerwall.com/tutorials/animating-background-colors : Creative Commons License == */ body {font:normal 1em/1.7em Arial, Helvetica, sans-serif; text-align:center;} a {text-decoration:none;} h1, h2, h3 {font-weight:normal;margin:0 0 1em;line-height:1.2em;} h1 {font-size:2.2em;margin-bottom:.3em;} p {margin:0 0 2em;} .container {background:#fff;color:#aaa;width:800px;max-width:84%;margin:10% auto;padding:5%;border-radius:5px;} .credits {font-size:.85em;margin-bottom:3em;} .credits em {font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;display:block;margin:0 0 1em;} .credits a {text-transform:uppercase;border:solid #eee;border-width:1px 0;padding:10px 1.6em;letter-spacing:2px;} .container h1, .container a {color:#000;} .box {padding:20% 10%;margin:20px 0;} a.button {display:inline-block;text-decoration:none;font-weight:bold;font-size:1.1em;text-transform:uppercase;color:#fff;padding:1em 1.5em;border-radius:5px;} /* set bg color same as the first color defined in the animation function */ .animated_bg {background:#ef008c;color:#fff;} .animated_bg2 {background:#abebfe;color:#000;} .animated_bg3 {background:#71a98b;color:#fff;} </style> </head> <body> <div class="container"> <h1>Animating Background Colors</h1> <p class="credits"><em>by</em> <a href="http://webdesignerwall.com" target="_new">Web Designer Wall</a></p> <p>Add animated_bg class to any element (html, body, div, button, etc.)</p> <p><a href="http://webdesignerwall.com/tutorials/animating-background-colors" class="animated_bg button" target="_new">Learn More</a></p> <div class="animated_bg2 box"><h2>.animated_bg2</h2></div> <div class="animated_bg3 box"><h2>.animated_bg3</h2></div> </div> <script src="js/jquery-1.11.0.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/animated_bg.js"></script> <script> jQuery(document).ready(function(){ $('.animated_bg2').animatedBG({ colorSet:['#abebfe', '#aad667', '#57e6ee', '#ff7ebb'], speed:2000 }); $('.animated_bg3').animatedBG({ colorSet:['#71a98b', '#b15c8e', '#dc6b68', '#6c5a94', '#b14c4e', '#736357'], speed:6000 }); }); </script> <div>You will need to download/copy the following files and put in to a folder named /js/ : <ol> <li><a href="http://snapbuilder.com/code_snippets/view_code_example/css/background_effects/js/jquery-1.11.0.min.js">jquery-1.11.0.min.js</a></li> <li><a href="http://snapbuilder.com/code_snippets/view_code_example/css/background_effects/js/jquery-ui.min.js">jquery-ui.min.js</a></li> <li><a href="http://snapbuilder.com/code_snippets/view_code_example/css/background_effects/js/animated_bg.js">animated_bg.js</a></li> </ol> </div> <br /><br /> <div id="snippet"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_156.html">Animating Background Colors</a> page. ] </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library