Fonts adapting to background in Javascript
Fonts adapting to background in Javascript: Learn how to do it step by step.
Here is an example page for Fonts adapting to background in Javascript.
Clicking on the image (left) wil bring you to an example page.
When you scroll you will see the menu fonts change to the opposite color compared to the backgound. There page starts with text. While scrolling you will come across two images which the color wil also respond to.
IN SHORT (Further in this article you'll find details about statements)
- Use the window.onscroll = function() to react on the user scrolling;
- Check the top of your images against this.oldScroll;
- As long as you only find text:
- Use document.elementsFromPoint() to find all layered elements below you text (at time of scrolling);
- Check the color of the element most on top, using getComputedStyle();
- Adapt that color of that background for your text, in invert.
- If you find an image:
- Use .getImageData() from coordinates you determine, which will bing you the color of that position;
- Adapt that color of that background for your text, in invert.
Hope this helps you for fonts adapting to background in Javascript.
The not so common principles that are used
elementsFromPoint()
The elementsFromPoint() method is a web API that can be used to find all the elements at a specific point on a web page. To use it, you will first need to get the x and y coordinates of the point on the page where you want to find elements. Then, you can call the elementsFromPoint(x, y) method, passing in the x and y coordinates as arguments. The method will return a list of all the elements at that point, which you can then manipulate or interact with as needed.
Here’s an example of how you might use the elementsFromPoint() method to find all the elements at a specific point on a page:
let x = 50;
let y = 100;
let elements = document.elementsFromPoint(x, y);
console.log(elements);
This will find all elements at the point (50, 100) and return an array of HTML element objects. You can iterate over the array of elements and check for their attributes or class name or id to find the specific element you are looking for.
for (let i = 0; i < elements.length; i++) {
console.log(elements[i].className);
if(elements[i].className == "your-class-name"){
// do something with this element
}
}
This will log the className of all elements at that point and check if any of them have a classname of “your-class-name”
this.oldScroll
Explained in this StackOverflow article.
getComputedStyle()
Explained in w3schools article.
element.style.filter = "invert(100%)";
Explained in w3schools article.
More for fonts adapting to background in Javascript
There are several ways to change the font color of a menu in Javascript based on the background color of the webpage. One way to accomplish this would be to use the getComputedStyle() method to retrieve the background color of the webpage, and then use this value to set the color of the menu text. Here is an example of how this could be done:
// Get the background color of the webpage
var backgroundColor = getComputedStyle(document.body).backgroundColor;
// Get the menu element
var menu = document.getElementById("menu");
// Set the color of the menu text based on the background color
if (backgroundColor == "black") {
menu.style.color = "white";
} else {
menu.style.color = "black";
}
Another way is to use a library as contrast to calculate the contrast of the background color, and set the font color accordingly.
import contrast from 'contrast'
const backgroundColor = window.getComputedStyle(document.body).backgroundColor
const fontColor = contrast(backgroundColor) === 'light' ? 'black' : 'white'
document.getElementById("menu").style.color = fontColor
You can also use css-variables and set a variable as color, then use it in the css styles.
document.documentElement.style.setProperty('--menu-color', fontColor)
That’s it for fonts adapting to background in Javascript.
Questions and suggestions are welcome.