ズームイン効果でテキストを表示するにはどうすればよいですか。ある旅行サイトで見ました。私はグーグルで検索しましたが、この種の効果は見つかりませんでした。これがどのような効果なのか、少しヒントが欲しいだけです。私は緩和について赤くなりましたが、同じ効果は見つかりませんでした. 同じスクリーンショットを添付しました。そのウェブサイトのリンクは次のとおりですhttp://cleartrip.com/flights?ui=v3 . 効果は支払いページにあります
1 に答える
では、セクションを表示するために何かを行うと、その中のボタンは何もない状態から中心点から 100% のサイズまでアニメーション化されます。つまり、基本的にあなたが求めているのは、アニメーションを介して何かを 0% から 100% に成長させる方法です。おそらく完全にJavaScriptの方法がありますが、私は個人的にこれにcssアニメーションを使用します.
コンテンツのセクションを表示するために、親 div にクラスを追加するとします (リンクした例では、注文フォームのセクションを表示しています)。CSS でアニメーションをボタンに追加するだけです。セクションにクラスが追加されたときにトリガーされます。以下の私の例では、セクション「ページ」を呼び出しており、それを表示するために「アクティブ」のクラスを追加していると仮定しています - 明らかに、これらは好きなものである可能性があります:
<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); }
}
トランスフォームのベンダー プレフィックスを追加する必要がある場合があることに注意してください。ここに codePen があります - それがどのように機能するかの例を示すためだけに、いくつかの追加のスタイルとものがそこにあります: http://codepen.io/chrisboon27/pen/weJmL