Efecto de imagen Jquery

Hi i am making a banner copy of flash ad into Html5 using Jquery. Here is the link of what i want to convert Enlace 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

Aquí está el enlace del violín código de violín

<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;
}

Muchas Gracias

preguntado el 28 de mayo de 14 a las 14:05

2 Respuestas

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);

contestado el 28 de mayo de 14 a las 14:05

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/? - user3196720

take a look at this new fiddle jsfiddle.net/Cbhsr/2 I added a few lines of CSS at the bottom and updated the JavaScript. - Evídica

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 :)

ejemplo: http://jsfiddle.net/suF4w/

Respondido el 20 de junio de 20 a las 10:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.