1

少しスライダーのプレゼンテーションが必要です

この単純なバージョン(フルスクリーンで表示) から次のようなレポートの見出しを作成できればと思います。

結果が必要

また、次のものがあればいいでしょう：

  1. jQueryを使用するのではなく、CSSアニメーションでアイコンを移動する
  2. アイコンがステップインした後の回転 3D アニメーション
  3. .slide順番に現れるより多くの要素を持つ

クロスブラウザーの手間は不要です。すべてが最新バージョンの chrome で実行されます。

編集

jQuery を使用してクラスを追加するトランジションを簡単に処理できることがわかりましたが、異なる要素に順番に追加するのは簡単ではないように思われるため、トランジション期間に一致するタイムアウトを設定する必要があります。

$().ready(function(){
    $('.icon').addClass('in');
    setTimeout(function(){
        $('h1').addClass('on');
    }, 1000);
    setTimeout(function(){
        $('.icon').addClass('out');
    }, 2000);    
});

JSFiddleを参照してください

より良い解決策はありますか？

4

3 に答える 3

2

-webkit-perspective解決策は、-webkit-perspective-origin見出しコンテナに適用することです：

-webkit-perspective: 150; /* Safari and Chrome */
-webkit-perspective-origin: 10% 10%; /* Safari and Chrome */

ライブデモを見る

于 2013-04-26T18:56:07.533 に答える
1

setTimeout を使用したくない場合は、各アニメーションを個別の関数に分割し、次のようなコールバックを介してそれらをつなぎ合わせることができます。

$().ready(function(){
    animationOne();
});

function animationOne()
{
     $('.icon').transition( { 'margin-top': 0 }, 2000, 'in', animationTwo ); 
}

function animationTwo() 
{
    $('h1').transition( { 'font-size': '5em', perspective: 200, rotateY: -15 }, 1000, 'in-out', animationThree );
}

function animationThree()
{
     $('.icon').transition( { 'margin-left': '-600px' }, 2000, 'in-out'); 
}

JS フィドルのデモ

基本的にはアニメーションが終わったら次の関数が呼び出されるので、アニメーションを連続して行うことができます。上記の例ではjQuery Transitを使用しています。これは、大きな css ファイルを処理することなく、多くのトランジション/トランスフォームを実行したい場合に最適です。

于 2013-05-10T18:46:06.953 に答える
0

CSS3 の変換を使用して、z 軸に沿って物を回転させることができます。

-webkit-transform: rotateY(120deg);

もちろん、これらのプロパティは CSS3 トランジションを使用してアニメーション化できます (それが言葉かどうかはわかりません)。

-webkit-transition-property: -webkit-transfom;

（-webkit-質問でChromeでのみ実行されると言ったため、使用しただけです。）

トランジション プロパティに他のプロパティも追加すると、 でアニメーション化できます$("#whatever").css()。

于 2013-04-26T17:13:48.667 に答える