DEV Community: anomaly3108

Make SVG follow cursor using CSS and JS

anomaly3108 — Sun, 09 Jan 2022 15:29:09 +0000

In this article, we are going to make an SVG Eye that will follow the mouse pointer with a clean UI and smooth transition. First, As always let's see what are we building.

PREVIEW

HTML

<img src="face-with-rolling-eyes.png" class="image">
  <div class="container">
    <svg width="100" height="100" class="eye">
        <circle cx="50" cy="50" r="50" fill="white" class="eyeball_left" />
        <circle cx="50" cy="50" r="20" fill="#0D0D20" class="pupil_left" />
    </svg>
    <svg width="100" height="100" class="eye">
      <circle cx="50" cy="50" r="50" fill="white" class="eyeball_right" />
      <circle cx="50" cy="50" r="20" fill="#0D0D20" class="pupil_right" />
    </svg>
  </div>

We will have an outer div with class .container. It will have two separate children SVG which will be the eyes of our character.
Inside SVG we create 2 circles one for eyeball and one for pupil.
The img tag will be the face of the character

I guess now you have an overview of what are we doing. Now let's get into the CSS.

CSS

body{
    margin:0;
    padding:0;
    background: #282631;
    display: flex;
    width: 100%;
    height:100vh;
  }
  .container{
    margin: auto;
  }
  .image{
    position: absolute;
    top: 250px;
    left: 620px;
    z-index: -1;
  }
  .pupil_left{
    position:relative;
  }
  .pupil_right{
    position:relative;
  }

Everything above is self-explanatory but If you have any queries then comment down.

JAVASCRIPT

This is where the fun begins. Let's see from the scratch.
First, we need to find elements with an "eyeball_left" and "pupil_left" class

    let eyeball_left = document.querySelector(".eyeball_left"),
    pupil_left = document.querySelector(".pupil_left"),

Now, We will get the radius of the circles to find the center of the circles. The getBoundingClientRect returns a DOMRect object with eight properties: left, top, right, bottom, x, y, width, height.

    eyeArea_left = eyeball_left.getBoundingClientRect(),
    pupil_leftArea = pupil_left.getBoundingClientRect(),
    R_left = eyeArea_left.width/2,
    r_left = pupil_leftArea.width/2,
    centerX_left = eyeArea_left.left + R_left,
    centerY_left = eyeArea_left.top + R_left;

Copy the same code for right eye. Just change the variable names to ###_right for right Eye.

    let eyeball_right = document.querySelector(".eyeball_right"),
    pupil_right = document.querySelector(".pupil_right"),
    eyeArea_right = eyeball_right.getBoundingClientRect(),
    pupil_rightArea = pupil_right.getBoundingClientRect(),
    R_right = eyeArea_right.width/2,
    r_right = pupil_rightArea.width/2,
    centerX_right = eyeArea_right.left + R_right,
    centerY_right = eyeArea_right.top + R_right;

Now, let us create a mouse event. Through which, we will find the distance between the pointer and center of the eyeball. Math.atan2 will return the angle in radians between the two points. By using the formula, we can convert radian to degree.
Using this angle we will position the pupil inside the eyeball

document.addEventListener("mousemove", (e)=>{
  let x_left = e.clientX - centerX_left,
      y_left = e.clientY - centerY_left,
      theta_left = Math.atan2(y_left,x_left),
      angle_left = theta_left*180/Math.PI + 360;

Create a same for the right eye

  let x_right = e.clientX - centerX_right,
      y_right = e.clientY - centerY_right,
      theta_right = Math.atan2(y_right,x_right),
      angle_right = theta_right*180/Math.PI + 360;

Finally, we will use JS style property to move and rotate the pupil inside the Eye to follow the cursor

  pupil_left.style.transform = `translateX(${R_left - r_left +"px"}) rotate(${angle_left + "deg"})`;
  pupil_left.style.transformOrigin = `${r_left +"px"} center`;

  pupil_right.style.transform = `translateX(${R_right - r_right +"px"}) rotate(${angle_right + "deg"})`;
  pupil_right.style.transformOrigin = `${r_right +"px"} center`;

});

Now we have covered all the aspects of this now let's see the full Javascript code.

<script>
    let eyeball_left = document.querySelector(".eyeball_left"),
    pupil_left = document.querySelector(".pupil_left"),
    eyeArea_left = eyeball_left.getBoundingClientRect(),
    pupil_leftArea = pupil_left.getBoundingClientRect(),
    R_left = eyeArea_left.width/2,
    r_left = pupil_leftArea.width/2,
    centerX_left = eyeArea_left.left + R_left,
    centerY_left = eyeArea_left.top + R_left;

    let eyeball_right = document.querySelector(".eyeball_right"),
    pupil_right = document.querySelector(".pupil_right"),
    eyeArea_right = eyeball_right.getBoundingClientRect(),
    pupil_rightArea = pupil_right.getBoundingClientRect(),
    R_right = eyeArea_right.width/2,
    r_right = pupil_rightArea.width/2,
    centerX_right = eyeArea_right.left + R_right,
    centerY_right = eyeArea_right.top + R_right;

document.addEventListener("mousemove", (e)=>{
  let x_left = e.clientX - centerX_left,
      y_left = e.clientY - centerY_left,
      theta_left = Math.atan2(y_left,x_left),
      angle_left = theta_left*180/Math.PI + 360;

  let x_right = e.clientX - centerX_right,
      y_right = e.clientY - centerY_right,
      theta_right = Math.atan2(y_right,x_right),
      angle_right = theta_right*180/Math.PI + 360;


  pupil_left.style.transform = `translateX(${R_left - r_left +"px"}) rotate(${angle_left + "deg"})`;
  pupil_left.style.transformOrigin = `${r_left +"px"} center`;

  pupil_right.style.transform = `translateX(${R_right - r_right +"px"}) rotate(${angle_right + "deg"})`;
  pupil_right.style.transformOrigin = `${r_right +"px"} center`;

});
</script>

The final product will look like:-

You can use the following CSS in body selector to change the cursor by any image

cursor: url("heart.png"), auto;

Wrapping Up

I hope you enjoyed the article, if yes then don't forget to press ❤️. You can also bookmark it for later use. It was fun to make this Project and If you have any queries or suggestions don't hesitate to drop them. See you again.

Create Image slider using Js and CSS

anomaly3108 — Sat, 01 Jan 2022 11:25:25 +0000

In this article, we are going to make an Image Slider with a clean UI and smooth transition. First, Let's see what are we building.

PREVIEW

HTML

<div class="container">
     <div class="img-comp-container">
          <div class="img-comp-img">
               <img src="a.png" height="400" width="300">
          </div>
          <div class="img-comp-img img-comp-overlay">
               <img src="b.png" height="400" width="300">
          </div>
     </div>
</div>

We will have an outer div with class .img-comp-container. It will have two separate children.

.img-comp-img: It will contain the first image.
.img-comp-overlay: It will contain the second image for overlay. This image will be overlayed over the top of first image to create the effect of sliding.

I guess now you have an overview of what are we doing. Now let's get into the CSS.

CSS

* {
    box-sizing: border-box;
}

.img-comp-container {
    position: relative;
    height: 500px;
}

.img-comp-img {
    position: absolute;
    width: auto;
    height: auto;
    overflow: hidden;
}

.img-comp-img img {
    padding: 20px;
    display: table-row;
}
.container {
    display: table;
}

This CSS is for the image that will be displayed on the screen.
Everything above is self-explanatory but If you have any queries then comment down.

.img-comp-slider {
    position: absolute;
    z-index: 9;
    cursor: ew-resize;
    /*set the appearance of the slider:*/
    width: 40px;
    height: 40px;
    background: url(slider_icon.jpg);
    background-color: #ffffff70;
    background-repeat: round;
    backdrop-filter: blur(5px);
    border-radius: 50%;
}

this CSS is for the slider button

Javascript

This is where the fun begins. Let's see from the scratch.
First, we need to find all elements with an "overlay" (img-comp-overlay) class

var x, i;
    /*find all elements with an "overlay" class:*/
    x = document.getElementsByClassName("img-comp-overlay");
    for (i = 0; i < x.length; i++) {
        /*once for each "overlay" element:
        pass the "overlay" element as a parameter when executing the compareImages function:*/
        compareImages(x[i]);
    }

Next, we will create a function compareImages with an img parameter

function compareImages(img) {
   var slider, img, clicked = 0, w, h;
   /*get the width and height of the img element*/
   w = img.offsetWidth;
   h = img.offsetHeight;
   /*set the width of the img element to 50%:*/
   img.style.width = (w / 2) + "px";
}

Now, We will create the slider using Js in the same function

/*create slider:*/
slider = document.createElement("DIV");
slider.setAttribute("class", "img-comp-slider");
/*insert slider*/
img.parentElement.insertBefore(slider, img);
position the slider in the middle:*/
slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";

Now, Let us add the listeners that will be triggered when we press the mouse button.

/*execute a function when the mouse button is pressed:*/
slider.addEventListener("mousedown", slideReady);
/*and another function when the mouse button is released:*/
window.addEventListener("mouseup", slideFinish);    
/*or touched (for touch screens:*/
slider.addEventListener("touchstart", slideReady);
/*and released (for touch screens:*/
window.addEventListener("touchstop", slideFinish);

Now, Basic structure of our slider is created. Next we need to create some functions that will perform the main functionality of the slider. i.e, Slide over the the image.

For this we will first create slideReady Function inside the compareImages Function that will be executed when mouse button is pressed.

function slideReady(e) {
    /*prevent any other actions that may occur when moving over the image:*/
    e.preventDefault();
    /*the slider is now clicked and ready to move:*/
    clicked = 1;
    /*execute a function when the slider is moved:*/
    window.addEventListener("mousemove", slideMove);
    window.addEventListener("touchmove", slideMove);
}

Next, create another Function inside the compareImages Function when the slider is no longer clicked

function slideFinish() {
    /*the slider is no longer clicked:*/
    clicked = 0;
}

Now, we will create 3 more functions in compareImages with which we will get the cursor position and move the slider accordingly across the Image window

function slideMove(e) {
    var pos;
    /*if the slider is no longer clicked, exit this function:*/
    if (clicked == 0) return false;
    /*get the cursor's x position:*/
    pos = getCursorPos(e)
        /*prevent the slider from being positioned outside the image:*/
    if (pos < 0) pos = 0;
    if (pos > w) pos = w;
    /*execute a function that will resize the overlay image according to the cursor:*/
    slide(pos);
}

function getCursorPos(e) {
    var a, x = 0;
    e = e || window.event;
    /*get the x positions of the image:*/
    a = img.getBoundingClientRect();
    /*calculate the cursor's x coordinate, relative to the image:*/
    x = e.pageX - a.left;
    /*consider any page scrolling:*/
    x = x - window.pageXOffset;
    return x;
}

function slide(x) {
    /*resize the image:*/
    img.style.width = x + "px";
    /*position the slider:*/
    slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
}

Wrap it all in a parent function with name initComparisons.
Now we have covered all the aspects of this now let's see the full Scripts.js file

function initComparisons() {
    var x, i;
    /*find all elements with an "overlay" class:*/
    x = document.getElementsByClassName("img-comp-overlay");
    for (i = 0; i < x.length; i++) {
        /*once for each "overlay" element:
        pass the "overlay" element as a parameter when executing the compareImages function:*/
        compareImages(x[i]);
    }

    function compareImages(img) {
        var slider, img, clicked = 0,
            w, h;
        /*get the width and height of the img element*/
        w = img.offsetWidth;
        h = img.offsetHeight;
        /*set the width of the img element to 50%:*/
        img.style.width = (w / 2) + "px";
        /*create slider:*/
        slider = document.createElement("DIV");
        slider.setAttribute("class", "img-comp-slider");
        /*insert slider*/
        img.parentElement.insertBefore(slider, img);
        /*position the slider in the middle:*/
        slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
        slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
        /*execute a function when the mouse button is pressed:*/
        slider.addEventListener("mousedown", slideReady);
        /*and another function when the mouse button is released:*/
        window.addEventListener("mouseup", slideFinish);
        /*or touched (for touch screens:*/
        slider.addEventListener("touchstart", slideReady);
        /*and released (for touch screens:*/
        window.addEventListener("touchstop", slideFinish);

        function slideReady(e) {
            /*prevent any other actions that may occur when moving over the image:*/
            e.preventDefault();
            /*the slider is now clicked and ready to move:*/
            clicked = 1;
            /*execute a function when the slider is moved:*/
            window.addEventListener("mousemove", slideMove);
            window.addEventListener("touchmove", slideMove);
        }

        function slideFinish() {
            /*the slider is no longer clicked:*/
            clicked = 0;
        }

        function slideMove(e) {
            var pos;
            /*if the slider is no longer clicked, exit this function:*/
            if (clicked == 0) return false;
            /*get the cursor's x position:*/
            pos = getCursorPos(e)
                /*prevent the slider from being positioned outside the image:*/
            if (pos < 0) pos = 0;
            if (pos > w) pos = w;
            /*execute a function that will resize the overlay image according to the cursor:*/
            slide(pos);
        }

        function getCursorPos(e) {
            var a, x = 0;
            e = e || window.event;
            /*get the x positions of the image:*/
            a = img.getBoundingClientRect();
            /*calculate the cursor's x coordinate, relative to the image:*/
            x = e.pageX - a.left;
            /*consider any page scrolling:*/
            x = x - window.pageXOffset;
            return x;
        }

        function slide(x) {
            /*resize the image:*/
            img.style.width = x + "px";
            /*position the slider:*/
            slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
        }
    }
}

Now the final step, use this script in HTML and call the initComparisons function at the starting of the page where you want the slider.

<script>
    initComparisons();
</script>

The final product will look like:-

Wrapping Up

I hope you enjoyed the article, if yes then don't forget to press ❤️. You can also bookmark it for later use. It was fun to make this slider and If you have any queries or suggestions don't hesitate to drop them. See you.