焦点

焦点

by prodouga

HTML

<!DOCTYPE html>
<html lang="ja" >
<head>
  <meta charset="UTF-8">
  <title>焦点フォーカス - Prodouga.com</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div id="bg"></div>
<div id="bg_mask"></div>
<main>
  <h3>Cat and Dog</h3>
</main>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/pathseg.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/build/matter-attractors.min.js'></script><script  src="./script.js"></script>

</body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
:root {
  --x: 50%;
  --y: 50%;
  --blur: 0.7vmax;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  background-color: black;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  overflow: hidden;
  /*
  cursor: none;
  */
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
body {
  width: 100vw;
  height: 100vh;
  font-family: "Montserrat", serif;
  text-align: center;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
main {
  z-index: 1;
}
h3 {
  font-size: max(5vw, 30px);
  color: #ddd;
}
#bg,
#bg_mask {
  /* ふちボケ対策 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: calc(var(--blur) * -1);

  background: url(https://i.ibb.co/PNT0hL7/2-1.jpg) no-repeat center/cover;
}
#bg {
  filter: blur(var(--blur));
}
#bg_mask {
  -webkit-mask-image: radial-gradient(
    circle 50vmin at var(--x) var(--y),
    black 20vmin,
    transparent
  );
          mask-image: radial-gradient(
    circle 50vmin at var(--x) var(--y),
    black 20vmin,
    transparent
  );
}

JavaScript

"use strict";
console.clear();

var root = document.querySelector(":root");
function spotlight(e) {
  root.style.setProperty("--x", e.pageX + "px");
  root.style.setProperty("--y", e.pageY + "px");
}
window.addEventListener("pointermove", spotlight);
window.addEventListener("pointerdown", spotlight);