An Interest In:
Web News this Week
- April 4, 2024
- April 3, 2024
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
Adding a dynamic favicon with users scroll percentage
I decided to set myself the challenge of updating a favicon dynamically to show the users percentage scroll through the page.
First up, we introduce a function to generate an SVG as a data URL (which we will use for the favicon)
const faviconHref = (value) => { return `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 75 75 %22 fill=%22white%22><text x=%2250%%22 y=%2250%%22 dominant-baseline=%22central%22 text-anchor=%22middle%22 font-size=%2258%22 stroke=%22black%22 fill=%22white%22>${value}</text></svg>`;};
This function will take an input value and return a corresponding SVG (as a data URL) with the "value" text drawn on it.
The next step is to introduce a function to update the favicon in the page header.
const changeFavicon = (favicon) => { if (typeof window === 'undefined') { return; } const link = window.document.querySelector("link[rel*='icon']") || window.document.createElement('link'); link.type = 'image/svg+xml'; link.rel = 'shortcut icon'; link.href = faviconHref(favicon); window.document.getElementsByTagName('head')[0].appendChild(link);};
Next we introduce a function to calculate the users sroll and change the favicon using the above functions.
const calculateScroll = () => { const parent = document.body.parentNode; let percentage = ((document.body.scrollTop || parent.scrollTop) / (parent.scrollHeight - parent.clientHeight)) * 100; percentage = Math.round(percentage); changeFavicon(percentage);};
Here we are calculating the users scroll percentage of distance down the page and passing that percentage into the changeFavicon function, which in turns renders an SVG of the passed percentage value.
Finally we need to attach a window Event Listener that will call our calculateScroll function when a users scrolls as well as make an initial call to the function when the script is loaded.
window.addEventListener('scroll', calculateScroll);// initial callcalculateScroll();
The above functions can be added to an HTML page, such that when a user scrolls it will update the favicon
Original Link: https://dev.to/styxofdynamite/adding-a-dynamic-favicon-with-users-scroll-percentage-26mp
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To