I want to achieve this cursor interaction

user_10264383 0
Viewed 257

I was studying this website and I wonder how he achieved this cursor interaction https://pchico.es/

what I want to do?

  • custom cursor
  • this stretching effect on the follower
  • and the hovering effect on links or images

I'm not looking for the wavy effect on images

what I already did / tried?

  • I made a custom cursor and made it follow my pointer
  • I tried to change the background color of the cursor if i hover links but it didn't work
  • and about the stretching effect of the gray follower. yeah I didn't find anything online I don't even know what to search about

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:contact@Abdelhamied.ml">Contact@Abdelhamied.ml</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>

reactjs css html javascript
1 Answers

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.

user_144031970
Related