You need to include Jquery in your fiddle. That was giving you an error if your going to try and use it for scroll()
Also you dont need the .
in front of animate()
. Also give your body a height that you can scroll on your else youll never activate it. See my fiddle for the changes
Using JS to animate a circle stroke when in view
-
30-06-2022 - |
質問
I am trying to generate a site with interactive elements and animations. I have came across this Fiddle which is perfect for what I need.
I want the circle to start animating when the canvas element is visible in the browser, or possibly when a certain scroll point has been reached (ie: > 1000 px in the Y direction- start animation).
I am completely new to JS, so have tried to piece together code from other sources with no luck. I have tried (in context with the Fiddle):
// requestAnimationFrame Shim
(function() {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var endPercent = 85;
var curPerc = 0;
var counterClockwise = false;
var circ = Math.PI * 2;
var quart = Math.PI / 2;
context.lineWidth = 10;
context.strokeStyle = '#ad2323';
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 10;
context.shadowColor = '#656565';
function animate(current) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
context.stroke();
curPerc++;
if (curPerc < endPercent) {
requestAnimationFrame(function () {
animate(curPerc / 100)
});
}
}
// My altered code to the original
$(window).scroll(function() {
if ($('#myCanvas').is(':visible')) {
.animate();
}
});
But this is doing nothing. I would imagine this to be a relatively simple problem for those in the know. But I haven't a clue!
Look forward to your answers, apologies if I have missed anything!
解決
他のヒント
call your animate();
in this code
$(document).ready(function () {
called = false;
$(window).scroll(function (e) {
if ($(window).scrollTop() > $("canvas").position().top && !called){
animate();
called = true;
}
});
});
所属していません StackOverflow