Magnifying Glass

index.html

<div class="wrapper">
  <button id="magnify">Magnify</button>
    
  <h1>Magnifying Glass</h1>
  <h2>Click magnify to activate, double click to remove</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg"></img>

  <h3>Lorem ipsum dolor sit amet</h3>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius blandit tempor. Fusce tincidunt imperdiet mauris ut pretium. Aenean vehicula dignissim nisl, et vestibulum eros consequat nec. Mauris vulputate metus a ante lobortis mollis. Morbi posuere diam ligula, eget finibus dolor iaculis sed. Curabitur convallis dolor sit amet mi gravida, sed pellentesque nisl aliquet. Curabitur volutpat mauris ac nunc maximus, quis aliquam purus tempus.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam augue, pretium vitae odio quis, convallis dapibus elit. Fusce hendrerit efficitur massa, quis molestie diam hendrerit eu. Aenean vel dictum.</p>
</div>

magnifying-glass.markdown

Magnifying Glass

A Pen by Eitan Waxman on CodePen.

License.

script.js

//defaults - not recommended to change

const SCALE = 1.3; //magnification
const SIZE = 150; // diameter
const LENSE_OFFSET_X = SIZE / 10.2;
const LENSE_OFFSET_Y = SIZE / 10.2;

document.documentElement.style.setProperty("--scale", SCALE);
document.documentElement.style.setProperty("--size", SIZE + "px");

//create magnifying glass (lense)
const handle = document.createElement("div");
handle.classList.add("handle");

const magnifyingGlass = document.createElement("div");
magnifyingGlass.classList.add("magnifying-glass");
magnifyingGlass.style.top = LENSE_OFFSET_Y + "px";
magnifyingGlass.style.left = LENSE_OFFSET_X + "px";

handle.append(magnifyingGlass);

const magnifyButton = document.getElementById("magnify");

const addMagnifyingGlass = () => {
  const bodyClone = document.body.cloneNode(true);
  bodyClone.classList.add("body-clone");
  bodyClone.style.top = "0px";
  bodyClone.style.left = "0px";
  magnifyingGlass.append(bodyClone);
  document.body.append(handle);
};

magnifyButton.addEventListener("click", addMagnifyingGlass);

const moveMagnifyingGlass = (event) => {
  let pointerX = event.pageX;
  let pointerY = event.pageY;
  //move magnifying glass with cursor
  handle.style.left = pointerX - SIZE / 1.7 + "px";
  handle.style.top = pointerY - SIZE / 1.7 + "px";
  if (magnifyingGlass.children[0]) {
    //align magnified document
    let offsetX = (SIZE * Math.pow(SCALE, 2)) / 2 - pointerX * SCALE;
    let offsetY = (SIZE * Math.pow(SCALE, 2)) / 2 - pointerY * SCALE;
    magnifyingGlass.children[0].style.left = offsetX + "px";
    magnifyingGlass.children[0].style.top = offsetY + "px";
  }
};

document.addEventListener("pointermove", moveMagnifyingGlass);

const removeMagnifiyingGlass = (event) => {
  magnifyingGlass.children[0].remove();
  handle.remove();
};

magnifyingGlass.addEventListener("dblclick", removeMagnifiyingGlass);


//issues 
//- lots of magin numbers for alignment
//- background gradient doesn't show over images

style.css

:root {
  --scale: 1;
  --size: 200px;
  --scrollbar-width: 36px;
  --handle-background: url("https://www.svgrepo.com/show/263197/magnifying-glass-search.svg");
}

body {
  font-family: sans-serif;
  font-size: 18px;
}

.wrapper {
  padding: 10%;
}

.handle {
  position: absolute;
  height: calc(var(--size) * 1.9);
  width: calc(var(--size) * 1.9);
  background: var(--handle-background);
  background-size: contain;
  filter: drop-shadow(-2px -2px 10px rgba(0, 0, 0, 0.5));
}

.magnifying-glass {
  position: absolute;
  padding: 0;
  margin: 0;
  height: var(--size);
  width: var(--size);
  border: solid 3px black;
  background: radial-gradient(#f5fcfc 45%, gray);
  overflow: hidden;
  border-radius: 50%;
}

.magnifying-glass::after {
  display: block;
  position: relative;
  content: "";
  top: calc(2 * var(--size) / 3);
  left: calc(2 * var(--size) / 3);
  height: 15px;
  width: 30px;
  background-color: white;
  border-radius: 50%;
  z-index: 10;
  transform: rotate(-45deg);
  opacity: 70%;
}

.body-clone {
  position: absolute;
  margin-left: 8vw;
  padding: inherit;
  height: 100vh;
  width: calc(100vw - var(--scrollbar-width));
  transform: scale(var(--scale));
}

#magnify {
  font-size: 2rem;
  padding: 3% 5% 3%;
  border-radius: 10px;
  cursor: pointer;
  background-color: #fcc203;
  box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, 0.5);
}

#magnify:hover {
  color: white;
  background-color: black;
  box-shadow: none;
}