LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
:root {
  --show-dropdown: 1;
}

.spotlight {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), hsl(334, 80%, 80%) 20%, rgba(0,0,0,.96) 30%);
  mix-blend-mode: var(--blend, multiply);
}

.scene {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/61811/figure8s.jpg) center center;
  background-size: cover;
  overflow:hidden;
}

form {
  position: absolute;
  top: 0.5rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  
  opacity: var(--show-dropdown);
}
JS
var spotlight = document.querySelector('.spotlight');
var isUserMotion = false;

function move(e) {
  if (e.clientX || e.touches) {
    isUserMotion = true;
    spotlight.style.setProperty('--x', (e.clientX || e.touches[0].clientX)+'px');
    spotlight.style.setProperty('--y', (e.clientY || e.touches[0].clientY)+'px');
  }
}

if (window.PointerEvent) {
  spotlight.addEventListener('pointermove', move);
} else {
  spotlight.addEventListener('touchmove', move);
  spotlight.addEventListener('mousemove', move);
}



//Play when first loaded, then let user control
(() => {
  var startTime = Date.now();
  autorun();
  function autorun() {
    var now = Date.now();
    if (!isUserMotion && now <= startTime + 3000) {
      console.log(now - startTime);
      spotlight.style.setProperty('--x', ((now - startTime) / 6000 * 100) + '%');
      requestAnimationFrame(autorun);
    }
  }
})();



document.getElementById('blend').addEventListener('input', e => {
  spotlight.style.setProperty('--blend', e.currentTarget.value);
});
Host Instantly Drag and Drop Website Builder

 

Description

CSS Variables + Mix Blend Mode to move a spotlight around an image below
Term
Mon, 11/27/2017 - 22:02

Related Codes

Pen ID
Pen ID
Pen ID