Jquery Text Animation

Question

I am converting flash banner into html5 banner . Everything is working fine except the text animation. The text should work like this but my text is working fine but it is coming over the border it should work like my image animation which is working within the border. Here is my code http://jsfiddle.net/tU9LV/

<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 border is an image, you have to remove the border from the image, create it as a CSS border, and then have an inner element with overflow hidden to avoid the text showing over the border. — adeneo, Jun 01 '14 at 11:33
i dont want to remove the image i have to use the default image — , Jun 01 '14 at 11:36

score 0 · Accepted Answer · answered Jun 01 '14 at 11:49

0

The simple solution for this if you can't change your background image is to layover a div for the borders..

http://jsfiddle.net/K3SXu/

I've added:

<div id="borders"></div>

to the 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 the css. and also removed the 'outline' property from the #wrapper.

it works :)

answered Jun 01 '14 at 11:49

webkit

3,349
1
16
18

thanks Eyal this is great and do you think image animation is fine. – Jun 01 '14 at 11:51
no problem.. regarding the image animation, I've given you my take on it on a question you've posted about it last week.. I think it looks ok, but to make it even better I'd use a translate animation.. look at what I wrote. – webkit Jun 01 '14 at 11:53
and one more think i am having problem in my firefox and i dont know it is due to some virus or what jquery is not working properly it is working smoothly in IE but in firefox no script is working – Jun 01 '14 at 11:58
going to the fiddle link on firefox works fine for me.. maybe you have js disabled for some reason? – webkit Jun 01 '14 at 12:00
yes i have some problem is it due to virus or what? i had this one in my chrome as well i downloaded firefox but today it is the same problem but everything works fine on IE and my other PC – Jun 01 '14 at 12:08
1

Am I not getting it, you accepted this one, but using an overlay makes it impossible to click the button, so this doesn't really work, at least not if a functioning button is what you want ? – adeneo Jun 01 '14 at 12:14
@adeneo you're right, add the property 'pointer-events: none;' to the #borders element – webkit Jun 01 '14 at 12:17
if you need cross-browser solution refer to this answer... http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements – webkit Jun 01 '14 at 12:19

Jquery Text Animation

1 Answers1