2

最近、クロム実験のWebサイトを見ました。実験自体は素晴らしいものでしたが、実験が始まる前に、背景に雲が動いているWebサイトの紹介ページがありました。

ファイヤーバグを見ると、Webサイトにはクラウドイメージが1つしかなく（間違っている可能性があります）、jqueryを学習しているため、ある程度まで再作成するのは難しいと思いました。

さまざまなことを数時間試した後、2つのことが明らかになりました。

  1. 私はjqueryで吸う
  2. おそらくガイダンスが必要です

最初は、画面の下部にランダムな数の雲を挿入し、jquery animateを使用して不透明度と高さ+幅を変更しようとしましたが、途方もなく遅いことがわかりました。

次に、背景に雲のベースレイヤーがある場合、2〜3個の雲をアニメートして、見栄えを良くすることができると思いました。しかし、ベースレイヤーの見た目は悪くなります。

これを実現するためのヒントを教えてください。

ありがとう。

「次の理由で質問を送信できません：jsfiddleにリンクしないでください」というエラーが発生しました。：/

jsfiddleのコードの一部を次に示します。

<div>
    <div class="inner one"></div>
    <div class="inner two"></div>
<div>

アップデート

サイトをさらに調べてみると、サイト全体のコードがオープンソースであり、誰でもダウンロードして投稿できることがわかりました。

コードはグーグルで入手可能です

雲のアニメーションはwebGLを介して行われます。私がよく知らない何か。私はjqueryでその効果を再現しようとしています-それほど良くないかもしれませんが、挑戦は試してみる価値があると思います。

一方、jqueryでこれをシミュレートする方法を理解している、またはアイデアがある場合は、お知らせください。

jqueryでそれを複製することができた場合; 答えとして投稿します。

4

1 に答える 1

0

示した例では、HTML5の新機能の1つであるCanvasを使用しました。これは、アニメーションなどの作成にも非常に役立ちます。いくつかのJSとキャンバスを使用してこの効果を作成することもできますが、jQueryを使用してキャンバスなしで同じことを実現することもできますが、jQueryメソッドはより集中的で、より多くのリソースを必要とすると思います。アイデアはおそらく、雲のベースレイヤーをいくつか持ってから、後ろから始めて短時間で成長する前の雲をさらにいくつか持つことです。これらの画像はすべて透明な画像である必要があるため、Photoshopのようなものが必要になります。しかし、彼らがしていることはそれほど難しいことではありません。おそらく、いくつかの画像を循環してサイズを変更し、それらをわずかに動かして、表示される効果を作成する連続ループです。このサイトをチェックしてください、

http://disneydigitalbooks.go.com/tron/

于 2013-01-22T18:09:44.060 に答える