2

私はwunderlist.comサイトに出くわし、「Wunderlist についてもっと知る」というヘッダーのすぐ下の画像にあるズームのようなポップアップに恋をしました。このようなものを自分のサイトに実装したいと思っています。

誰かがこれがどのように行われるか教えてもらえますか? リバース エンジニアリングを試みましたが、うまくいきませんでした :) 完成したコード全体を望んでいるわけではありませんが、CSS/jQuery を使用してこれを実現する方法に関するいくつかのガイドラインを期待しています。

または、私が使用できる jQuery プラグインをご存知でしょうか?

4

4 に答える 4

1

実際にはそれほど難しいことではありません。Wunderlist チームはさらに簡単にしました。それらには、ズームされた画像が切り取られ、丸みを帯びた角、境界線、および影が用意された大きなスプライト画像があります。ここで確認できます: https://wunderlist2.s3.amazonaws.com/179510ff7c929bfcc6e9819f3c2539baca5d3325/images/welcome-screen.png

あなたがすることは、マウスオーバーで半透明の黒い背景を表示することです（位置は可能です：全幅と高さで固定されます）。次に、スプ​​ライトを背景画像として要素を作成します (CSS でクラスを用意し、新しく作成した要素に追加することをお勧めします)。position をホバーした要素の位置に設定します。

dom に追加すると、要素の変換スケールをアニメーション化します (scale(.24) のようなものから始めます)。

于 2013-03-28T14:47:40.790 に答える
1

2 つの主な側面を見てみましょう: 選択したインスペクタ ツールを開き、何が起こるかをbody.login .feature 見てください。transform: scaleopacity

ヒント: 移行は主にそれらに関するものです。

引き続きインスペクターで、スケールを (1) に変更し、不透明度を 1 に変更します。ある状態から別の状態にスムーズに移行する方法は、transitionプロパティによって決まります。

これは、それを達成する方法を正確に伝えることを意図したものではありません:)

于 2013-03-28T14:40:55.753 に答える
1

彼らはすべてCSSを使用しています。非常に単純です..完全なjsフィドルの例をコーディングしますが、時間がないので、代わりに、必要なさまざまな要素とそれらがどのように相互作用するかをリストします.

  1. まず、大きな画像は、サイズが設定された背景画像を持つ単なる div です。
  2. 円形の画像自体は、すべての円を 1 つの場所に含む 1 つの大きな画像から生成されます。これはスプライトと呼ばれます。円は、スプライト画像からボックス内に正しい円を配置するための背景画像と背景配置を備えた単なる div です。
  3. テキスト ボックス自体も、テキスト用の標準の H2 および P タグを含む div です。
  4. 適切なレイアウトを実現するために、すべてが絶対配置されます。
  5. 小さな円は:hover、それぞれのターゲット領域上に絶対配置された状態を持つ div です。
  6. アニメーション:hoverは、css3 トランジションと css3 トランスフォームを使用して実現されます。

これで始められるはずです。

質問があればコメントしてください。

楽しい時間を過ごしました: http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/fun-experiment-mh/

于 2013-03-28T14:45:22.720 に答える
0

リバースエンジニアリングを試みたからです。その道に沿ってあなたを導きます。

class featureを持つ任意の div にカーソルを合わせると、場所とコンテンツが変更されるidオーバーレイを持つ div は 1 つだけです。アプリ jsからさらに進んでください。縮小されていません。

この場合のポップアップの内容は、別の位置に移動された画像です。

于 2013-03-28T14:46:50.310 に答える