2

<div>飛行機に折りたたまれて画面から飛び出す3D 変換効果を作成しようとしています。

これを実現するために、複数の<div>要素 (折り目ごとに 1 つ) を作成し、それぞれに CSS 3D 変換を適用して紙飛行機に変換し、全体をキーフレーム化して画面から飛び出させます。

問題は、ユーザーが入力したテキストを含むdivで同じことをしたいということです---基本的に、div内のテキストも折りたたむ必要があります。ページを折りたたみごとにdivに分割しているため、私の方法を使用してそれを行う方法はないようです...

これを行う他の方法を知っている人はいますか？

4

2 に答える 2

3

ノードのクローンを作成してカットし、クローンを半分にしてから、既に行っているアニメーションを続けることができます。

例を次に示します: http://jsfiddle.net/rCAA4/

サンプル HTML:

<div class="box">
    <p class="text">
       ...your text goes here...
    </p>
</div>

..およびJavaScript（jQuery）：

var $box = $('.box'),
    $text = $('.text'),
    width_of_$box = $box.css('width'),
    half_width_of_$box = parseInt(width_of_$box)/2 + "px";

$text.css('width', width_of_$box);

$box.css({
    'width': half_width_of_$box,
    'overflow': 'hidden'
});

$box
    .clone()
    .find('.text')
        .css('margin-left', "-" + half_width_of_$box)
    .end().appendTo('body');
于 2012-09-21T23:12:19.083 に答える
1

おそらく、入力テキスト フィールドを、入力後の画像を格納するキャンバスに変換できます。次に、javascript でキャンバスをプログラミングします。

まだ試したことはありません。でも、多分使えると思います。

javascriptまたはjqueryを使用してオンザフライでテキストから画像へ

于 2012-09-21T23:18:14.670 に答える