c# - Jquery Text Animation -
i coverting flash banner html5 banner . working fine except text animation. text should work like text working fine coming on border should work image animation working within border. here code enter link description here
<div id = "wrapper" > <div id="maincontainer"> <div> <img id="introimg" src="http://i.imgur.com/fclbhjn.png"/> </div> <div id="images"> <p id="headline1txt" >striped bag</p><br /> <p id="headline2txt" >$14</p><br /> <p id="headline3txt" >sale $25</p><br /> </div> <div id="ctabtn"> <button class="btn btn-primary" type="button">shop now</button> </div> </div> </div> $(document).ready(function () { banneranimation(); }); function banneranimation(){ //jquery animation $("#introimg").animate({ width: "120px", height: "140px" }, 1000); $("#headline1txt").animate({ left: "20" }, 500, function () { $("#headline1txt").animate({ left: "10" }, 200); }); settimeout(function () { $("#headline2txt").animate({ left: "20" }, 500, function () { $("#headline3txt").animate({ left: "20" }, 500, function () { $("#headline3txt").animate({ left: "10" }, 200); }); $("#headline2txt").animate({ left: "10" }, 200); }); }, 1000); }* { margin:0; padding:0; } #wrapper { outline: 12px solid rgba(186,202,228 , 1); width:285px; height:235px; position: absolute; } #maincontainer{ background: url('https://secure-ds.serving-sys.com/burstingres/site-8188/type-0/5fefb401-b187-4d82-b4db-cbd2ef29cc48.gif'); width:285px; height:235px; overflow: hidden; position: fixed; } #introimg{ position:absolute; top:80px; left:150px; right:100px; opacity: 100; } #ctabtn{ top:200px; left:15px; position:absolute; } #headline1txt, #headline2txt, #headline3txt { position:absolute; overflow: hidden; margin:60px 8px; left: -120px; } #headline2txt, #headline3txt { font-size:21px;line-height: 2.0; } #headline1txt { font-size:26px;line-height: 1.5; }
the simple solution if can't change background image layover div borders..
i've added:
<div id="borders"></div>
to html.
and:
#borders { position:absolute; top:0; left:0; z-index:999; border:12px solid rgba(186,202,228,1); width:285px; height:235px;}
to css. , removed 'outline' property #wrapper.
it works :)
Comments
Post a Comment