All Source Code : https://www.patreon.com/onlinetutorials Get now more than 1000+ source code just by clicking on this link …
source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cursor Trails</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cursor"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
let cursor = document.querySelector('.cursor');
for (let i = 0; i < 20; i++){
let span = document.createElement('span');
span.style.setProperty('--i', i+1);
span.style.left = i*15+'px';
cursor.appendChild(span);
}
document.addEventListener('mousemove', e=> {
gsap.to("span", {
x: e.clientX,
y: e.clientY,
stagger: 0.05
})
})
})
</script>
</body>
</html>
*
{
margin: 0;
padding: 0;
}
body
{
background: #2e2c39;
overflow: hidden;
}
.cursor
{
position: absolute;
left: 40px;
pointer-events: none;
}
.cursor span
{
position: absolute;
width: 12px;
height: 60px;
background: #fff;
transform: translate(-50%,-50%);
z-index: 1;
border-top: 60px solid #ff7534;
border-bottom: 60px solid #00c464;
}
.cursor span:nth-child(9)
{
z-index: 1000;
}
.cursor span:nth-child(9)::before
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
background: url(chakra.png);
background-size: cover;
animation: animate 20s linear infinite;
}
@keyframes animate
{
0%
{
transform: rotate(0deg);
}
100%
{
transform: rotate(360deg);
}
}
