Frosted and see-through circular background effect triggered by mouse movement

Question

Frosted and see-through circular background effect triggered by mouse movement

I've been attempting to duplicate the mesmerizing effect showcased on this webpage: (give it a try by moving your mouse), but I'm baffled by how they managed to achieve it?

My attempts at experimenting with a JSFiddle can be found here: http://jsfiddle.net/1tz5b6r0/, however, the results have been less than successful.

The following function:

 function animate() {
   requestAnimationFrame(animate);

   update();
 }

Makes use of requestAnimationFrame, yet there is no trace of it in their codebase.

The method behind creating this particular effect eludes me

What am I overlooking?

javascript jquery html css

Answer 1

Answer №1

That's an impressive effect! I decided to give it a go myself: http://jsfiddle.net/wLa4cLay/

As you move the mouse, a fuzzy circle forms at its position
Color and size are randomly generated
The circle shrinks and fades out quickly

The blur effect is achieved using a box shadow

/* Generate an animated circle with every mouse movement */ $('body').on('mousemove', function(ev) { createRandomCircle(ev.pageX, ev.pageY); });

function createRandomCircle(x, y) {

/* Adjust for 100px top offset in shadow */
y = y -100;

/* Generate a random color */
var colorR = Math.ceil(Math.random() * 255);
var colorG = Math.ceil(Math.random() * 255);
var colorB = Math.ceil(Math.random() * 255);
var color = 'rgb('+colorR+','+colorG+','+colorB+')';

/* Generate a random size */
var size = Math.ceil(Math.random() * 80);

/* Create the circle */
var circle = $('<span />')
    .addClass('circle')
    .css('left', x+"px")
    .css('top', y+"px")
    .css('width', size+"px")
    .css('height', size+"px")    
    .css('color', color)
    .css('box-shadow', '0px 100px 40px')
    .css('border-radius', '80px');

circle.appendTo('body');

/* Animate the circle (shrink and fade out) */  
circle.animate({opacity: 0, width: '10px', height: '10px'}, 500, function() {
    /* Remove it once the animation is complete */
    $(this).remove();
});

}

Styles:

html, body {
    height: 100%;
}

.circle {
  display: block;
  position:absolute;
  background-color: transparent;
}

Answer 2

That's an impressive effect! I decided to give it a go myself: http://jsfiddle.net/wLa4cLay/

As you move the mouse, a fuzzy circle forms at its position
Color and size are randomly generated
The circle shrinks and fades out quickly

The blur effect is achieved using a box shadow

/* Generate an animated circle with every mouse movement */ $('body').on('mousemove', function(ev) { createRandomCircle(ev.pageX, ev.pageY); });

function createRandomCircle(x, y) {

/* Adjust for 100px top offset in shadow */
y = y -100;

/* Generate a random color */
var colorR = Math.ceil(Math.random() * 255);
var colorG = Math.ceil(Math.random() * 255);
var colorB = Math.ceil(Math.random() * 255);
var color = 'rgb('+colorR+','+colorG+','+colorB+')';

/* Generate a random size */
var size = Math.ceil(Math.random() * 80);

/* Create the circle */
var circle = $('<span />')
    .addClass('circle')
    .css('left', x+"px")
    .css('top', y+"px")
    .css('width', size+"px")
    .css('height', size+"px")    
    .css('color', color)
    .css('box-shadow', '0px 100px 40px')
    .css('border-radius', '80px');

circle.appendTo('body');

/* Animate the circle (shrink and fade out) */  
circle.animate({opacity: 0, width: '10px', height: '10px'}, 500, function() {
    /* Remove it once the animation is complete */
    $(this).remove();
});

}

Styles:

html, body {
    height: 100%;
}

.circle {
  display: block;
  position:absolute;
  background-color: transparent;
}

Frosted and see-through circular background effect triggered by mouse movement

Answer №1

Similar questions

Top scroll button malfunctioning on this page

Show the div on top of all other elements

form submission issue with return false not working

Tips for changing input field type from "password" to "text" in Angular?

The event listener for 'load' is not functioning properly within the React (Gatsby) environment

Solutions for resolving the issue of not being able to load images when using merged-images in JavaScript

passing arguments during deferred resolve() and when() operations

What is the most efficient way to enable seamless communication between sibling components in Vue.js 2?

Encountering an issue: The API call for /api/orders was resolved but no response was sent, potentially causing requests to become stuck in Next.js

Emotion, material-ui, and typescript may lead to excessively deep type instantiation that could potentially be infinite

Unable to invoke Kendo JavaScript

Expanding functionality: Steps to integrating a new endpoint into your AWS Amplify Express Server

What could be the reason my SVG images are not displaying?

Calculating interest rates in Javascript: A guide to determining values using two separate rates

Unable to modify the appearance of text on the canvas

Adding items to an array within a jQuery each loop and performing a jQuery ajax request

The dataset controller in Chart.js returns 'null' when the chart is rendered

What could be the reason for event.stopPropagation() not functioning properly with a switch statement

Tips for updating and transferring a variable within a callback function

Troubleshooting the ckeditor-duplicated-modules error when trying to install a local npm package that should utilize the node_modules of the main project through yarn