An image slideshow is a great way to showcase multiple pictures in video format. It's commonly used to generate enticing social media videos based on photographs, like real estate listings, a series of pictures, or an image collage. You can turn images into slideshows with JavaScript and a video editing API. Here's how to do that using Node.js in just a few lines of code:
const Creatomate = require('creatomate');
const client = new Creatomate.Client('Your API Key');
client.render({
source: new Creatomate.Source({
outputFormat: 'mp4',
width: 1920,
height: 1080,
elements: [
// Image 1
new Creatomate.Image({
source: 'https://cdn.creatomate.com/demo/living-room.jpg',
track: 1,
duration: 5,
clip: true,
animations: [
new Creatomate.Scale({
easing: 'linear',
scope: 'element',
startScale: '120%',
fade: false,
}),
],
}),
// Image 2
new Creatomate.Image({
source: 'https://cdn.creatomate.com/demo/bathroom.jpg',
track: 1,
duration: 5,
clip: true,
animations: [
new Creatomate.Slide({
time: 'start',
duration: 1,
easing: 'cubic-in-out',
transition: true,
fade: false,
direction: '180°',
}),
new Creatomate.Scale({
easing: 'linear',
scope: 'element',
startScale: '120%',
fade: false,
}),
],
}),
// Image 3
new Creatomate.Image({
source: 'https://cdn.creatomate.com/demo/kitchen.jpg',
track: 1,
duration: 5,
clip: true,
animations: [
new Creatomate.Slide({
time: 'start',
duration: 1,
easing: 'cubic-in-out',
transition: true,
fade: false,
direction: '180°',
}),
new Creatomate.Scale({
easing: 'linear',
scope: 'element',
startScale: '120%',
fade: false,
}),
],
}),
// Image 4
new Creatomate.Image({
source: 'https://cdn.creatomate.com/demo/house.jpg',
track: 1,
duration: 4,
clip: true,
animations: [
new Creatomate.Slide({
time: 'start',
duration: 1,
easing: 'cubic-in-out',
transition: true,
fade: false,
direction: '180°',
}),
new Creatomate.Scale({
easing: 'linear',
scope: 'element',
startScale: '120%',
fade: false,
}),
],
}),
],
}),
}).then((renders) => {
console.log(renders);
});How it works: For this example, we'll be using the Creatomate package from NPM. This library allows us to create a slideshow entirely with JavaScript through a component-based architecture. It uses a JSON-based format to put together a scene where multiple photos appear for a short period of time. The photos smoothly transition from one to another, creating a visually appealing slide effect.
The "duration" property ensures that each photo remains visible for 5 seconds. Additionally, you can improve the slideshow's aesthetic appeal by adding a zoom effect with each image, often referred to as the Ken Burns effect, using the "animations" property. You can customize these animations and adjust their settings to achieve a variety of different effects.
To display the images sequentially, simply place them all on track number "1". To overlay a logo on top of the slideshow, you can place it on a separate track and position it in front. For more advanced scenarios, check out the online code video editor below. It allows you to design your own slideshow videos, then export them as JSON to use in your Node.js application.