Is there a method to give a webpage a subtle shimmering effect without utilizing CSS box-shadow?

Struggling to Develop a High-Performance Interface Feature

I'm currently facing a challenge in coding an interface that requires a subtle and broad glow effect, similar to the example provided below:

https://i.sstatic.net/E4ilD.jpg

Exploration of Possible Solutions

After exploring options such as outer-glow, filter, and canvas techniques, I have yet to find a satisfactory and efficient solution:

  • outer-glow: Offers desired effect but severely impacts performance, especially with larger glows.

filters: While blur filters can be used, they do not replicate the glowing effect effectively. Implementing a duplicate DOM, blurring it, overlaying it on the original DOM with low opacity, and maintaining synchronization through JavaScript may lead to performance issues.

  • canvas: Drawing the DOM on a transparent canvas layer and applying blur is another option, but it involves complex processes like rendering all DOM elements as SVG and ensuring synchronization between the two versions.

Seeking Advice

At this point, I am at a loss for solutions. Is there a way to achieve the glow effect on my interface while maintaining optimal performance?

I am open to any creative suggestions or alternative methods that could help me implement the desired glow effect efficiently within a web application environment.

javascripthtmlcssdomcanvas

Answer №1

While this route may not have been your original intention, it could still yield the desired outcome you seek. Although updating the design will be necessary, this approach is likely to provide optimal performance.

Revamping the Design
Instead of diving into coding, consider tackling the issue from a design perspective. Identify the final colors needed for your elements and make corresponding adjustments to your CSS. It may also involve tweaking some images to align with the new design scheme.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I want to display a div above an image when hovering over it

.vpbutton {padding:4px;background-color:#EFEFEF;} .userbox img{padding:8px;background-color:#EFEFEF;} .userbox img:hover{opacity:.2;} <div class="userbox"> <img src='img.png' style='height:120px;width:120px;border:1p ...

jquerycss

How can I write this to function on click events?

Could someone please help me with a simple question I have? I am struggling to properly write the code. $wish_1='<span onclick=alert("Register or Login Now");></span>'; The issue is that spaces are not working and using ' also ...

javascriptjquery

Creating a Controlled accordion in Material-UI that mimics the functionality of a Basic accordion

I'm a Junior developer seeking assistance with my first question on this platform. Currently, I am working with a Controlled accordion in React and need the icon to change dynamically while staying open even after expanding another panel. The logic ...

javascriptreactjsreact-hooksmaterial-ui

What is the best way to add a new item to a list?

$("ul").append("<li><a href=""><?php echo $this->session->userdata('username'); ?></a></li>"); The code above is causing an issue in my console, specifically it's displaying the error message: Uncaught Sy ...

jqueryajaxdomappend

Handling the same form button repeatedly in a loop using jQuery

I have successfully set up jquery to accept form data and send it to flask, but I am facing two issues: It only accepts the first form, which has the same IDs repeated for each element. I want all forms to be able to submit. When a submission occurs, it ...

javascriptjqueryajaxflask

`Issues encountered while converting PHP Array to JSON format`

I've been encountering difficulties converting a multidimensional PHP Array to JSON. While using json_encode, the result is null. I'm working on developing an orgChart where the data is extracted from a CSV file and stored in an array. The layou ...

javascriptphparraysjson

Ways to modify the text color of an inactive TextField in Material UI React JS

After researching how to change the disabled TextField font color on Stack Overflow, I implemented the solution using Material-UI. However, when I tried to create a new customized TextField based on the example provided, it did not work as expected and dis ...

cssreactjsmaterial-uitextfieldreact-with-styles

Establish an HttpOnly cookie using JavaScript

Is it possible to convert a non-HttpOnly cookie into an HttpOnly cookie using JavaScript? ...

javascripthttpcookies

Retrieve Static Property Values Using jQuery/JavaScript in Backend Code

My challenge is to fetch the Max value and Percent value into a jQuery function. I attempted to retrieve these values using hidden variables and Session variables on page load, but they always return 0. Here are the properties: public static int Max { ...

javascriptc#jqueryasp.netajax

Is there a way to execute a PHP script using Ajax without needing any return values?

Currently, I am attempting to execute a php script with ajax without needing any output or echos. Is there a method to achieve this? Below is the approach I have taken: $('button')[1].click(function () { $.ajax({ met ...

javascriptphpajax

An unexpected error occurred while parsing the JSON document: "unexpected token: '{'"

I'm facing an issue where I need to specify a URL in a JavaScript app that retrieves weather data from an API. The URL is constructed using a string and some variables. When I initially wrote the code below, I encountered the error message Missing { b ...

javascriptjson

Having trouble choosing a subitem from a dropdown menu in Vuejs?

An example can be found at https://jsfiddle.net/79epsrmw/. However, the issue arises when targeting the item1 sub-menu in VS Code even after assigning a unique id. var app = new Vue({ el: '#app', data: { menuItems: [ ...

javascriptvue.js

Text and Image Coordination

I'm encountering some challenges with a specific section. My goal is for it to resemble this. However, I am currently achieving something different, like this. .timeline { text-align: center; } #about-us { ul { &:before { ...

htmlcsstwitter-bootstrap-4

The collapsible tree nodes overlap one another in the D3.js visualization

I'm currently working on integrating a d3 code into Power BI for creating a collapsible tree structure. Each node in the tree is represented by a rectangular box, but I've run into an issue where nodes overlap when their size is large. Below is t ...

javascripthtmlcsstypescriptd3.js

vue-router incorrectly updates parameters upon reload

One question I have is related to routing in Vue.js: // routes.js { path: '/posts', name: 'Posts', component: PostsView }, { path: '/post/:post_id', name: 'PostRead', component: PostReadView, }, { pat ...

javascriptvue.jsvue-router

What is the best way to activate an onchange function when using a <select> element?

Is there a way to automatically trigger a JavaScript function without the need for user input, while still having a default option selected? <select class="custom-select" name="" id="timer1numbers" onchange="getSelecte ...

javascripthtml

Using AngularJS to serve $resource through https causes Angular to transition from https to http

After successfully setting up a ng-resource in my AngularJS project to fetch data from a REST API, everything was running smoothly in the development and testing environments, both of which operated over http. However, upon moving to production where the e ...

javascriptangularjsrestnginxhttps

I am having trouble retrieving images on my website and displaying URL images

Every time I attempt to retrieve an image URL from the database for the client, I encounter the following error: Refused to load the image 'https://nuclear-photos.s3-ap-southeast-1.amazonaws.com/…22:33:44%20GMT+0400%20(GST)TEST.png' because i ...

javascriptmeteoramazon-s3cross-domain

"The Node.js program is unable to access the contents of the browser.js file when loaded in

After spending an unreasonable amount of time trying to debug this issue, I am still unable to resolve it. Currently, I am following a udemy tutorial where the instructor implements the same code provided below. However, despite my efforts, the code is not ...

javascripthtmlnode.jsexpress

Incorporating an Edit button with an icon into a react-bootstrap-table2

Is there a way to insert buttons in the Edit column of my table so I can easily edit a row? I believe there should be a method to personalize the column and incorporate icons as shown in the example image. Sample Image of What I want to do: import React ...

javascriptreactjs