You are right. You just have to replace the images and things should work. If you need to make changes, you just need to change the positions in the CSS (enter new values in custom/custom.css or Custom CSS tab in theme options panel) and that’s it. I did not want to give too many details on this since that may overwhelm if someone is not familiar with JS/CSS3.
I wish I had made this easier for users to understand this but there wasn’t any tool out there which can help bring together all of this custom animation to happen out of the box without any custom coding. And if someone is familiar with basics of JS and CSS, it is not all that hard either, IMO.
If you need information on how these animations are created, this animation is a combination of CSS and JS. JS looks something like this in js/main.js –
$('#featured-app h2').appear();
$('#featured-app h2').on('appear', function () {
$('#featured-app .app-screenshot').addClass('visible');
var delay = 1200;
$('#feature-pointers img').each(function () {
$(this).delay(delay).animate({ opacity: 1}, 200);
delay = delay + 200;
});
});
And the .visible class added to the .app-screenshot element (one that houses featured-app.gif) when the element “appears” to the user looks like this in CSS –
#featured-app .app-screenshot { position: absolute; top: 500px;
-webkit-transition: all 0.8s ease-in-out; }
#featured-app .app-screenshot.visible { top: 0; } /* Move to the top */
#feature-pointers img { position: absolute; opacity: 0; } /* Hide the feature pointers intially */
I am just setting the top position to 0 from initial position of 500 and changing the opacity of those arrows to 1 to make them visible in the JS. The CSS3 webkit-transition helps that animation of bottom to top happen. The arrow appearing one after another is done through JS shown above with a delay of 200 sec each. Hope this helps.