Creating moving light effect

      No Comments on Creating moving light effect

Creating moving light effect using CSS only. This effect will use CSS gradient function(). We add gradient to cursor to create a flash light effect.

Creating moving light effect

Creating moving light effect

CSS gradient function()

The radial-gradient() function creates an effect which represents a gradient of colors radiating from the center of the gradient.A radial gradient is defined by its center.

Syntax:

background: radial-gradient(shape size at position, start-color, ..., last-color); 

Example:

background: radial-gradient(red 5%, green 15%, blue 60%);

HTML markup:

<h1>Welcome to Scanfcode</h1>
<p>
THE HTML5 Doctype. A simple HTML markup starts with <!Doctype html>. It simply tells anyone reading the markup that HTML5 code follows.The first thing about html5 doctype it that it is striking simple.HTML doctype dosenot define any particular version for HTML,it just indicates that the page contain HTML.
Why do web pages require DOCTYPE?
Without doctype most of the browsers enter into quirks mode.In this mode the browsers, they render pages according to some buggy rules they used int older versions.Doctype tells a browser that you want stricter standard mode.

CSS

body
{
  background:#fff;
  color:blue;
}
:root {
  cursor: none;
  --cX: 40vw;
  --cY: 40vh;
}
:root:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  pointer-events: none;
  background: radial-gradient(
    circle 8vmax at var(--cX) var(--cY),
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.5) 60%,
    rgba(0,0,0,.95) 130%
  )
}

:root { } selector selects the root of the document. The syntax is:

:root
{
  properties.....
}

JavaScript for mouse move

function update(e){
  var x = e.clientX;
  var y = e.clientY;
document.documentElement.style.setProperty('--cX', x + 'px')
document.documentElement.style.setProperty('--cY', y + 'px')
}
document.addEventListener('mousemove',update);

We call this function on mouse move. This updates the position of cursor according to mouse movement.

Demo:

See the Pen Creating moving-light effect using CSS by scanfcode (@scanfcode) on CodePen.

Summary
Creating moving light effect
Article Name
Creating moving light effect
Description
Creating moving light effect using CSS only. This effect will use CSS gradient function(). We add gradient to cursor to create a flash light effect.
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *