Add cursor following image to Cargo Site

https://cargotutorials.com/best-5-effects-for-your-cargo-collective-website-you-must-know/

Table of Contents

Add image the following cursor to the Cargo Site using HTML, CSS, and JS

In this blog, we will see how to add an image following the cursor to the Cargo site and switch images on link hover using HTML, CSS, and JS.

We will see how to implement this in both the editors of Cargo 2 and Cargo 3.

Add image following cursor effect in Cargo 3

To style your cursor with a custom shape or image using global CSS in the Cargo 3 website editor, you can follow these steps:

Open the Cargo 3 website editor.
On the right side, look for the ruler icon and click on it. This should open a popup.
In the popup, find the Code icon and click on it.
This will open the global code editor. Navigate to the CSS section.
Paste the following CSS code into the editor to style your shape following the cursor.
Click on Publish Changes.

CSS Code for cursor following shape –

#cursor {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: red;
    position: absolute;
    margin: -16px 0 0 -16px;
    pointer-events: none;
}

#cursor.hovered {
    background: green !important;
    width: 40px;
    height: 40px; 
}

In the above CSS code we have a circle shape of red color but instead of a shape you want to use for your custom image then you can add this code which has a background-image CSS property in which you have to use your image URL –

#cursor {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-image: url('https://freight.cargo.site/t/original/i/O948318998312792871587228232284/eyeballs.svg');
    position: absolute;
    margin: -16px 0 0 -16px;
    pointer-events: none;
     background-repeat: no-repeat;
    background-size: contain;
}

#cursor.hovered {
    background-image: url('https://freight.cargo.site/t/original/i/Y1656402980509634587643011632767/download-4.png');
    width: 40px;
    height: 40px; 
    background-repeat: no-repeat;
    background-size: contain;
}

JS Code –

<div id="cursor"></div>
<script>

  (function () {
    console.clear();

    const follower = document.querySelector('#cursor');

    let posX = 0;
    let posY = 0;
    let mouseX = 0;
    let mouseY = 0;

    const ease = 0.1;

    function easeTo() {
      const followerBounds = follower.getBoundingClientRect();

      const dX = mouseX - (followerBounds.left + 16);
      const dY = mouseY - (followerBounds.top + 16);

      posX += dX * ease;
      posY += dY * ease;
    }

    function update() {
      easeTo();
      follower.style.transform = `translate3d(${posX}px, ${posY}px, 0)`;
      requestAnimationFrame(update);
    }

    function setCoords(e) {
      mouseX = e.clientX;
      mouseY = e.clientY;
    }

    document.onmousemove = setCoords;
    update();

  setTimeout(function() {
    var links = document.querySelectorAll("a");
    for (var i = 0; i < links.length; i++) {
        links[i].addEventListener("mouseover", function() {
            follower.classList.add("hovered");
        });
        links[i].addEventListener("mouseout", function() {
            follower.classList.remove("hovered");
        });
    }
}, 1000); 
  })();
  
</script>

Add image following cursor effect in Cargo 2

To style your cursor with a custom shape or image using global CSS in the Cargo 3 website editor, you can follow these steps:

Open the Cargo 2 website editor.
Click on the “Design” tab to access the design settings of your website.
Navigate to the CSS editor within the “Design” tab. Add or modify the CSS code as needed to style your website. Make sure to save your changes.
After editing the CSS, switch to the “HTML” tab to access the HTML code of your website.
Add the Javascript code to have the functionality of the image following the cursor. The javascript code for Cargo 2 is different from Cargo 3 so make sure you use the correct one.
Once you’ve made all your desired changes to the CSS and HTML, click on the “Save” button to apply the changes and make them live on your website.

CSS Code –

#cursor {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background:  green;
    position: absolute;
    margin: -16px 0 0 -16px;
    pointer-events: none;

  }

  #cursor.hovered {
    background:  red;
    width: 40px;
    height: 40px; 
  }

JS Code for Cargo 2 –


<div id="cursor"></div>

<script>
  window.onload = function(){
  (function () {
    console.clear();
    const follower = document.querySelector('#cursor');
    let posX = 0;
    let posY = 0;
    let mouseX = 0;
    let mouseY = 0
    const ease = 0.1;

    function easeTo() {
      const followerBounds = follower.getBoundingClientRect();
      const dX = mouseX - (followerBounds.left + 16);
      const dY = mouseY - (followerBounds.top + 16);
      posX += dX * ease;
      posY += dY * ease;
    }

    function update() {
      easeTo();
      follower.style.transform = `translate3d(${posX}px, ${posY}px, 0)`;
      requestAnimationFrame(update);
    }
    function setCoords(e) {
      mouseX = e.clientX;
      mouseY = e.clientY;
    }

    document.onmousemove = setCoords;
    update();

    var links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
      links[i].addEventListener("mouseover", function() {
        follower.classList.add("hovered");
      });
      links[i].addEventListener("mouseout", function() {
        follower.classList.remove("hovered");
      });
    }
  })();
  }
</script>