Looking to achieve a scroll effect with mix-blend-mode using JavaScript?

I am seeking a method to adjust the background color of a specific element based on the background itself. While CSS offers the mix-blend-mode property, I am looking to specify the color manually.

Ideally, I would like to achieve the same effect using an SVG.

To better illustrate my goal, I have provided a jsfiddle demonstrating the mix-blend-mode property: https://jsfiddle.net/5p69j4st/7/

.block {
  position: fixed;
  top: 10px;
  left: 10px;
  height: 25px;
  width: 25px;
  background-color: #fff;
  mix-blend-mode: difference;
}

.is-green {
  display: block;
  height: 300px;
  width: 100%;
  background-color: green;
}

.is-white {
  display: block;
  height: 300px;
  width: 100%;
  background-color: #fff;
}
<div class="block">
</div>
<div class="is-green">
</div>
<div class="is-white">
</div>
<div class="is-green">
</div>

Therefore, I aim to have the fixed element with the class block appear white when positioned on the green background.

javascriptcsssvgmix-blend-mode

Answer №1

Discover a unique trick that allows you to adjust the coloration of a fixed element within a different block using the property background-attachment:fixed

.block {
  position: fixed;
  top: 10px;
  left: 10px;
  height: 25px;
  width: 25px;
  border:1px solid;
  box-sizing:border-box;
}

.is-green {
  display: block;
  height: 300px;
  width: 100%;
  background:
    linear-gradient(#fff,#fff) 10px 10px/25px 25px fixed no-repeat,
    green;
}

.is-white {
  display: block;
  height: 300px;
  width: 100%;
  background:
    linear-gradient(#000,#000) 10px 10px/25px 25px fixed no-repeat,
    #fff;
}
body {
 padding-bottom:200px;
}
<div class="block">
</div>
<div class="is-green">
</div>
<div class="is-white">
</div>
<div class="is-green">
</div>

Despite its effectiveness, there are a couple of limitations with this approach: Content within the block will disrupt the background effect, and you must update values in multiple locations.

To address these issues, you can utilize pseudo-elements and CSS variables:

:root {
  --t:10px;
  --l:10px;
  --h:25px;
  --w:25px;
}

.block {
  position: fixed;
  z-index:999;
  top: var(--t);
  left: var(--l);
  height: var(--h);
  width: var(--w);
  border:1px solid;
  box-sizing:border-box;
  color:red;
}

.is-green {
  display: block;
  height: 300px;
  width: 100%;
  position:relative;
  z-index:0;
  background:green;
}
.is-green::before {
  content:"";
  position:absolute;
  z-index:99;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    linear-gradient(#fff,#fff) var(--l) var(--t)/var(--w) var(--h) fixed no-repeat;
}

.is-white {
  display: block;
  position:relative;
  height: 300px;
  width: 100%;
  background: #fff;
  color:#000;
}
.is-white::before {
  content:"";
  position:absolute;
  z-index:99;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    linear-gradient(#000,#000) var(--l) var(--t)/var(--w) var(--h) fixed no-repeat;
}
body {
 padding-bottom:200px;
}
<div class="block">
Hi
</div>
<div class="is-green">
  lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum
</div>
<div class="is-white">
 lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum
</div>
<div class="is-green">
 lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum
</div>

Adjust the gradient color to your preference with ease using this method.

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

Top method for keeping track of most recent function outcome

Over time, I have become accustomed to utilizing the bind method to store the previous result of a function and keep track of it for future use. This allows me to easily concatenate or join the previous string with a new string without needing external var ...

javascriptbind

Having trouble creating a text channel in discord.js

Today I successfully programmed a bot to respond to the "!new" command, but encountered an unexpected issue. The current functionality of the bot creates a channel named "support-1" when prompted with the "!new" command. However, every subsequent use of th ...

javascriptdiscord.js

Angular.js Form Submission Results in Error 405: POST Method is Not Permitted

Every time I attempt to submit my form, I come across a 405 error. Here is the code snippet from my controller: 'use strict'; angular. module('myApp'). component('zipPopup', { templateUrl: 'zip-popup/zip ...

javascriptangularjs

Retrieving the selected value from an added dropdown list using jQuery

Could someone please guide me on how to retrieve the selected value from an appended select list using jQuery? Any assistance would be greatly appreciated. Thank you in advance. var wrapper1 = $(".column1"); array1 = ["sample1", "sample2", "sample3"]; ...

javascriptjqueryajax

What is the best way to make a flexbox stretch to fill the entire screen

Can someone guide me on how to ensure my flexbox expands to fill the entire screen? I am working on a website and I want to eliminate any empty spaces from it. >> https://i.sstatic.net/uAooe.png I have attempted setting margin and padding to zero b ...

htmlcssflexbox

Is it possible for memory leaks to occur due to the use of the JavaScript setInterval

Currently in the works on a JavaScript animation project that is showing promise. I've observed that using setInterval(), setTimeout(), and even requestAnimationFrame results in automatic memory allocation and frequent garbage collection. Too many GC ...

javascriptmemory-leakssetinterval

What is the best way to incorporate a custom event listener into my React Native component?

Hello everyone, I am currently working with React Native+Expo and have created a custom component called a stepper. Here's how it looks: https://i.sstatic.net/CfQcl.png Below is the code for this custom stepper: import React, { useState } from ' ...

javascriptreactjsreact-nativeexpo

Creating a VSCode extension using Vue: Step-by-step guide

I'm looking to develop a VSCode extension with Vue utilizing the VSCode webview. However, when attempting to import the compiled index.html into my extension, I consistently receive a prompt to enable JavaScript. Is there a solution for integrating Vu ...

javascriptvue.jsvisual-studio-codevscode-extensions

Preventing Broken URLs in Jquery each

What is the best way to prevent taking images with broken URLs? jQuery.each(jQuery('img'), function(index, obj) { imageStack.add(jQuery(obj)); }); ...

javascriptjquery

Assign the value from the list to a variable in order to execute an API call

Imagine a scenario where there's a button that displays a random joke based on a specific category. The categories are fetched using an API request from https://api.chucknorris.io/jokes/categories The jokes are generated from https://api.chucknorris. ...

javascripthtmlapi

I seem to be having trouble with my JavaScript code when attempting to search for items within

I want to implement an onkeyup function for a text input that searches for patient names from column 2 in my table. However, it seems to be not working properly as I don't get any results in return. Below are the snippets of what I have done so far. ...

javascripthtml

Tips on adjusting the Leaflet Map's zoom level to display all markers in React Leaflet

I am currently working on a project with React Leaflet map that requires changing the center and zoom based on a set of markers. The goal is to adjust the zoom level so that all the markers are visible on the map. To achieve this change in view, I am util ...

javascriptreactjstypescriptleafletreact-leaflet

What could be the reason behind my Javascript code returning "object object"?

I am a beginner with jQuery. I attempted to calculate the sum of items from my django views using jQuery. Here's what I have so far: $(document).ready(function() { var sch = $('#sch-books'); var gov = $('#gov-books'); ...

javascriptjquerydjango

Substitute link with asynchronous JavaScript and XML

I need to enable/disable user accounts by clicking on an anchor. The list of users is created dynamically using a loop. Here's an example of an anchor tag: <a href="http://www.example.com/users/deactivate/44" class="btn btn-success" title="Deactiv ...

javascriptjqueryhtmlajaxanchor

Developing a custom edit template with Infragistics through coding

Currently, our team utilizes the Infragistics grid without binding datasets until runtime. Instead, we set up the grid settings in code as per the preference of our senior developer. While effective, this method can seem a bit lengthy. I am interested in ...

.netasp.netjavascriptinfragistics

In the realm of Laravel, Vue, and Javascript, one may question: what is the best approach to omitting a key

When working with JSON data, I encountered a problem where leaving some keys unfilled resulted in incorrect results. I want to find a way to skip these keys if they are not filled. I have shared my code for both the backend and frontend below. Backend La ...

javascriptphplaravelvue.js

Exploring the optimal approach for distinguishing between numbers and strings in a JavaScript/Typescript class

I recently encountered a situation with my Typescript/React solution where I defined a property as a number and set the input type to "number", but when the state value was placed in an input field, it would change to a string unless properly handled. In ...

javascripthtmlreactjstypescripthtml-input

Using TinyMCE editor to handle postbacks on an ASP.NET page

I came up with this code snippet to integrate TinyMCE (a JavaScript "richtext" editor) into an ASP page. The ASP page features a textbox named "art_content", which generates a ClientID like "ctl00_hold_selectionblock_art_content". One issue I encountered ...

javascriptjqueryasp.nettinymce

Incorporating Card Layouts with SwiperJS

Reference Code: See Example on Code Sandbox I am looking to implement a swiper that allows for navigating one slide at a time with a layout where slidesPerView: "auto" and fixed width are used. The first two slides behave as expected, but the la ...

javascripthtmlcssswiper.js

What is the best way to eliminate the unattractive white border surrounding dialog boxes?

Is there a way to remove the unsightly white outline around the UI Dialog? Check out this picture of the dialog I've tried various solutions I found on Google and Stack Overflow, such as: .ui-widget-content { border: none !important; outlin ...

jquerycssdialog