Creating Animated Elements with Video Clips
At times, there arises a need to incorporate small animated elements into a website, especially when Sparkle's existing array of animation options doesn’t meet the need. This is particularly true for elements like compact animated ads or impactful headings, commonly found across the internet and social media. While Sparkle isn't designed as a video editing application, it does offers a versatile video element that seamlessly integrates video into web pages.
Unlike some other web builders, Sparkle provides freedom from standard video aspect ratios when embedding a player into your web page. The video element adjusts effortlessly to the aspect ratio of the video it contains. Therefore, if you can create video elements, Sparkle excels in handling them.
Consider the following example: imagine a heading with a dynamically changing word in the middle. To achieve this effect, we employed a video editing application, such as the free and highly recommended CapCut. Essentially, we set up a canvas spacious enough to accommodate the intended text size for our headline. After adding and styling the text, along with animated transitions, we generated a small MP4 video. This video was then compressed using Handbrake to optimize it for the web.
In Sparkle, we constructed the headline using standard text and seamlessly integrated the small video. The final result is visually engaging and dynamic.
We Create Great
Websites with Sparkle
By combining standard Sparkle elements such as text, boxes icons and video, you can easily add some extra movement to your page, Here is another example.
Check
This
Out
And what about those story videos you see on Instagram etc? They can also be added to your web page to create a more engaging experience for your site visitors
In all of the above examples. the videos have no soundtrack, so they were set to autoplay and loop. If you intend to use video clips in this way, here are some general rules. Keep file sizes small. Use the ‘From Disk’ option - clearly these types of clips are not best suited for delivery via video-sharing sites. They can, of course, be set to deliver from a network location if you have your videos hosted on your web server. Finally, don’t go overboard with this technique - overkill can annoy your site visitors, so be sure to have a purpose for adding this extra layer of animation.