Circle Rolling (infinite ~)

index.html

<div id="view">
  <div id="content">
    
    <div class="original">
      <div class="a">a</div>
      <div class="b">b</div>
      <div class="c">c</div>
    </div>
    
    <div class="addon">
      <div class="a">a</div>
      <div class="b">b</div>
      <div class="c">c</div>
    </div>
    
  </div>
</div>

qIGen.markdown

qIGen

A Pen by younjisu on CodePen.

License.

script.js

 var ANIMATION_CONFIG = {
   intervalMS : 10,  
   stepPX : 3,
   eleCount : 3
 }

 var si = setInterval(function() {
   
     var eleA = $(".original");
     var eleB = $(".addon");
   
     var _nBaseWidth = $(".original > div").width();
     var viewWidth = _nBaseWidth * ANIMATION_CONFIG.eleCount;

     var leftValueOfA = parseInt(eleA.css("left"));
     var leftValueOfB = parseInt(eleB.css("left"));

     eleA.css("left" , leftValueOfA-ANIMATION_CONFIG.stepPX + "px");
     eleB.css("left" , leftValueOfB-ANIMATION_CONFIG.stepPX + "px");

      if( leftValueOfA === -viewWidth ) changeLeft(eleA, viewWidth);
      if( leftValueOfB === -viewWidth ) changeLeft(eleB, viewWidth);

 } , 10);


function changeLeft(ele, viewWidth) {
  ele.css("left" , viewWidth+"px");  
}

style.css

#view {
  outline: 4px solid black;
  margin : 0px auto;
  position : relative;
  width : 200px;
  height : 200px;
  overflow:hidden;
}

#content {
  outline: 2px solid red;
  position : absolute;
  width: 1200px;
  height : 200px;
  top : 0px;
  left : 0px;
}

.original {
  outline : 1px solid black;
  width : 600px;
  height : 200px;
  float : left;
  position :absolute;
  top : 0px;
  left : 0px;
}

.addon {
  outline : 1px solid black;
  width : 600px;
  height : 200px;
  float:left;
  position : absolute;
  top  :0px;
  left :600px;
}

#content > div > div {
  outline : 1px solid black;
  width : 200px;
  height : 200px;
  float : left;
}

#content >div > div:nth-child(1)  {
  background-color : magenta;  
}

#content >div > div:nth-child(2) {
  background-color : blue;  
}

#content >div > div:nth-child(3) {
  background-color : gray;  
}