Jquery Image Effect

Question

Hi i am making a banner copy of flash ad into Html5 using Jquery. Here is the link of what i want to convert Link and i have so far able to complete the text effects but only image animation is left and i need help in that one how to ad a image animation using Jquery so that image will work just within my defined container

Here is the fiddle link Fiddle code

<div id="mainContainer">        
    <div id="logo"  style="position:absolute;color:blue; font-size:30px;top:6px; left:6px">Sizmek</div><br />
        <div id="text1" style="position:absolute;">Striped Bag</div><br />
        <div id="text2" style="position:absolute;">$14</div><br />
        <div id="text3" style="position:absolute;">Sale $25</div><br />
    </div>




$(document).ready(function () {
        $("#text1").animate({ left: "+=30" }, 500);
        $("#text1").animate({ left: "-=20" }, 200);
        $("#text2").delay(300).animate({ left: "+=30" }, 500);
        $("#text2").animate({ left: "-=20" }, 200);
        $("#text3").delay(400).animate({ left: "+=30" }, 500);
        $("#text3").animate({ left: "-=20" }, 200);
    });


#mainContainer{
    width:298px;
    height:248px;
    border: 1px solid #5e6a71;
border-style:solid;
border-width:5px;
 border-color:#BACAE4;
}

#images img{
    position:absolute;
    top:60px;
    left:170px;
    border-radius: 50%;
    width:100px;
    height:100px;
    opacity: 0;
}

#headlineText p{
    width:165px;
    position:absolute;
    top:90px;
    left:120px;
    opacity: 0;
}

Thanks

score 0 · Accepted Answer · answered May 28 '14 at 13:34

0

I updated your fiddle here, you may need to fine tune some of the size and spacing: http://jsfiddle.net/Cbhsr/1/

The key is this code, it animates the width to something smaller. By setting only the width, we only have to animate on it. If the height and width of the image were both set through CSS, you'd have to animate both:

$("#introImg").animate({width: "100px"}, 1000);

answered May 28 '14 at 13:34

Evidica

1,464
1
14
19

Thanks Evidica thats perfect and can you see the text it needs to slide in from left to right which is fine but it is still not as in the flash text am i missing anything/? – May 28 '14 at 13:43
take a look at this new fiddle http://jsfiddle.net/Cbhsr/2/ I added a few lines of CSS at the bottom and updated the JavaScript. – Evidica May 28 '14 at 13:53

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

It seems the image is animating from a bit past the bottom right, and from near to far..

I would overflow the container and animate the with translate3d:

css

#introImg{
        position:absolute;
        top:60px;
        left:170px;
        border-radius: 50%;
        width:100px;
        height:100px;
        opacity: 0;
        -webkit-transform: perspective(25px) translate3d(320px,320px,-50px); 
        transform:perspective(15px) translate3d(40px,40px,-50px);
        -webkit-transition:all 1s ease;
}

ofcourse that's the basic stuff, you need to add prefixes to support more browsers and tweek the numbers to get what you want :)

example: http://jsfiddle.net/suF4w/

Jquery Image Effect

2 Answers2

css