I developed a dynamic image slideshow using HTML and JS specifically for the Lively Wallpaper app.
This app offers various customization options, which are stored in the LivelyProperties.json file along with input types such as sliders and text boxes.
To access these properties, one needs to define a function called
function livelyPropertyListener(name, val){}Inside the .json file, there is a slider that can be adjusted through the app's menu. When the slider value changes, it updates the number displayed in a <div> using .innerHTML, however, the variable transitionDuration retains its old value.
The animation function anime used in the code is from the anime.js library.
Upon opening the .html file in Firefox, no errors are reported, indicating that the internal JavaScript functions properly.
var textEl = document.querySelector(".text");
var transitionDuration = 3000;
var imageInterval = 5000;
function livelyPropertyListener(name, val) //I assume this function is recognized when the .html file is parsed in the app
{
if(name =="transitionDuration")
{
transitionDuration = val; //transitionDuration stays 3000 (the value in the beginning of the code)
textEl.innerHTML = val; //this works and the text updates as the slider is moved (due to app limitations file needs to be reloaded for it to updated, but that's fine)
}
}
var ScaleEasingFunc = 'easeInQuad';
anime({
targets: '.transition',
opacity:0,
direction: 'alternate',
loop: true,
easing: 'easeInOutCubic',
delay: imageInterval/2,
endDelay: imageInterval/2,
duration: transitionDuration,
loopBegin: function(anim) {
changeImage();
},
});
anime({
targets: '.scale',
scale:1.1,
translateX: screen.width*-1/100,
translateY: screen.width*1/100,
direction: 'alternate',
loop: true,
easing: ScaleEasingFunc,
duration: imageInterval + 2*transitionDuration,
});
</script>