CODEWITHSUNDEEP
javascriptjquerycss
Juliver Galleto
Juliver Galleto

Reputation: 9037

Infinite carousel animation

I'm trying to create a spinner like loader but in my own style, this is like a carousel like it spins horizontally infinitely and add 'active' class to the item that caught inside the search icon but it seems my code does not produce the right result. I just want to loop it like a carousel infinitely and add class to the item that is inside the search icon, any help, ideas please? 

$(function() {
  setInterval(function() {
    animateSpinner();
  }, 2000);
});

function animateSpinner() {
  $('.anim-wrapper').animate({
    left: -(parseInt($('.anim-wrapper').attr('data-start-offset')) + 60)
  }, 500, function() {
    $('.anim-wrapper .active').removeClass('active').next().addClass('active');
    $('.anim-circle:nth-child(1)').appendTo($('.anim-wrapper'));
  });
}
body {
  padding: 64px;
  margin: 0px;
  color: #242424;
}

.anim-wrapper {
  overflow: auto;
  left: -14px;
  position: relative;
  width: 720px;
  padding: 0px;
  margin: 0px;
  top: 10px;
  height: 61px;
  overflow: hidden;
}

.anim-circle {
  width: 50px;
  height: 50px;
  background: #ededed;
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  list-style: none;
  margin: 5px;
  border-radius: 50%;
  font-size: 12px;
  text-align: center;
}

.position-relative {
  position: relative;
}

.magnifying-wrapper {
  position: absolute;
  width: 80px;
  height: 80px;
  z-index: 999;
  margin: 0px auto;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 100px;
  top: 11px;
}

.cn-spinner {
  width: 295px;
  position: relative;
  height: 150px;
  overflow: hidden;
}

.anim-circle.active {
  /* transform: scale(1.21); */
  background: #ef7100;
  color: #FFF;
}
<link href="https://1662037994.rsc.cdn77.org/plugins/foundry/css/themify-icons.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="position-relative cn-spinner center-content-parent">
  <div class="magnifying-wrapper">
    <i class="ti-search"></i>
  </div>
  <ul class="anim-wrapper overflow-auto" data-start-offset="14">
    <li class="anim-circle">Jobs</li>
    <li class="anim-circle">Real<br>estate</li>
    <li class="anim-circle active">Busi-<br>ness</li>
    <li class="anim-circle">Cars</li>
    <li class="anim-circle">Deals</li>
    <li class="anim-circle">Events</li>
  </ul>
</div>

Upvotes: 0

Views: 304

Answers (2)

Filtenborg
Filtenborg

Reputation: 397

In your approach it looks like the animation is only run once, even though it does run as expected. The reason is that on your first animation you set it to -74 (60 +14 offset), but you never change this value which is why it remains at -74. The jumpy "animation" is what it looks like when you remove and append elements.

I've put together a quick'n dirty solution which might need a bit of tweeking.

This manipulates the first child within .anim-wrapper, rather than the element itself.

    
    $(function() {
      setInterval(function() {
        $('.anim-circle:nth-child(1)').animate({
          marginLeft: -74
        }, 500, function() {
          $('.anim-circle:nth-child(1)').css('margin-left', 5);
          $('.anim-wrapper .active').removeClass('active').next().addClass('active');
          $('.anim-circle:nth-child(1)').appendTo($('.anim-wrapper'));
        });
      }, 2000);
    });
    
    
    
      body {
      padding: 64px;
      margin: 0px;
      color: #242424;
    }
    
    .anim-wrapper {
      overflow: auto;
      left: -14px;
      position: relative;
      width: 720px;
      padding: 0px;
      margin: 0px;
      top: 10px;
      height: 61px;
      overflow: hidden;
    }
    
    
    .anim-circle {
      width: 50px;
      height: 50px;
      background: #ededed;
      display: flex;
      align-items: center;
      justify-content: center;
      float: left;
      list-style: none;
      margin: 5px;
      border-radius: 50%;
      font-size: 12px;
      text-align: center;
    }
    
    .position-relative {
      position: relative;
    }
    
    .magnifying-wrapper {
      position: absolute;
      width: 80px;
      height: 80px;
      z-index: 999;
      margin: 0px auto;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 100px;
      top: 11px;
    }
    
    .cn-spinner {
      width: 295px;
      position: relative;
      height: 150px;
      overflow: hidden;
    }
    
    .anim-circle.active {
      background: #ef7100;
      color: #FFF;
    }
    
    
    
        <link href="https://1662037994.rsc.cdn77.org/plugins/foundry/css/themify-icons.css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="position-relative cn-spinner center-content-parent">
  <div class="magnifying-wrapper">
    <i class="ti-search"></i>
  </div>

  <ul class="anim-wrapper data-start-offset="14">
    <li class="anim-circle">Jobs</li>
    <li class="anim-circle">Real<br>estate</li>
    <li class="anim-circle active">Busi-<br>ness</li>
    <li class="anim-circle">Cars</li>
    <li class="anim-circle">Deals</li>
    <li class="anim-circle">Events</li>
  </ul>
</div>

Upvotes: 0

Aravind S
Aravind S

Reputation: 2395

Here is the working demo with your code.i adjusted the left value to handle it as per your requirement.

$(function(){

			setInterval(function(){
				animateSpinner();
			}, 2000);
		});

		function animateSpinner(){
			$('.anim-wrapper').animate({
				left: -  ( parseInt( $('.anim-wrapper').attr('data-start-offset') ) )
				},
				500, function() {

				$('.anim-wrapper .active').removeClass('active').next().addClass('active');
				$('.anim-circle:nth-child(1)').appendTo($('.anim-wrapper'));
				

			});
		}
body{
			padding: 64px;
			margin: 0px;
			color: #242424;
		}
		.anim-wrapper{
    overflow: auto;
			left: -14px;
		    position: relative;
	        width: 720px;
	        padding:  0px;
	        margin: 0px;
		    top: 10px;
		    height: 61px;
		    overflow:hidden;
		}
		.anim-circle{
			width: 50px;
			height: 50px;
			background:#ededed;
			display: flex;
			align-items: center;
			justify-content: center;
			float: left;
			list-style: none;
			margin: 5px;
			border-radius: 50%;
			font-size: 12px;
			text-align: center;
		}
		.position-relative{
			position: relative;
		}
		.magnifying-wrapper{
			position: absolute;
		    width: 80px;
		    height: 80px;
		    z-index: 999;
		    margin: 0px auto;
		    left: 50%;
		    transform: translateX(-50%);
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    font-size: 100px;
		    top: 11px;
		}
		.cn-spinner{
			width: 295px;
		    position: relative;
		    height: 150px;
		    overflow: hidden;
		}
		.anim-circle.active{
			/* transform: scale(1.21); */
			background: #ef7100;
			color: #FFF;
 animation-name: spin;
  animation-duration: 1000ms;
		}
@keyframes spin {
from {
    transform:rotate(0deg);
}
to {
    transform:rotate(360deg);
}
}
<link href="https://1662037994.rsc.cdn77.org/plugins/foundry/css/themify-icons.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="position-relative cn-spinner center-content-parent">
		<div class="magnifying-wrapper">
			<i class="ti-search"></i>
		</div>
		<ul class="anim-wrapper overflow-auto" data-start-offset="14">
			
			<li class="anim-circle">Jobs</li>
			<li class="anim-circle">Real<br>estate</li>
			<li class="anim-circle active">Busi-<br>ness</li>
			<li class="anim-circle">Cars</li>
			<li class="anim-circle">Deals</li>
			<li class="anim-circle">Events</li>

		</ul>
	</div>

Upvotes: 1

Related Questions