Make the text appear hazy as it moves behind a see-through object

I'm attempting to create a blurred text effect that transitions behind a semi-transparent container label.

I've experimented with combining the backdrop-filter and filter properties along with the filter function blur(), but I haven't been able to get it to work as desired.

This is the visual outcome I am aiming for:

https://i.sstatic.net/h5gPl.png

Here's the code snippet (the screen may be too small to display the complete result):

var page = 1;
var pages = 3;
function previous() {
  document.getElementById('label-previous').classList.add('clicked');
  document.getElementById('pages').classList.remove('page' + page);
  if ( page == pages ) {
    document.getElementById('label-next').classList.remove('hidden');
  }
  if ( page == 2 ) {
    document.getElementById('label-previous').classList.add('hidden');
  }
  page--;
  setTimeout(function() {
    document.getElementById('label-previous').classList.remove('clicked');
  }, 100);
}
function next() {
  document.getElementById('label-next').classList.add('clicked');
  document.getElementById('pages').classList.add('page' + (page + 1));
  if ( page == 1 ) {
    document.getElementById('label-previous').classList.remove('hidden');
  }
  if ( page + 1 == pages ) {
    document.getElementById('label-next').classList.add('hidden');
  }
  page++;
  setTimeout(function() {
    document.getElementById('label-next').classList.remove('clicked');
  }, 100);
}
body, html {
  height: 100%;
}
body {
  background-color: #222;
  overflow: hidden;
  margin: 0;
  user-select: none;
  white-space: nowrap;
}
div {
  height: 100%;
  margin-left: 0px;
  width: 100%;
  -webkit-transition: margin-left 1s linear;
}
div.page2 {
  margin-left: -100%;
}
div.page3 {
  margin-left: -200%;
}
input[type=checkbox] {
  display: none;
}
label {
  /*
  backdrop-filter: blur(3px);
  */
  background-color: rgba(255, 255, 255, 0.1);
  color: #ccc;
  /*
  filter: blur(3px);
  */
  font-family: consolas;
  font-size: 5em;
  height: 100%;
  line-height: 100vh;
  opacity: 1;
  pointer-events: initial;
  position: absolute;
  text-align: center;
  vertical-align: middle;
  width: 200px;
  -webkit-transition: background-color 0.1s linear, color 0.1s linear, opacity 0.8s 0.2s linear;
}
#label-previous {
  left: 0px;
}
#label-next {
  left: calc(100% - 200px);
}
label.clicked {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
label.hidden {
  opacity: 0;
  pointer-events: none;
}
span {
  color: #ccc;
  display: inline-block;
  font-family: consolas;
  font-size: 2em;
  margin-left: 400px;
  margin-top: 200px;
  width: calc(100% - 400px);
}
<div id="pages">
  <input id="previous" onchange="previous()" type="checkbox"><label class="hidden" for="previous" id="label-previous">&lt;</label>
  <span>Page 1</span><span>Page 2</span><span>Page 3</span>
  <input id="next" onchange="next()" type="checkbox"><label for="next" id="label-next">&gt;</label>
</div>

javascripthtmlcssblur

Answer №1

Here is a workaround to address the issue:

var blurred = document.getElementById('hide-blurred');
var normal = document.getElementById('hide-normal');
var position = document.getElementById('position');
function update() {
  let px = blurred.children[0].getBoundingClientRect().width + position.getBoundingClientRect().left - 200;
  blurred.style.width = (blurred.children[0].getBoundingClientRect().width - px) + 'px';
  normal.style.width = (px) + 'px';
  requestAnimationFrame(update);
}
update();
var condition = true;
position.classList.add('move');
setInterval(function() {
  if ( condition ) {
    position.classList.remove('move');
    condition = false;
  } else {
    position.classList.add('move');
    condition = true;
  }
}, 1000);
body, html {
  height: 100%;
}
body {
  background-color: #222;
  color: #ccc;
  font-family: consolas;
  font-size: 2em;
  margin: 0;
}
div#blur {
  background-color: rgba(255, 255, 255, 0.1);
  height: 100%;
  width: 200px;
}
span#position {
  position: absolute;
  top: 100px;
  -webkit-transition: left 1s linear;
}
.left {
  left: 200px;
}
.move {
  left: 130px;
}
span.hide {
  display: inline-block;
  overflow: hidden;
}
span#hide-blurred {
  filter: blur(3px);
}
span#hide-normal {
  direction: rtl;
}
<div id="blur"></div>
<span class="left" id="position">
  <span class="hide" id="hide-blurred">
    <span>Text</span>
  </span><span class="hide" id="hide-normal">
    <span>Text</span>
  </span>
</span>

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

Looking to design a popup using CSS styles

How can I design a pop-up window using CSS for a specific div? I also want to display additional information within another div inside the popup. ...

csshtml

What is the process for turning off express logs on my node.js command line interface?

Recently, I've begun delving into the world of node.js and in an effort to improve my debugging practices, I've decided to move away from relying solely on console.log. Instead, I am exploring the use of debug("test message") for my debugging ...

javascriptnode.jsdebuggingexpress

Using Node.js: Mimicking Keystrokes on the Server Side (Similar to a Macro)

I am currently working on a node.js script that is designed to replicate the functionality of sending keypresses, such as the up arrow or the "a" button. My ultimate goal is to create a clone of the popular game Twitch Plays Pokemon. Essentially, whenever ...

javascriptnode.jsirc

What could be causing my CSS parallax effect to not work as expected?

I have been attempting to implement the parallax image technique following the Keith Clark tutorial, but I am facing difficulties in getting it to work correctly. Utilizing the skeleton CSS framework, my goal is to recreate an existing website in order to ...

htmlcss

Traverse div elements using jQuery and showcase the text within them

I've got a setup like the one below. I want to use jQuery to grab each link and display its href right below it. Instead of writing code for each div individually, I'm looking for a solution that works for all divs with the 'col' class, ...

javascriptjqueryhtmlcss

Why does the browser indicate that a GET request has been sent but the promise does not return anything?

Having trouble with a puzzling issue and unable to find any solutions online. I am attempting to make a basic HTTP get request to receive a JSON object from an API I created (using express+CORS). I have experimented with both Axios and VueResource, yet en ...

javascriptvue.jshttppromiseget

Is there a better method to accomplish this task in a more effective manner?

Is there a more efficient way to achieve this code with fewer lines of code? I'm looking for a solution that avoids repetition and makes it easier to manage, especially since I plan on creating multiple instances of this. Performance is a key consider ...

javascriptjqueryperformanceoptimization

Can a hyperlink be generated by simply inputting the URL once?

As I add numerous links to my website, I can't help but feel like a novice using the <a href>. I want users to see the URL of each link immediately without needing to hover over it first. Right now, I am structuring my links like this: <a h ...

htmlcss

How to Implement Flexbox Display Across Various Browsers Using jQuery?

Running into an issue here. I'm trying to switch from display: none to display: flex, display: flex-box, and display: -ms-flexbox but for some reason it's causing errors in my code.. Here's what I've been working on: $(elem).css({&apos ...

javascriptjquerycssflexbox

Clickable Angular Material card

I am looking to make a mat-card component clickable by adding a routerlink. Here is my current component structure: <mat-card class="card" > <mat-card-content> <mat-card-title> {{title}}</mat-card-title> &l ...

javascriptangulartypescriptangular-material

Does the functionality of JSON.parse include recursion?

After receiving a JSON string in response, I parse it as follows: ring = JSON.parse(response); However, although ring becomes an object, the property ring.stones is only a string when it should also be an object. To address this issue, if I execute: ri ...

javascriptjqueryjsonparsing

Issue - The 'defaultValue' is failing to load the state value, and the 'value' is not being updated when changed

My current setup involves an input field in my MovieInput.tsx file: <input id="inputMovieTitle" type="text" onChange={ e => titleHandleChange(e) } value={ getTitle() }> </input> This is how the titleHandleChange function ...

javascriptreactjstypescriptreact-reduxreact-hooks

CSS rule for targeting an element that does not have any child elements

I have a variety of different elements that are structured similarly to the following.. <div id="hi"> <div class="head"> </div> <div class="footer"> </div> </div> ..however, some of these elements do no ...

csscss-selectors

Inquiring about the usage of div elements in constructing an HTML webpage

When designing my own web pages, I consistently encounter issues with using divs for a multi-column layout. Despite utilizing the float attribute to align columns left or right, resizing the browser window often causes them to stack on top of each other an ...

csshtml

Unique title: "Implementing Unique Event Handlers with VueJS Components"

My VueJS and Buefy project begins with two distinct click actions: Click on the Cyan area -> redirects to another page (Action 1) Click on the Magenta area -> shows a dropdown menu (Action 2) https://i.stack.imgur.com/AVLOS.png However, when clic ...

javascriptvue.jsdom-eventsbulmabuefy

Alignment issue with React JSX background position; image not centered on the right in Material UI Grid item

I've recently completed a single-page website portfolio, but I'm encountering an issue with setting the background position of the home screen to center right. You can view my site here: Here is the link to my repository: https://github.com/Bolm ...

cssreactjsmaterial-uijsx

Show information from a JSON file in a tooltip on a Highcharts' pie chart

I have a pie chart that shows two percentages. I am looking to update the tooltip content to display information from my JSON data. Here is an example of how my JSON data looks: {"object1":{"percentage": 0.7, "numberOfObject": 167}, "object2":{"percentage ...

javascriptjsonhighchartstooltippie-chart

"Slice" the text in HTML

In my HTML code, I utilize a smarty variable; <div class="ty-blog__date">{$subpage.timestamp|date_format:"`$settings.Appearance.date_format`"}</div> {$subpage.timestamp|date_format:"$settings.Appearance.date_format"} When compiled, the dat ...

htmlsmarty

After the main page is loaded, the div will be dynamically populated with HTML content. How can we confirm that it has finished

I recently took over a project where a page loads and then code attached to that page populates a div with dynamically generated html – essentially filling an existing div with a string of html elements. Within this string are links to images, among oth ...

javascriptjqueryhtmlloading

Calculate the sum of the column values and disable the option to insert new rows in the UI grid

I am currently working on a ui-grid that has a column C which displays percentage values. There is a button labeled "add rows" that allows users to add new rows to the grid. However, the catch is that users can only add new rows until the total percentage ...

javascriptangularjsangular-ui-gridui-grid