1

私の会社の名前は、他の 2 つの単語を短縮したものです。過去に、2 つの単語が「衝突」して新しい単語 (会社名) が生成されるアニメーションを Flash で作成したことがあります。CSS と JQuery の組み合わせを使用して、同様のアニメーションを実現できますか?

例：

京セラ（表向きはプリンターで知られている）は、「京都」と「セラミックス」という2つの単語を短縮してその名前にたどり着きました。これが私の会社だったら、京都がセラミックスと衝突し、京都の端から落ちて、マイクがセラミックスの端から落ちて、結果として京セラが画面に表示されたままになるのを見たいです。実行可能ですか？

ありとあらゆる支援を事前にありがとう！

4

2 に答える 2

2

フェードアウトあり。おそらく京都を「京」と「と」の2つに分けて、同じようにフェードアウトさせたい「と」「マイク」の部分をフェードアウトさせ、同時にこんなことをして隠れるようにします。アイテムと残りのアイテムが一緒にスライドします。

$(".con .item").click(function() {
  $('.kill').hide("slow");    
});

div の間にスペースがなければ、より良い結果が得られます。もちろん、これらはロゴを構成する一連の画像である可能性があります。

<div class="con">
    <div class="item keep">DIV 1</div><div class="item kill">DIV 2</div><div class="item kill">DIV 3</div><div class="item keep">DIV 4</div>
</div>

.item
{ 
    width:50px; 
    height:50px;
    margin:0;
    padding:0;
    display:inline-block;
    position:relative;            
    background:lime;
    cursor:pointer;        
}

更新されたフィドル: http://jsfiddle.net/M8scf/31/

単語間のスペースは、アイテムがフェードアウトするときに残りのアイテムが一緒にスライドするように、フェードアウトする部分として含まれます。もちろん、デフォルトのスタイルのマージン/パディングは、最後の 2 つの部分を十分に近づけるために調整する必要があります。そうしないと、最後の 2 つの部分が一緒になったときにすぐに非表示になり、完全な単語がフェードインする可能性があります。

于 2013-03-05T22:16:07.800 に答える
1

最新のブラウザーでのみ動作する CSS3 http://jsfiddle.net/wRREe/2/で効果を追加しました。CSS3 以外の単純な効果については、以下を参照してください。

JS

$('.kyoto').animate({
    left: $('.ceramics').position().left - 27
}, 1000, function () {
    $('.break_this').addClass('break_off');
});

CSS3:

.break_this {
    position: absolute;
    top: 0px;
    -moz-transition: all 2s;
    -webkit-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
}
.break_off {
    top: 50px;
    opacity:0;
    filter:alpha(opacity=0);
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
}

CSS3 を使用したデモ: http://jsfiddle.net/wRREe/2/

CSS3 なしのデモ: http://jsfiddle.net/wRREe/1/

JavaScript で少し努力すれば、ほぼすべての効果を得ることができます。以下の私のアプローチを参照してください。

HTML

<span class="kyoto">Kyo<span class="break_this">to</span></span>
<span class="ceramics">Cera<span class="break_this">mics</span>

CSS:

.kyoto {
    position: absolute;
    left: 10px;
    top: 10px;
}
.ceramics {
    position: absolute;
    left: 200px;
    top: 10px;
}

.break_this { position: absolute; }

JS:

$('.kyoto').animate({
    left: $('.ceramics').position().left - 27
}, 1000, function () {
    $('.break_this').animate({
        top: '+=100',
        opacity: 0
    }, 2000, function () {
        $(this).remove();
    });
});

デモ: http://jsfiddle.net/wRREe/1/

于 2013-03-05T22:34:39.903 に答える