Are you searching for easy ways to create HTML5 animations for your website or social media?
Great, we’re here to help! In this video, we will show you how to create animated images that can be downloaded as HTML5 without programing.
Search for Bannersnack.com then create an account or log in if you already have one.
Next go to the single banner creator, and choose a size. For social media, you can find the sizes here. This time we will create a header image for a website, so let’s enter the size we need.
You can start by adding your images. We have already uploaded the images we’ll need so let’s add them to our canvas. After the images are added, we can start to animate them. Firstly, we will animate the background. We will give it a slide down motion.
By pressing the custom button, you can further customize the animation.
Try playing with different set-ups so you can find the best animations for your image.
The second layer will be the image of the mountain, this will have a slide up motion with the same custom settings as the background.
Our main object will be the top layer with the same slide down motion as the background but with a smaller Offset.
You can preview your work with the play button at the top.
After the main image is done, you can add some text if you want to. All of these can be animated as well. Try different animations to make your work look great and feel natural.
Our headline will have a slide up motion and since the text layer is below the mountain layer it will appear from the back of the mountain.
Next let's add a separator line and a subheading text with the Basic animation preset.
Let’s add a call to action button to the banner. This will also have an animation, but it will be a little different since it will have a middle animation, meaning that you’ll add a movement between the build in and build out animations. Let’s see how it works. Press this button to add your middle animation.
Here are 10 presets that you can choose from. Each thumbnail has a preview option, all you need to do is hover your mouse over it to see it.
We’re gonna go with the Pulsate preset. All of these presets can also be further customized in the same way as the build-in and out animations.
Let’s make the duration longer and set the start timing to 3.5 sec.
Let's have one last preview.
If everything looks good, then you can go ahead and save your work.
Then, press the view button on the thumbnail and download it in standard HTML5.
Now you should be all set!
For more in-depth tutorials and design videos, please check out our youtube channel and subscribe. You can ask us any questions in the comment section below.
Thanks for watching!
Create a free account and get started! https://www.bannersnack.com/auth/signup/
---
Check out our Blog: https://blog.bannersnack.com/
Follow us on Twitter: https://twitter.com/bannersnack
Like us on Facebook: https://www.facebook.com/bannersnack
