AnswerBun.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/[email protected]/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!

Related Questions

Output is not shown in C

1  Asked on December 13, 2021 by cally

     

Have to print to screen for program to work

1  Asked on December 13, 2021

 

why ” is not pushed to stack to indicate the end of string?

0  Asked on December 13, 2021 by user11224591

   

Printing wrong text in list in Python

1  Asked on December 13, 2021 by n1ng4

         

Getting and saving application scope variable in Tomcat

3  Asked on December 13, 2021 by woodsman

   

Issue with Ansible Check and Diff Mode

1  Asked on December 13, 2021 by sunder

   

Java HashMap in Python Code throwing Error

1  Asked on December 13, 2021 by pritiraj

     

I am a little bit confused by the super().__init__()

4  Asked on December 13, 2021 by nick-yang

   

Formset not showing in Django 3

0  Asked on December 13, 2021 by ethan-roman

 

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP