Growing Root - Scroll control - CANVAS
How do I make an growing root - scroll control - canvas?
Reads a path to figure out where to be in terms of x goes from -50 to 50 in this example. What is a growing root - scroll control - canvas? How do you make a growing root - scroll control - canvas? This script and codes were developed by Charlie Walter on 11 January 2023, Wednesday.
Growing Root - Scroll control - CANVAS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Growing Root - Scroll control - CANVAS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvasTree"></canvas> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://raw.githubusercontent.com/epistemex/cardinal-spline-js/master/curve.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Growing Root - Scroll control - CANVAS - Script Codes CSS Codes
body { text-align: center; height:2300px; margin: 0; background: #181009; } canvas#canvasTree { position: fixed; left: 0; margin-left: auto; margin-right: auto; background: #181009; }
Growing Root - Scroll control - CANVAS - Script Codes JS Codes
var canvas = document.getElementById("canvasTree"), context = canvas.getContext("2d"), center = 0, scroll_top = 0, scroll_resistance = 100; // cannot be < || == 0
canvas.setAttribute("width", 400 + "px");
canvas.setAttribute("height", 400 + "px");
var main_root_path = [ 5,20,40,50,55,54,50,40,20,5,-20,-40,-50,-54,-55,-50,-40,-20,-5,5,20,40,50,55,54,50,40,20,5,-20,-40,-50,-54,-55,-50,-40,-20,-5,5,20,40,50,55,54,50,40,20,5,-20,-40,-50,-54,-55,-50,-40,-20,-5,5,20,40,50,55,54,50,40,20,5,-20,-40,-50,-54,-55,-50,-40,-20,-5,5,20,40,50,55,54,50,40,20,5,-20,-40,-50,-54,-55,-50,-40,-20,-5,5,20,40,50,55,54,50,40,20,5,-20,-40,-50,-54,-55,-50,-40,-20,-5,5,20,40,50,55,54,50,40,20,5,-20,-40,-50,-54,-55,-50,-40,-20,-5,5,20,40,50,55,54,50,40,20,5,-20,-40,-50,-54,-55,-50,-40,-20,-5
]
center = canvas.width/2;
setInterval(function(){ context.clearRect(0,0,canvas.width,canvas.height); context.strokeStyle = "limegreen"; context.beginPath(); context.moveTo(center, -10); for(var i=0; i<scroll_top; i+=1){ if(i <= main_root_path.length){ if(scroll_top < main_root_path.length){ context.lineWidth = scroll_top-i; }else{ context.lineWidth = main_root_path.length-i; } context.lineTo(center+main_root_path[i], i*20); context.moveTo(center+main_root_path[i], i*20); context.stroke(); } } context.closePath();
},100);
window.onscroll=function(){ scroll_top = document.documentElement.scrollTop || document.body.scrollTop; scroll_top = Math.round(scroll_top/scroll_resistance);
};
// Only bit of JQuery, just for CODEPEN iframe
$('html,body').animate({scrollTop: 2300}, 1000, function(){ $('html,body').animate({scrollTop: 1150}, 1000);
});
Developer | Charlie Walter |
Username | cjonasw |
Uploaded | January 11, 2023 |
Rating | 3 |
Size | 2,342 Kb |
Views | 4,048 |
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!
Name | Size |
Animating Scrolling | 3,221 Kb |
CSS3 Carousel | 3,346 Kb |
MMORPG UI | 7,869 Kb |
JQuery countdown | 4,386 Kb |
Login form | 3,129 Kb |
Slanty goodness | 2,707 Kb |
Flash CC HTML5 Canvas | 14,083 Kb |
Three.js half circle health bar | 2,617 Kb |
Charliejwalter.net | 4,688 Kb |
Angry Birds Catapult with Divs | 4,366 Kb |
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!
Name | Username | Size |
Sign Up Form | Sicontis | 5,272 Kb |
Calendar | Miroot | 2,033 Kb |
CSS Google Now | Jackmoran | 3,196 Kb |
Transition | Shayhowe | 1,632 Kb |
Angular Sandbox | Alexgurrola | 1,616 Kb |
Angular Route | Arun_v606 | 1,837 Kb |
Myprofile | SoufianeAbid | 2,451 Kb |
Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
Light Switch | Bartuc | 4,933 Kb |
Christ the Redeemer | Prashantsani | 2,208 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!