web-dev-qa-db-ja.com

ビューポートに表示されている場合のCSS3-Animate要素（ページスクロール）

HTMLページのさまざまなdiv要素にCSSアニメーションを追加しましたが、すべてのアニメーションが同時に再生され、ページの下部にアニメーションが表示されません。ページを下にスクロールしながら再生するにはどうしたらいいですか。 ？

javascriptjqueryhtmlcss3animation
15
Ajith

[〜＃〜] js [〜＃〜]またはjQueryをtriggerに使用する必要がありますCSS3遷移/アニメーション
一度要素がビューポートにある**。

jsFiddleデモ-inViewportプラグインの使用

load、resize、およびscrollイベントをリッスンして取得要素がビューポートに入った場合.
小さなjQueryプラグインを使用できます私が作成した：（ https://stackoverflow.com/a/26831113/383904 ）

次のようなアニメーションのボックスがあるとします。

<div class="box rotate"></div>
<div class="box scale"></div>
<div class="box translate"></div>

あなたのCSSより：

.box{
    width:300px;
    height:300px;
    margin:500px 50px;
    background:red;
    transition: 1.5s; /* THE DURATION */
}

.rotate.triggeredCSS3    {transform : rotate(360deg); }
.scale.triggeredCSS3     {transform : scale(1.6); }
.translate.triggeredCSS3 {transform : translate3d(400px,0,0); }

どこ .triggeredCSS3はプラグインによって動的に割り当てられます：

$(".box").inViewport(function(px){
    if(px) $(this).addClass("triggeredCSS3") ;
});
28
Roko C. Buljan