CODEWITHSUNDEEP
javascriptjquerycss
Jitender
Jitender

Reputation: 7969

Text appear in zoom in effect

How can we show text in zoom in effect. I saw it on one travel site. I did google but cant find this kind of effect. I just want little hint what kind of effect is this. I red about easing but did not find the same effect. I have attached screenshot for the same. Here is link of that website http://cleartrip.com/flights?ui=v3. The effect is on payment page enter image description here

Upvotes: 1

Views: 2728

Answers (1)

Chris Boon
Chris Boon

Reputation: 1387

Ok, so when you do something to make the section appear, the button within it animates from nothing to 100% size from its center point. So basically what you are asking is how to make something grow from 0% to 100% via animation. There's probably a totally javascript way but I personally would use css animation for this.

Suppose you are adding a class to the parent div to reveal a section of content (in the example you linked to it is revealing a section of the order form) all you need to do is in the css add an animation to the button that is triggered when the section gets a class added. In my example below I'm calling the section 'page' and assuming you're adding a class of 'active' to reveal it - obviously these could be anything you like: Html:

<div class="page">
  <div class="animated_button">Look at me</div>
  [other content that you don't want to animate]
</div>

Css:

.page{
  display:none;  
}
.active{
  display:block;
}

.animated_button{
  [styling for how you want your button to look]
}

.active .animated_button{ 
  animation: growUp 0.4s;
}

@keyframes growUp {
  0%   { transform:scale(0); }
  100% { transform:scale(1); }
}

Note that you may need to add vendor-prefixes for the transforms. Here is a codePen - there's a few extra styles and stuff in there just to show an example of how it works: http://codepen.io/chrisboon27/pen/weJmL

Upvotes: 2

Related Questions