2017-09-17 5 views
1

私はこのような私のページにいくつかのスキルバーを持っている: enter image description hereスクロールするまでアニメーションを要素に適用する方法はありますか?

そして、私はアニメーションを行うには、次のCSSを使用しています。私はこの部分までスクロールするまで、それらが0%にとどまるようにする方法

.progress { 
 
    height: 10px; 
 
    background: #333; 
 
    border-radius: 0; 
 
    box-shadow: none; 
 
    margin-bottom: 30px; 
 
    overflow: visible; 
 
} 
 

 
.progress .progress-bar { 
 
    position: relative; 
 
    -webkit-animation: animate-positive 2s; 
 
    animation: animate-positive 2s; 
 
} 
 

 
.progress .progress-bar:after { 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 9px; 
 
    background: #fff; 
 
    position: absolute; 
 
    top: -10px; 
 
    bottom: -10px; 
 
    right: -1px; 
 
    z-index: 1; 
 
    transform: rotate(35deg); 
 
} 
 

 
.progress .progress-value { 
 
    display: block; 
 
    font-size: 16px; 
 
    font-weight: 600; 
 
    color: #333; 
 
    position: absolute; 
 
    top: -30px; 
 
    right: -25px; 
 
} 
 

 
@-webkit-keyframes animate-positive { 
 
    0% { 
 
    width: 0; 
 
    } 
 
} 
 

 
@keyframes animate-positive { 
 
    0% { 
 
    width: 0; 
 
    } 
 
}
<div class="progress"> 
 
    <div class="progress-bar" style="width:60%; background:linear-gradient(to bottom right, #a1c4fd, #c2e9fb);"> 
 
    <div class="progress-value">60%</div> 
 
    </div> 
 
</div>

?私はscrollTo関数をjQueryで知っていますが、私はこのメソッドにどのように適用するのか分かりません。

+0

彼らはあなたがjqueryのを使用して必要な正確に何をしているこの答えを確認してくださいここで

はリンクです21561480/trigger-event-when-user-scroll-to-jqueryを使用した特定の要素 – pegla

+0

@pegla私はどこかにスクロールするときにいくつかの関数をトリガする方法を知っています。しかし問題は、CSSのスタイルを維持し、スクロールするまでアニメーションを適用したいということです。何をトリガーするか分からない –

+1

あなたが知っていれば、1つのcssクラスにアニメーション用のすべてのスタイルを配置することはできません。要素にスクロールするときに、それをトリガするだけで$(scrolledElement).addClass 'プログレスバー'); – pegla

答えて

0

あなたはanimate.cssと一緒にwowjsを使用できます!シンプルで、ビューポートに入るときにどの要素にもエフェクトを適用できます。また、アニメーションの遅延、アニメーションの継続時間などを操作するオプションも用意されています。

WowJS:https://stackoverflow.com/questions/: http://mynameismatthieu.com/WOW/

AnimateCSS https://daneden.github.io/animate.css/

関連する問題