CODEWITHSUNDEEP
htmlcss
Taste of Leaving
Taste of Leaving

Reputation: 72

Custom css cursor transition

I have a ul with some items on each li I have a different cursor it works completely fine but it's not smooth, so if there is any way to make the transition from the default cursor to a custom image?

HTML

<section class="who">
  <ul>
     <li>Purpose</li>
     <li>Creative</li>
     <li>Enthusiastic</li>
     <li>Adventure</li>
     <li>Curious</li>
     <li>Passionate</li>
  </ul>
</section>

CSS

.who ul li:first-of-type {
   cursor: url('/assets/media/icons/target.png'), auto;
}

and so on, you got what idea.

Upvotes: 0

Views: 1047

Answers (1)

Aldo Maria Landini
Aldo Maria Landini

Reputation: 157

So do you want change image cursor not quickly, but smooth like the fade-in/out effect? In that case you have also involve javascript:

  1. .who ul li { cursor: none; }
  2. Create a <div class="cursor-container"></div>
  3. .cursor-container { position:absolute; z-index:100; }
  4. Put all your image into a
  5. .cursor-container .image-container { position:absolute; }
  6. Use javascript's onMouseMove( ) in order to take cursor's coordinates and moving .cursor-container alongside (see here how)
  7. With CSS hide all images .cursor-container .image-container { display:none }
  8. Organize your list like <li class="whatever" onmouseover="changeCursor()"> each with a different class name
  9. With JS you have to switch() all <li>'s classes and apply CSS3 transition (like opacity) to the right one.

Hope to has been useful.

This code below is an example (not worked on jsfiddle, copy on you local page).

<!DOCTYPE html>
<html>
  <head>
    <title> </title>

    <style type="text/css">
      .who ul {
        font-size: 0px;
        cursor: none;
      }
      .who ul li {
        display: inline-block;
        padding: 10px;
        background-color: #CCC;
        color: #FFF;
        font-size: 18px;
        cursor: none;
      }
      .who ul li.facebook {
        background-color: #3b5998;
      }
      .who ul li.twitter {
        background-color: #1dcaff;
      }
      .who ul li.youtube {
        background-color: #ff0000;
      }
      .who ul li.whatsapp {
        background-color: #075e54;
      }
      .who ul li.instagram {
        background-color: #e95950;
      }

      #cursor-container {
        position: absolute;
        width: 20px;
        height: 20px;
        display: none;
        cursor: none;
      }
      #cursor-container.visible {
        display: block;
      }
      #cursor-container .image-container {
        position: absolute;
        width: inherit;
        height: inherit;
        opacity: 0;
        background-color: #FFF;

        transition: opacity 0.6s linear;
        -moz-transition: opacity 0.6s linear;
        -o-transition: opacity 0.6s linear;
        -webkit-transition: opacity 0.6s linear;
      }
      #cursor-container .image-container.fadeIn {
        opacity: 1;
      }
      #cursor-container .image-container img {
        width: 100%;
        height: 100%;
      }

    </style>
  </head>
  <body>

    <div class="who">
        <ul>
            <li class="facebook" onmouseover="changeCursor(this);">facebook</li>
        <li class="twitter" onmouseover="changeCursor(this);">twitter</li>
        <li class="youtube" onmouseover="changeCursor(this);">youtube</li>
        <li class="whatsapp" onmouseover="changeCursor(this);">whatsapp</li>
        <li class="instagram" onmouseover="changeCursor(this);">instagram</li>
        </ul>
    </div>
    <div id="cursor-container">
        <div class="image-container facebook">
            <img src="http://icons.iconarchive.com/icons/sicons/flat-shadow-social/256/facebook-icon.png" />
        </div>
        <div class="image-container twitter">
            <img src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/Twitter_NEW.png" />
        </div>
        <div class="image-container youtube">
            <img src="https://image.flaticon.com/icons/png/128/185/185983.png" />
        </div>
        <div class="image-container whatsapp">
            <img src="http://aux2.iconspalace.com/uploads/whatsapp-icon-256-829186234.png" />
        </div>
        <div class="image-container instagram">
            <img src="https://image.flaticon.com/icons/png/128/174/174855.png" />
        </div>
    </div>

    <script type="text/javascript">

    var cursor = document.getElementById('cursor-container');
    var cursorImages = cursor.getElementsByClassName('image-container');

    (() => {

        let list = document.getElementsByClassName('who')[0].getElementsByTagName('ul')[0];

        document.addEventListener('mousemove', (e) => {

        cursor.style.top = e.clientY+'px';
        cursor.style.left = e.clientX+'px';
        });

        list.addEventListener('mouseenter', () => {

            cursor.classList.add('visible');
        });
        list.addEventListener('mouseleave', () => {

            cursor.classList.remove('visible');
        });

    })();


    function changeCursor(elem) {

        Array.from(cursorImages).map((elem) => {

            elem.classList.remove('fadeIn');
        });

      switch(elem.className) {

        case 'facebook': {
          cursor.getElementsByClassName('facebook')[0].classList.add('fadeIn');
          break;
        }
        case 'twitter': {
          cursor.getElementsByClassName('twitter')[0].classList.add('fadeIn');
          break;
        }
        case 'youtube': {
          cursor.getElementsByClassName('youtube')[0].classList.add('fadeIn');
          break;
        }
        case 'whatsapp': {
          cursor.getElementsByClassName('whatsapp')[0].classList.add('fadeIn');
          break;
        }
        case 'instagram': {
          cursor.getElementsByClassName('instagram')[0].classList.add('fadeIn');
          break;
        }
        default:
          break;
      }
    } 

    </script>

  </body>
</html>

Upvotes: 2

Related Questions