{"id":3298,"date":"2019-11-26T18:07:00","date_gmt":"2019-11-26T18:07:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=3298"},"modified":"2019-11-27T18:19:09","modified_gmt":"2019-11-27T18:19:09","slug":"directional-link-effects-with-css-variables","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/directional-link-effects-with-css-variables\/","title":{"rendered":"Directional link effects with CSS variables"},"content":{"rendered":"\n

We really like the CSS variables<\/strong> and what we can do with them<\/a>. Changing them in JS is like using useState in React<\/strong>: The browser automatically re-renders the necessary parts. This allows you to build powerful effects in a few lines of code. My favourite is to track the position of the mouse to build directional cursor effects. Believe me: It\u2019s a small detail, but you can\u2019t stop hovering once you\u2019ve seen it.<\/p>\n\n\n\n

This tutorial here, explains the little magic behind the hover effect we\u2019ve found on the menu of the Ackee site<\/a>.<\/p>\n\n\n\n

Track the position<\/h1>\n\n\n\n

We need to know the position of the cursor to build a directional effect. This can be done in JS.<\/p>\n\n\n\n

document.querySelectorAll('.underline').forEach((elem) => {\n\n\telem.onmouseenter =\n\telem.onmouseleave = (e) => {\n\n\t\tconst x = e.pageX - elem.offsetLeft\n\t\telem.style.setProperty('--x', `${ x }px`)\n\n\t}\n\n})<\/pre>\n\n\n\n
The CSS variable --x<\/code> now contains the position of the mouse relative to the element. It will update whenever the mouse enters and leaves the element.<\/p>\n\n\n\n
Reality however showed me that it looks a little bit weird when x<\/code> is near, but not exactly left (0<\/code>) or right (elem.clientWidth<\/code>). Let\u2019s fix this by adding a tolerance.<\/p>\n\n\n\n
document.querySelectorAll('.underline').forEach((elem) => {\n\n\telem.onmouseenter =\n\telem.onmouseleave = (e) => {\n\n\t\tconst tolerance = 10\n\n\t\tconst left = 0\n\t\tconst right = elem.clientWidth\n\n\t\tlet x = e.pageX - elem.offsetLeft\n\n\t\tif (x - tolerance < left) x = left\n\t\tif (x + tolerance > right) x = right\n\n\t\telem.style.setProperty('--x', `${ x }px`)\n\n\t}\n\n})<\/pre>\n\n\n\n
Styling:<\/h1>\n\n\n\n
text-decoration: underline<\/code> can\u2019t be animated. We\u2019re therefore adding a line below the element using an ::after<\/code> pseudo element.<\/p>\n\n\n\n
.underline {\n\n\tposition: relative;\n\tcolor: rgba(255, 255, 255, .7); \/\/ 1\n\ttext-decoration: none; \/\/ 1\n\ttransition: color .3s cubic-bezier(.51, .92, .24, 1);\n\n\t\/\/ 2\n\t&::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\ttop: 100%;\n\t\theight: 2px;\n\t\tbackground: linear-gradient(135deg, rgb(115, 250, 200), rgb(0, 190, 225));\n\t\ttransform: scaleX(var(--scale, 0)); \/\/ 3\n\t\ttransform-origin: var(--x) 50%; \/\/ 4\n\t\ttransition: transform .3s cubic-bezier(.51, .92, .24, 1);\n\t}\n\n\t&:hover {\n\t\tcolor: white;\n\t}\n\n\t&:hover::after {\n\t\t--scale: 1; \/\/5\n\t}\n\n}<\/pre>\n\n\n\n
  1. Remove the default styling of the link<\/li>
  2. Add a custom underline<\/li>
  3. Use --scale<\/code> to show and hide the underline (starting with 0<\/code> = hidden)<\/li>
  4. Use --x<\/code> to define the origin of the scale transform (the position of the mouse)<\/li>
  5. Show the underline by changing the --scale<\/code> variable<\/li><\/ol>\n\n\n\n
    Conclusion:<\/h1>\n\n\n\n
    That\u2019s it already. A few lines of code and hovering links makes fun, again. Add the missing HTML and enjoy:<\/p>\n\n\n\n
    \n