html - Transition Background-Image -
i'm bit of newbie world of web programming, i'm trying develop webpage transition black , white version of photo normal color version of photo when page loads.
after trying lot of different things, best make colored version appear instantly. tried play around jquery bit, reason, couldn't page load correctly. stayed on black , white version, rather transition normal version.
the html follows:
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="index.css"> <link href='http://fonts.googleapis.com/css?family=bad+script' rel='stylesheet' type='text/css'> <title>ucla wushu - home</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("html").animate({'background' : 'url(images/home_background.jpg) no-repeat center center fixed'}, 'slow'); }); </script> </head> <body> <div id="container"> <div id="middlebar"> <strong> <a href="index.html">my portal</a> </strong> <div id="enter"><a href="announcements.html">enter</a></div> </div> </div> </body> </html> the relevant css follows (i copy , pasted in order stretch background image browser):
@charset "utf-8"; /* css document */ html { background: url(images/home_background_bw.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } please let me know if there way smoothly transition black , white color using format. :)
i think easiest solution without use of saturation plugin etc, put div colored image , 0 opacity right after body tag , animate opacity of div 100%.
part of html:
... <title>ucla wushu - home</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#colored-bg").animate({ opacity: 100 }, 'slow'); }); </script> </head> <body> <div id="colored-bg"></div> <div id="container"> <div id="middlebar"> ... css:
#colored-bg { background: url(images/home_background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; opacity: 0; filter: ~"alpha(opacity=@{0})"; // ie // following strecth element corner corner position: absolute; top: 0; bottom: 0; left: 0; right: 0; } 
Comments
Post a Comment