Add a animated smooth webpage scroll progress bar to bottom of webpage & Change webpage font to Google Sans Text and set font size to 25px, also change heading font
Version au
// ==UserScript==
// @name Webpage Scroll Progress Bar & Google sans text font
// @license MIT
// @namespace http://tampermonkey.net/
// @version 0.2
// @description Add a animated smooth webpage scroll progress bar to bottom of webpage & Change webpage font to Google Sans Text and set font size to 25px, also change heading font
// @match *://*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Create the progress bar element and style it
const progressBar = document.createElement("div");
progressBar.style.position = "fixed";
progressBar.style.bottom = "0"; // Change 'top' to 'bottom'
progressBar.style.left = "0";
progressBar.style.width = "0";
progressBar.style.zIndex = "9999"; // Adjust this value as needed
progressBar.style.height = "2.5px";
progressBar.style.backgroundColor = "red";
progressBar.style.transition = "width 0.1s ease-out";
document.body.appendChild(progressBar);
// Update progress bar on scroll
window.addEventListener("scroll", () => {
const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
const scrollProgress = (window.scrollY / scrollableHeight) * 100;
progressBar.style.width = scrollProgress + "%";
// Change color from red to blue based on progress
const color = `rgb(${250 - scrollProgress * 2.55}, 0, ${scrollProgress * 9.55})`;
progressBar.style.backgroundColor = color;
});
// Hide the footer element (change 'footer' to the actual element or class name)
const footer = document.querySelector("footer"); // Change 'footer' to the selector for your footer
if (footer) {
footer.style.display = "none";
}
})();
(function() {
'use strict';
// Add font-face style to the page for the main content font
const mainFontStyle = document.createElement('style');
mainFontStyle.textContent = `
@font-face {
font-family: 'Google Sans Text';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Google Sans Text'), local('Google-Sans-Text'),
url(https://fonts.gstatic.com/s/googlesanstext/v16/5aUu9-KzpRiLCAt4Unrc-xIKmCU5qEp2iw.woff2) format('woff2');
}
body {
font-family: 'Google Sans Text', sans-serif !important;
}
`;
// Add font-face style to the page for headings
const headingFontStyle = document.createElement('style');
headingFontStyle.textContent = `
@font-face {
font-family: 'Google Sans Text';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Google Sans Text'), local('Google-Sans-Text'),
url(https://fonts.gstatic.com/s/googlesanstext/v16/5aUp9-KzpRiLCAt4Unrc-xIKmCU5oPFTnmhjtg.woff2) format('woff2');
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Google Sans Text', sans-serif !important;
}
`;
// Append both styles to the document
document.head.appendChild(mainFontStyle);
document.head.appendChild(headingFontStyle);
})();