0

I'm using waypoints and jquery transit. I'm able to achieve the effect of zoom out from 200% to 100%. But for that i have to write all my css to default of 200% and then my jquery transit ake it scale 0.5 to normal size.

I mean is there a smart way to do it.

this is my fiddle http://jsfiddle.net/cancerian73/eJ2Mw/1/

.fortyone-mil {
font: bold 72px/72px"Trebuchet MS", Arial, Helvetica, sans-serif;
color: #1374a6;
text-align:center;
width:100%;
position:relative;
top:115px;
opacity:1;
}

you can see the text between the circle getting zoomed out

San
  • 1,237
  • 1
  • 14
  • 29
  • `scale` / `transform` is a smart way to do it. Do you have any issues in your implementation ? – Jashwant Nov 12 '13 at 06:11
  • @jashwant: my problem is that to scale out i have to make all css in 200% and then scale down to 100%. I want to make normal size css and whichever item i wanna scale out just onload make them 200%. Am i making sense to you or I am unclear – San Nov 12 '13 at 06:14
  • Then just code with normal css and scale to 200% on page load with transit. Or you can have a css class with `transform`, which you can add to elements which you want to scale. – Jashwant Nov 12 '13 at 06:20
  • that is what I am struggling to do. How to scale css to 200% or nomal onload – San Nov 12 '13 at 06:30
  • You can add a css `transform: scale(2, 2)` to transform those elements. – Jashwant Nov 12 '13 at 06:48
  • I'm confused can you show me a small fiddle if thats not a pain – San Nov 12 '13 at 06:52
  • I tried giving a delay like this $(".fortyone-mil").transition({ opacity: 1, scale: 1 }, 500, 'in').delay( 2000 ); But its not working am i doing something wrong – San Nov 12 '13 at 11:03

1 Answers1

1

You can always use css3 transform to have zoom out / zoom in functionality.

jQuery

$(".fortyone-mil").transition({
  opacity: 1,
  scale: 1
}, 500, 'in');

CSS:

.fortyone-mil {
 -webkit-transform: scale(2);
    -moz-transform: scale(2);
      transform: scale(2);
}

Demo

Jashwant
  • 28,410
  • 16
  • 70
  • 105
  • dude why i didn't think about that. you are a star. Thanks a lot – San Nov 12 '13 at 10:43
  • is there a way where I can delay for the next animation? – San Nov 12 '13 at 10:49
  • 1
    You can use jquery's `delay()` function for elements in queue. Or you may use `setTimeout`. Please mark the answer, if it helped you. – Jashwant Nov 12 '13 at 10:54
  • i have already marked your solution as right one i gave it +1. you can see – San Nov 12 '13 at 10:56
  • +1 is for upvoting. You need to mark it as answer. Click on the 'right' tick mark to approve it as answer ;) – Jashwant Nov 12 '13 at 11:02
  • i have done that too and also i managed to do the delay. What is better delay or settimeout? – San Nov 12 '13 at 11:05