TransWikia.com

I want to achieve this cursor interaction

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?

  • 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:[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>

One Answer

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

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP