javascript - css3またはjqueryを使用したgoogle plus写真アニメーション?

Question

アニメーションはこちら

の中へ

そしてこれ

彼らはどのようにそれを行うことができますか? 1. アニメーションのサイズを変更します 2. スタックしてアニメーション化します。

CSS3だけ？例はありますか？

ありがとう

アダム・ラマダン

Answer 1

あなたの質問に答えるには：

1. サイズを変更して画像をアニメーション化（ズームイン効果）するには、次のようなものを使用する必要があります。

   ul#pics li:hover {
       -moz-transform: scale(1.1) rotate(0deg);
       -webkit-transform: scale(1.1) rotate(0deg);
       -o-transform: scale(1.1) rotate(0deg);
       -ms-transform: scale(1.1) rotate(0deg);
       transform: scale(1.1) rotate(0deg);
   }
   

2. スタックとアニメーションには、CSS3とjQueryを使用する必要があります。

Answer 2

Chrome を使用しているマシンでは、 CSS3 が表示され-webkit-transformます。彼らが使用しているのはそれだけtransformなので、私のブラウザーが webkit であることを検出し、変換する正しい方法を選択しているに違いありません。おそらく、他のブラウザ用にさまざまな手法を持っているでしょう。

ただし、このページは jQuery を使用していないため、jQuery フォールバックはありません。ただし、Google が開発した別の JavaScript フォールバックがある可能性があります。

Answer 3

これはあなたが探しているものですか？