Codepen contrast chalenge - Simple menu, click black circle

codepen-contrast-chalenge-simple-menu-click-black-circle.markdown

Codepen contrast chalenge - Simple menu, click black circle

A Pen by JFarrow on CodePen.

License.

index.html

<div class="btn"></div>
<div class="close"></div>
<div class="menu">
  <div class="active">CONTRAST</div>
  <a href="https://www.smarketplace.org/mall/level-1">Level One</a>
  <a href="https://www.smarketplace.org/mall/level-2">Level Two</a>
  <a href="https://www.smarketplace.org/mall/level-3">Level Three</a>
  <a href="https://www.smarketplace.org/mall/level-4">Level Four</a>
  <a href="https://www.smarketplace.org/mall/level-5">Level Five</a>
</div>

<div class="cursor"></div>

script.js

// You can check my other pens as well:
// https://codepen.io/nocni_sovac

let btn = document.querySelector(".btn");
let curs = document.querySelector(".cursor");
let close = document.querySelector(".close");
let menu = document.querySelector(".menu");
let active = document.querySelector(".active");

let menuEL = document.querySelectorAll(".menu a");

menuEL.forEach((element) => {
  element.addEventListener("mouseover", () => {
    active.innerHTML = element.innerHTML;
  });
});

btn.addEventListener("click", () => {
  btn.style.width = "100%";
  btn.style.height = "100%";
  btn.style.borderRadius = "0%";
  close.style.display = "block";
  menu.style.display = "block";
});

close.addEventListener("click", () => {
  btn.style.width = "100px";
  btn.style.height = "100px";
  btn.style.borderRadius = "0%";
  close.style.display = "none";
  menu.style.display = "none";

  setTimeout(() => {
    btn.style.borderRadius = "100%";
  }, 200);
});

document.addEventListener("mousemove", (e) => {
  let x = e.pageX;
  let y = e.pageY;
  curs.style.left = x - 15 + "px";
  curs.style.top = y - 15 + "px";
});

style.scss

//******************************************************

// 💕 it if you 💕 it :) Thank you
// Best viewed in fullscreen
// https://codepen.io/nocni_sovac/full/VwjdYBq

//******************************************************

@import url("https://fonts.googleapis.com/css2?family=Rubik&display=swap");

* {
  padding: 0;
  margin: 0;
}
body {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: "Rubik", sans-serif;
}

.btn {
  width: 100px;
  height: 100px;
  background: #000000ff;
  border-radius: 100%;
  transition: all 0.3s cubic-bezier(0.64, 0.57, 0.67, 1.53);
  position: relative;
  animation: float 3s ease-in-out infinite;
  cursor: pointer;

  &:hover {
    opacity: 1;
    -webkit-text-fill-color: white;
    text-fill-color: white;
    border-radius: 0% !important;

    ~ .cursor {
      transform: scale(1.4);
      mix-blend-mode: difference;
      background: white;
    }
  }
}

.close {
  width: 40px;
  height: 40px;
  background: #ffffff;
  border-radius: 100%;
  transition: all 0.3s cubic-bezier(0.72, 0.03, 0.28, 0.97);
  position: fixed;
  top: 10%;
  right: 10%;
  display: none;
  animation: float 2s ease-in-out infinite;
  cursor: pointer;

  &:hover {
    opacity: 1;
    -webkit-text-fill-color: white;
    text-fill-color: white;
    border-radius: 0% !important;
    transform: rotate(45deg) scale(1.4);
    ~ .cursor {
      transform: scale(1.4);
      mix-blend-mode: difference;
      background: white;
    }
  }
}
.cursor {
  top: 0;
  width: 30px;
  height: 30px;
  border: 3px solid white;
  border-radius: 50%;
  position: absolute;
  box-shadow: 2px -3px 11px -1px rgba(250, 250, 250, 0.64);
  //transition: all 0.1s linear;
  pointer-events: none;
  transition: all 0.1s linear;
}

.menu {
  position: absolute;
  display: none;

  a {
    font-size: 50px;
    color: #fff;
    display: block;
    text-decoration: none;
    position: relative;
    transition: all 0.3s cubic-bezier(0.72, 0.03, 0.28, 0.97);
  }

  &:hover {
    opacity: 1;
    -webkit-text-fill-color: white;
    text-fill-color: white;

    ~ .cursor {
      mix-blend-mode: difference;
      background: white;
      transform: scale(2);
      border-radius: 0;
    }
  }

  .active {
    position: absolute;
    font-size: 120px;
    text-transform: uppercase;
    -webkit-text-stroke: 2px #ffffff;
    text-stroke: 2px #ffffff;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    color: transparent;
    left: -55%;
    top: 25%;
    opacity: 0.2;
    user-select: none;
    transition: all 0.3s cubic-bezier(0.72, 0.03, 0.28, 0.97);
  }
}