circle-test fade in fade out css

homepage nav successful test

by Brent White

HTML

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

CSS

.circle-container{
    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-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;
$(window).mousemove(function(event){
    var pageOffset = $(".big-circle").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");
var xAxisOfPage = 0, yAxisOfPage = 0;

var loop = setInterval(function(){
    xAxisOfPage += (mouseXval - xAxisOfPage) / 3;
    yAxisOfPage += (mouseYval - yAxisOfPage) / 3;
    smallCircle.css({left:xAxisOfPage, top:yAxisOfPage});
}, 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");
});