ライブストリームレイアウト（html、css、webkit animation）のために、複数のdiv /画像をアニメーション化するアニメーション

3つの画像を左側から1回スライドさせる私のライブストリーム用に少しアニメーションを設定しようとしています3人全員が画面に表示され、約30秒間そこにとどまり、画面からスライドします。私はこの30秒のアニメーションを自動的に15分ごとに再生したいと思います。ライブストリームレイアウト（html、css、webkit animation）のために、複数のdiv /画像をアニメーション化するアニメーション

私は自分のライブストリームのためにここで達成しようとしていることをよりよく説明するためにイメージを作成しました。

これは言われている

、私は今、この権利のやや作業バージョンを持っていますが、それは現在1枚の画像における唯一の側面は、ここのコードです：

<html> 
 
    <head> 
 
    <style> 
 
    .wrapper { 
 
     position: relative; 
 
     overflow: hidden; 
 
     width: 500px; 
 
     height: 500px; 
 
    } 
 
    #slide { 
 
     position: absolute; 
 
     left: -300px; 
 
     width: 300px; 
 
     height: 75px; 
 
     -webkit-animation: slide 30s 0s 1; 
 
    } 
 
    @keyframes slide { 
 
\t  0% { left: -330px } 
 
     3% { left: 0px } 
 
     97% { left: 0px } 
 
     100% { left: -330px } 
 
    } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div class="wrapper"> 
 
     <img id="slide" src="http://i.imgur.com/38Tfglv.png" /> 
 
    </div> 
 
    </body> 
 
</html>

どんな入力も素晴らしいでしょう。私はを極端にに関連するすべてのコードに限定された知識があります。これは私がインターネットを精練してこれを理解しようとしているところです。助けてくれてありがとう！

出典

2016-08-23 Ele Hex

これはあなたのために働くでしょう。どのように動作するのかを理解する必要があるかどうかを確認してください。

$(document).ready(function(){ 
 
    
 
    var slideOutTime=2000; // 2 Seconds 
 
    var slideInTime=2000; // 2 Seconds 
 
    var slideInAfterTime=5000; // 5 Seconds 
 
    var repeatSlidingTime=10000; // 10 Seconds 
 
    
 
    
 
    function slideImage(img){ 
 
    
 
    img.animate({left:'0px'},slideOutTime,function(){ 
 
     setTimeout(function(){slideBack(img);},slideInAfterTime); 
 
    }); 
 
    
 
    var nxt=img.next(); 
 
     if(nxt.length>0){ 
 
     setTimeout(function(){ 
 
     slideImage(nxt);},(slideOutTime/2.5)); 
 
     }else{ 
 
     setTimeout(function(){startSliding();},repeatSlidingTime); 
 
     } 
 
    
 
    } 
 
    
 
    function slideBack(img){ 
 
    img.animate({left:'-300px'},slideInTime); 
 
    } 
 
    
 
    function startSliding(){ 
 
    slideImage($('.slide:first')); 
 
    } 
 
    
 
    startSliding(); 
 
    
 
    
 
    
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    <head> 
 
     <style> 
 
      .wrapper { 
 
       position: relative; 
 
       overflow: hidden; 
 
       width: 500px; 
 
       height: 500px; 
 
      } 
 

 
      .slide { 
 
       left:-300px; 
 
       position: absolute; 
 
       width: 300px; 
 
       height: 75px;     
 
      } 
 
      .slide:nth-child(2) {top:100px;} 
 
      .slide:nth-child(3) {top:200px;} 
 

 
\t \t \t 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div class="wrapper"> 
 
      <img class="slide" src="http://i.imgur.com/38Tfglv.png" /> 
 
      <img class="slide" src="http://i.imgur.com/38Tfglv.png" /> 
 
      <img class="slide" src="http://i.imgur.com/38Tfglv.png" /> 
 
     </div> 
 

 
    </body> 
 
</html>

出典

2016-08-23 07:01:59 Puneet

これは、これまで取り組んでいます！私ができるならば、ちょっと調整したいだけです。画像1が画面上をスライドし始めて50％のマークに達した後、画像2でスライドし始め、画像2が画面上で50％のときに画像3を開始するように、コードをどのようにコード化できますか？私はこれにより、以前の画像がスクリーン上で100％に達するのを待っている各画像の代わりにアニメーションがより流動的になると思います。 –

@EleHex今すぐ試してみてください。私は必要に応じてコードを更新しました。 – Puneet

ライブストリームレイアウト（html、css、webkit animation）のために、複数のdiv /画像をアニメーション化するアニメーション

答えて

関連する問題