How does the Showcase page section work?

[Allworth]

Hello again!

I really love the “Showcase” page section. I would like to make my own showcase section. How does it work and how we do this? It looks as if there is some kind of animation or slider being used.

Can you explain how this is done please?

Many thanks 🙂

[Raghavendra]

There is some explanation of this section at the end of the below post –

https://www.livemeshthemes.com/support/forums/topic/slider-wont-slide/

Pls have a look and get back to me for further queries. Thanks

[Allworth]

Hello there,

I think you may be refering to something else. What I am talking about is the “Showcase” page section which is on the demo page …

I’m wondering how the animations are achieved? I would like to use my own graphics for this. Thanks!

[Raghavendra]

The end of the post talks about the same section but probably the details are less. Here is some more information that I sent to another user. I have attached the text of the email so that you can view the content better. The code can sometimes be jumbled up when I paste them here.

[Allworth]

Hello, thanks for the replies and sending me everything. Sadly, I still don’t understand how this page segment works and how the animations are being created.

I will just replace your graphics with mine and hope for the best.

[Raghavendra]

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.

[Author]

Posts