☰

Webpage Scroll Progress Bar & Google sans text font

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

目前為 2024-01-02 提交的版本，檢視 最新版本。

// ==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);
})();