| Animating Background Colors - Create eye catching animating background color changing effects to your page. Example: View Code Demo |
<!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 https://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>
|
Scroll