My goal is to recreate the image shown in the picture:
https://i.sstatic.net/z08II.jpg
In case the image is blocked, you can view it here: https://i.sstatic.net/YYg4J.jpg
The picture appears to have only one icon visible, but there are actually 4 icons. The image represents the path that the icons should follow.
I've created a snippet or you can also check it out on Codepen
var outerBox = $('.eight-box'),
boxHeight = $(outerBox).height(),
boxWidth = $(outerBox).width();
function changeNumbers() {
var pos1 = $('.pos-1'),
pos2 = $('.pos-2'),
pos3 = $('.pos-3'),
pos4 = $('.pos-4');
$('.col-1').addClass('pos-1');
$('.col-1').removeClass('pos-4')
$('.col-2').addClass('pos-2');
$('.col-2').removeClass('pos-4')
$('.col-3').addClass('pos-3');
$('.col-3').removeClass('pos-4')
};
// var refreshId = setInterval(changeNumbers, 1500);
changeNumbers();.eight-box {
position: relative;
display: block;
margin: 1em auto;
width: 16em;
height: 16em;
font-family: sans-serif;
font-size: 20px;
border: 1px solid;
border-radius: 50%;
}
.fig-8 {
display: block;
position: absolute;
color: #fff;
width: 2em;
height: 2em;
line-height: 2;
text-align: center;
font-weight: bold;
font-smoothing: antialiased;
transition: all .5s linear;
overflow: hidden;
z-index: 5;
}
.col-1 {
background: #1abc9c;
}
.col-2 {
background: #9b59b6;
}
.col-3 {
background: #27ae60;
}
.col-4 {
background: #2c3e50;
}
.pos-1 {
top: 30%;
left: 93.75%;
}
.pos-2 {
top: 66.25%;
left: 88.75%;
}
.pos-3 {
top: 72.92%;
right: 83.125%;
}
.pos-4 {
top: 19.58%;
right: 88.75%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="eight-box">
<div class="fig-8 col-1 pos-4">1</div>
<div class="fig-8 col-2 pos-4">2</div>
<div class="fig-8 col-3 pos-4">3</div>
<div class="fig-8 col-4 pos-4">4</div>
</div>This is an overview of what needs to be accomplished:
1 - Upon page load, all icons must start from the same position as the icon labeled with number 4.
2 - Each icon should then navigate around the circle and settle into its original position. For example, Icon 3 should move along its designated path and stop at its final location.
Currently, the code animation moves the icons back to their starting positions after loading, rather than following the desired circular path.
TL;DR: The icons begin in alignment with the icon numbered 4 upon page load, and then proceed to complete a full circle around the perimeter before resuming their original placement.
For instance: Icon 4 remains stationary. Icon 3 descends slightly along the circle's path. And so forth.
All icons should travel from left to right, akin to a "follow the leader" sequence, ending up at their designated positions as seen in the visual reference or Codepen sample.
Any suggestions?