Scroll Progress as Canvas to Favicon

Developer
Jack Rugile
Size
2,407 Kb
Views
12,144
  1. Scroll Progress as Canvas to Favicon Previews
  2. Scroll Progress as Canvas to Favicon HTML Codes
  3. Scroll Progress as Canvas to Favicon CSS Codes
  4. Scroll Progress as Canvas to Favicon JS Codes

How do I make an scroll progress as canvas to favicon?

NOTE: Due to iframes and such on CodePen, you'll have to use the Debug view mode to see the favicon update: http://s.codepen.io/jackrugile/debug/vGKWem. What is a scroll progress as canvas to favicon? How do you make a scroll progress as canvas to favicon? This script and codes were developed by Jack Rugile on 09 January 2023, Monday.

Scroll Progress as Canvas to Favicon Previews
IQ Test

Scroll Progress as Canvas to Favicon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scroll Progress as Canvas to Favicon</title> <link rel="shortcut icon" type="image/x-icon" href="#" class="favicon"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--
NOTE: Due to iframes and such on CodePen, you'll have to use the Debug view mode to see the favicon update:
https://s.codepen.io/jackrugile/debug/vGKWem
--> <script src="js/index.js"></script>
</body>
</html>

Scroll Progress as Canvas to Favicon - Script Codes CSS Codes

body { height: 4000px;
}
canvas { bottom: 0; left: 0; margin: auto; position: fixed; right: 0; top: 0;
}

Scroll Progress as Canvas to Favicon - Script Codes JS Codes

var favicon = document.querySelector( '.favicon' ),	c = document.createElement( 'canvas' ),	ctx = c.getContext( '2d' ),	w = h = c.width = c.height = 32,	lineWidth = 6,	prog = 0,	progTarget = 0,	TAU = Math.PI * 2;
function loop() {	requestAnimationFrame( loop );	progTarget = window.scrollY / ( document.body.offsetHeight - window.innerHeight );	prog += ( progTarget - prog ) * 0.4;	ctx.clearRect( 0, 0, w, h );	ctx.beginPath();	ctx.arc( w / 2, h / 2, w / 2 - lineWidth / 2, 0, TAU );	ctx.lineWidth = lineWidth;	ctx.strokeStyle = 'hsla(0, 0%, 0%, 0.1)';	ctx.stroke();	ctx.beginPath();	ctx.arc( w / 2, h / 2, w / 2 - lineWidth / 2, -Math.PI / 2, -Math.PI / 2 + prog * TAU );	ctx.strokeStyle = 'hsla(0, 0%, 0%, 0.7)';	ctx.stroke();	favicon.setAttribute( 'href', c.toDataURL() );
}
loop();
document.body.appendChild( c );
Scroll Progress as Canvas to Favicon - Script Codes
Scroll Progress as Canvas to Favicon - Script Codes
Home Page Home
Developer Jack Rugile
Username jackrugile
Uploaded January 09, 2023
Rating 4.5
Size 2,407 Kb
Views 12,144
Do you need developer help for Scroll Progress as Canvas to Favicon?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jack Rugile (jackrugile) Script Codes
Name
Canvas Sparkly Circle Loader
Canvas Parallax Skyline
SpacePi js13k
Canvas Fireworks
Hearthstone Style Card Hover
Light Loader
Canvas Sparkle Light Trail
Develop Denver Logo
Rainbow Firestorm
Canvas Bokeh Generation
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!