I want to have a PNG sequence that displays 68 frames of animation and then loops the final 20 frames x number of times.
I based my code on the suggestion from ‘r3mainer’ on your page:
[https://stackoverflow.com/questions/43595504/play-one-part-of-gif-first-then-loop-a-certain-section-indefinitely]
But I can not get it to work.
I created the vertical PNG ‘film strip’, a CSS file with the appropriate background style info, and a JS file referenced in an HTML.
With the PNG, the JS, the HTML, and the CSS uploaded all I get for an image on the page is the first ‘frame’ of the PNG strip. There are no error messages.
I think there’s something I don’t understand about how the JS code should be deployed.
Here’s my HTML file:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Strip Test</title>
<script src="film_strip_script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="draw.css">
</head>
<body>
<div id="draw"></div>
</body>
The CSS:
#draw {
width: 279px;
height: 202px;
margin: 0 auto;
background: url(basquiat_strip.png) top center;
}
JavaScript file:
$(function() {
var ani = {
frame_height: 202,
num_frames: 68,
loop_frame: 30,
frame_duration: 1,
cur_frame: 0
};
window.setInterval(
function() {
$('#draw').css( 'background-position-y',
(-ani.frame_height * ani.cur_frame ) + 'px'
);
ani.cur_frame = (ani.cur_frame + 1) % ani.num_frames;
if (ani.cur_frame == 0) ani.cur_frame = ani.loop_frame;
},
ani.frame_duration
);
});