Multiple circles test

more circles

by Brent White

HTML

<div class="circle-container1">
    <a href="#" id="projects">Projects</a>
     <div class="big-circle">
        <div id="small-circle"></div>  
    </div>
    
     <div class="big-circle2">
        <div id="small-circle2"></div>
     </div>
</div>

CSS

.circle-container1{
    display: flex;
    justify-content:center;
    align-items:center;
}

#projects{
    position: relative;
    left:85px;
}

.big-circle{
    background-color:magenta;
    border-radius:50%;
    width:120px;
    height:120px;
    top:0;
    left:0;
    overflow:hidden;
}

.big-circle2{
    background-color:blue;
    border-radius:50%;
    width:120px;
    height:120px;
    top:0;
    left:0;
    overflow:hidden;
    margin-left:50px;
}

.big-circle2:hover #small-circle2{
    display: block;
}

#small-circle2{
    display: none;
    position: relative;
    background-color:yellow;
    width:30px;
    height:30px;
    border-radius:50%;
} 

.big-circle:hover #small-circle { 
    display:block;
}

#small-circle {
    opacity:0;
    position: relative;
    background-color:yellow;
    width:30px;
    height:30px;
    border-radius:50%;
}

#small-circle.on{
    opacity:0;
    transition: opacity 0.5s linear;
}
#small-circle.off{
    opacity: 1;
    transition:opacity 0.5s linear;
}

JavaScript

var mouseXval = 0, mouseYval = 0, limitX = 120-30, limitY= 120-30;
$(".big-circle, .big-circle2").mousemove(function(event){
    var pageOffset = $(this).offset();
    mouseXval = Math.min(event.pageX - pageOffset.left, limitX);
    mouseYval = Math.min(event.pageY - pageOffset.top, limitY);
    if (mouseXval < 0) mouseXval = 0;
    if (mouseYval < 0) mouseYval = 0;
});

var smallCircle = $("#small-circle, #small-circle2");
var xPage = 0, yPage = 0;

var loop = setInterval(function(){
    // speed of small-circle 
    // change divisor number to set speed
    xPage += (mouseXval - xPage) / 3;
    yPage += (mouseYval - yPage) / 3;
    smallCircle.css({left:xPage, top:yPage});
}, 30);

// when mouse enters big-circle fade small circle in
$(".big-circle").mouseenter(function(){
    $("#small-circle").addClass("off").removeClass("on");
});

// when mouse leaves big circle fade small circle out
$(".big-circle").mouseleave(function(){
    $("#small-circle").removeClass("off").addClass("on");
});