All options
var config = {
element: document.getElementsByClassName('myanim')[0],
image: 'sprites/sprite04_64x64.png',
width: 64,
height: 64,
rows: '7', // It changed because it set .collumn_start
speed: 60,
over: true, // Default false and trigger when visible on scroll
rewind_out: true, // Rewind on mouse out
element_over: document.getElementsByClassName('main_button')[0], // Set element to trigger animation
row_start: 1
collumn_start: 2 // Must change .rows. 9 to 7
};
var spriteanim_min = new SpriteAnim(config);
element: document.getElementsByClassName('myanim')[0],
image: 'sprites/sprite04_64x64.png',
width: 64,
height: 64,
rows: '7', // It changed because it set .collumn_start
speed: 60,
over: true, // Default false and trigger when visible on scroll
rewind_out: true, // Rewind on mouse out
element_over: document.getElementsByClassName('main_button')[0], // Set element to trigger animation
row_start: 1
collumn_start: 2 // Must change .rows. 9 to 7
};
var spriteanim_min = new SpriteAnim(config);
Min. configuration:
var config_min, spriteanim_min;
var config_min = {
element: document.getElementsByClassName('config_min')[0],
image: 'sprites/sprite01_180x204_11por9.png',
width: 180,
height: 204,
rows: '11,11,11,11,11,11,11,11,2',
speed: 25,
};
spriteanim_min = new SpriteAnim(config_min);
var config_min = {
element: document.getElementsByClassName('config_min')[0],
image: 'sprites/sprite01_180x204_11por9.png',
width: 180,
height: 204,
rows: '11,11,11,11,11,11,11,11,2',
speed: 25,
};
spriteanim_min = new SpriteAnim(config_min);
Trigger animation when visible on scroll