Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Recommended Posts

Site URL: https://www.kevinwalton.ca

Hi there, 

 

Can someone help me add this to my site? I have tried but I don't know how to make it Squarespace accessible. 

 

Index HTML

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Awesome Hover Effect + Animated Cursor | Codegrid</title>
      <link rel="stylesheet" href="style.css">
</head>
<body>
      <div class="nav-wrapper">
            <nav>
                  <a href="#" class="hover-this"><span>Home</span></a>
                  <a href="#" class="hover-this"><span>Our Story</span></a>
                  <a href="#" class="hover-this"><span>Studio</span></a>
                  <a href="#" class="hover-this"><span>Contact</span></a>
                  <div class="cursor"></div>
            </nav>
      </div>

<script>

(function () {

      const link = document.querySelectorAll('nav > .hover-this');
      const cursor = document.querySelector('.cursor');

      const animateit = function (e) {
            const span = this.querySelector('span');
            const { offsetX: x, offsetY: y } = e,
            { offsetWidth: width, offsetHeight: height } = this,

            move = 25,
            xMove = x / width * (move * 2) - move,
            yMove = y / height * (move * 2) - move;

            span.style.transform = `translate(${xMove}px, ${yMove}px)`;

            if (e.type === 'mouseleave') span.style.transform = '';
      };

      const editCursor = e => {
            const { clientX: x, clientY: y } = e;
            cursor.style.left = x + 'px';
            cursor.style.top = y + 'px';
      };

      link.forEach(b => b.addEventListener('mousemove', animateit));
      link.forEach(b => b.addEventListener('mouseleave', animateit));
      window.addEventListener('mousemove', editCursor);

})();

</script>
</body>
</html>

 

Style CSS 

html, body {
      margin: 0;
      padding: 0;
      cursor: none;
}

.nav-wrapper {
      width: 100%;
      height: 100vh;
      background: #161616;
}

nav {
      width: 100%;
      margin: 0 auto;
      text-align: center;
      position: absolute;
      top: 50%;
}

.hover-this {
      transition: all 0.3s ease;
}

span {
      display: inline-block;
      font-family: "Monument Extended";
      font-weight: 300;
      color: #fff;
      font-size: 36px;
      text-transform: uppercase;
      pointer-events: none;
      transition: transform 0.1s linear;
}

.cursor {
      pointer-events: none;
      position: fixed;
      padding: 0.3rem;
      background-color: #fff;
      border-radius: 50%;
      mix-blend-mode: difference;
      transition: transform 0.3s ease;
}

.hover-this:hover ~ .cursor {
      transform: translate(-50%, -50%) scale(8);
}

@media(min-width: 900px) {
      nav {
            display: flex;
            justify-content: space-around;
      }
}

@media(max-width: 900px) {
      nav {
            top: 30%;
      }

      .hover-this {
            width: 100%;
            padding: 20px 0;
            display: inline-block;
      }
}

 

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Hi. You want to apply it on entire site or Navigation items only?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Open Page Header - Upload Custom Font - Upload File - Find Block ID, Data Section ID - Contact Squarespace Customer Care - Learn CSS at W3Schools

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...