Stack Overflow Asked by abdelhamied mostafa on December 16, 2020
I was studying this website and I wonder how he achieved this cursor interaction
https://pchico.es/
what I want to do?
I’m not looking for the wavy effect on images
what I already did / tried?
here is my html
.cursor {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
transform: translate3d(0, 0, 0);
}
#main {
position: absolute;
background-color: black;
width: 10px;
height: 10px;
border-radius: 50%;
z-index: 999;
opacity: 0.1;
}
#follower {
position: absolute;
background-color: lightgray;
opacity: 0.5;
width: 50px;
height: 50px;
border-radius: 50%;
margin-top: -20px;
margin-left: -20px;
z-index: 998;
}
a:hover .cursor #main {
background-color: red;
}
<div class="App">
<div class="cursor"><span id="main" style="left: 885px; top: 199px; display: none;"></span><span id="follower" style="left: 885px; top: 199px; display: none;"></span></div>
<header>
<div class="content">
<nav>
<div class="logo"><img src="/static/media/logo.29eeb746.svg" alt=""></div>
<ul>
<li><a href="#more">Know More</a></li>
<span class="separator"></span>
<li><a href="mailto:[email protected]">[email protected]</a></li>
</ul>
</nav>
<div class="welcome">
<p class="hello">Hello...</p>
<p>I'm Abdelhamied <br> Mostafa</p>
</div>
<div class="foot">
<p class="job">Full stack web developer</p>
<p class="status">Self employed</p>
</div>
</div>
<div class="full-pic"><img src="/static/media/side-pic.cdb78a3a.png" alt=""></div>
</header>
</div>
I opened up the devtools console and studied their code. I found this script link https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js in their websites code and I found the type of library they were using. This is the link to the library the website was using to achieve those animations: The link to the library. But not all the animations were using this library others were made by the websites programmer.
Answered by David Ngumbu on December 16, 2020
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP