Imagine this: in a specific area on the screen, you'll see these cute little dots, all lively and moving around. Now, when you're using your computer and you slide your mouse over, something magical happens – these dots start appearing in a line, connecting to your cursor as if they're following its path.
And it's not just static; these dots keep moving, almost dancing on the screen. And those lines connecting them to your cursor? They move too, keeping up with the action.
But here's the kicker – not every dot jumps into action. Only the ones close enough to your cursor, within a certain pixel range, decide to join the party and create that cool connection.
If you want to dive deeper into how it's all done, check out the step-by-step coding tutorial video.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<span>Kênh</span>
<span>Youtube</span>
<span>Lùn</span>
<span>Dev</span>
</div>
<svg width="100vw" height="100vh" id="svg"></svg>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
font-size: 30px;
font-family: monospace;
letter-spacing: 20px;
width:max-content;
}
span{
opacity: 0;
animation:show_content 2s ease-in-out 1 forwards;
}
span:nth-child(2){
animation-delay: 1s;
}
span:nth-child(3){
animation-delay: 2s;
}
span:nth-child(4){
animation-delay: 3s;
}
@keyframes show_content{
0%{
opacity: 0;
filter:blur(33px)
}100%{
opacity: 1;
filter:blur(0px)
}
}
#svg{
position: relative;
z-index: -1;
}
.ellipse:nth-child(2n){
filter:blur(5px)
}
.line{
opacity: 0.5;
}
Javascript
$(document).ready(function(){
var array = [];
var heightWindow = $(window).height();
var widthWindow = $(window).width();
for(var i = 0; i < 40; i++){
array.push({
top: Math.floor(Math.random()*heightWindow),
left: Math.floor(Math.random()*widthWindow),
id: i
})
}
array.forEach(function(value){
var newEllipse = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse');
newEllipse.setAttribute('class','ellipse');
newEllipse.setAttribute('id','ellipse_'+value.id);
newEllipse.setAttribute('cx',value.left);
newEllipse.setAttribute('cy',value.top);
newEllipse.setAttribute('rx',5);
newEllipse.setAttribute('ry',5);
$('#svg').append(newEllipse);
})
$(window).mousemove(function(event){
$('line').remove();
(array.filter(val => Math.abs(val.top - event.pageY) <= 350 && Math.abs(val.left - event.pageX) <= 350)).forEach(function(value){
var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
newLine.setAttribute('class','line');
newLine.setAttribute('id','line_'+value.id);
newLine.setAttribute('x1',value.left);
newLine.setAttribute('y1',value.top);
newLine.setAttribute('x2',event.pageX);
newLine.setAttribute('y2',event.pageY);
newLine.setAttribute('stroke','black');
$('#svg').append(newLine);
})
})
$(window).mouseout(function(event){
$('line').remove();
});
setInterval(function(){
// Math.random()*(max - min ) + min
array.forEach(function(value, key){
var top = Math.random()*((value.top + 2) - (value.top - 2) ) + (value.top - 2);
var left = Math.random()*((value.left + 2) - (value.left - 2) ) + (value.left - 2);
array[key].top = top;
array[key].left = left;
var $ellipse = $('#ellipse_' + value.id);
$ellipse.animate({dot: 0},{
step: () => {$ellipse.attr('cx', left), $ellipse.attr('cy', top)},
duration: 1
});
if($('#line_' + value.id).lengh){
var $line = $('#line_' + value.id);
$line.animate({dot: 0},{
step: () => {$line.attr('x1', left), $line.attr('y1', top)},
duration: 1
});
}
})
},500)
console.log(array);
})
Comments
Post a Comment