These animated SVG banners will convey life to even probably the most fundamental pages. They’re SVGs (scaleable vector graphics), which implies that you could make them any dimension and present them on any display screen (even retina), and so they’ll look 100% crisp and clear.
What occurs when the icon isn’t on the display screen? Don’t fear, the icons gained’t animate till you’ve scrolled them into view.
Simple to Edit
Utilizing these banners are ridiculously simple! Critically, simply add a div with the correct class title and we’ll take it from there:
<div class="dxcdeskicon desk01"></div>
Even including buttons to regulate the animations is a peice of cake. You’ll be able to even specify which banner might be affected by placing their numbers in between the brackets:
<button onclick="restartIcons()">Restart</button> <button onclick="reverseIcons()">Reverse</button>
Wish to get all loopy and mess with the .js file? It couldn’t be extra easy:
var titleText = "Animated SVG Banners"; var subtitleText = "100% scaleable graphics that"; var subtitleText2 = "solely animate on scroll"; var buttonText = "READ MORE"; var readMoreURL = ["#", "#"];
Evaluate the scale and high quality of SVG’s, JPG’s, and PNG’s
Suitable With All Main Browsers
This merchandise makes use of Greensock’s TweenMax for the animations, relatively than jQuery. Why? As a result of GSAP is SOOOO a lot quicker and smoother. See for your self: jQuery vs GSAP pace take a look at.