Animate several div/images to slide on screen for a livestream layout (html, css, webkit animation)

Question

Animate several div/images to slide on screen for a livestream layout (html, css, webkit animation)

189 views Asked by Ele Hex At 23 August 2016 at 05:10

I am trying to set up a little animation for my livestream that slides 3 images onto the screen from the left side, and once all 3 are on screen have them stay there for about 30 seconds then slide back off screen. I would like this 30 second animation to be automatically replayed every 15 minutes too.

I created an image to better help describe what I am trying to achieve here for my livestream.

This being said, I have a somewhat working version of this right now but it only sides in 1 image currently, here is the code:

<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 {
     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>

Any input would be great. I have extremely limited knowledge on anything code related, this is all just from me scouring the internet and trying to figure this out. Thanks for any help!

Original Q&A

There are 1 answers

**Puneet** · Answer 1 · 2016-08-23T07:01:59+00:00

This will work for you. Please check and let me know if you need to understand how it works.

$(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;}

   
        </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>

TechQA.

Animate several div/images to slide on screen for a livestream layout (html, css, webkit animation)

There are 1 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in WEBKIT-ANIMATION

Popular Questions

Popular Tags

Trending Questions