Return to previous page

How to have animations when the website opens up?

This topic has 4 replies, 2 voices, and was last updated 1 years, 3 months ago ago by Rose Tyler

GTP

Participant

August 15, 2023 at 10:31

Hello,

we have added a domain name on the PCA.
when you initially open the website the full elements such as the slider, logo, header menu, login button appear one after another, in a sort of animation.

can we replicate this somehow?
like show the logo come up first, and then the header menu, then a slider etc.?

thanks!

#364586 Copied Theme version: 9.1.13

3 Answers

Rose Tyler

Support staff

August 15, 2023 at 16:14

Hello, GTP,

Thank you for contacting us and for using XStore.

Please provide the URL of your site where elements in the header are added. We will check what can be done to help you.

Kind Regards,
8theme team

#364638 Copied

GTP

Participant

August 15, 2023 at 23:40

Hi Rose,

we are using the demo of this store; https://xstore.8theme.com/elementor2/industrial-power-tools/

thanks!

#364659 Copied

Rose Tyler

Support staff

August 16, 2023 at 08:29

Hello, GTP,

Thank you for your response, but we asked you about URL of your site.

In this case, we can provide you with an example, but further customization should be done by you for your site.

Result – https://gyazo.com/da6e5f9935f61fed7450126d5d842ee9 , code snippet added in child-theme/functions.php:

add_action('wp_head', function() { ?>
    <style type="text/css">
        .header-wrapper .et_column {
            opacity: 0;
            transform: translateY(30px)
        }

        .et-preloader-hide .header-wrapper .et_column {
            animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .2s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .2s forwards;

        }

        .et-preloader-hide .header-wrapper .et_column:nth-child(2) {
            animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .4s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .3s forwards
        }

        .et-preloader-hide .header-wrapper .et_column:nth-child(3) {
            animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .5s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .4s forwards
        }

        .et-preloader-hide .header-wrapper .et_column:nth-child(4) {
            animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .6s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .5s forwards
        }

        @keyframes et_header_fade_up {
            0% {
                transform: translateY(30px)
            }

            to {
                transform: translateY(0)
            }
        }

        @keyframes et_header_fade {
            0% {
                opacity: 0
            }

            to {
                opacity: 1
            }
        }

    </style>
<?php });

For https://xstore.8theme.com/elementor2/industrial-power-tools/ , the next code can be used:

add_action('wp_head', function() { ?>
    <style type="text/css">
        .header-wrapper .et_element-top-level {
            opacity: 0;
            transform: translateY(30px)
        }

        .et-preloader-hide .header-wrapper .et_b_header-logo.et_element-top-level {
            animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .2s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .2s forwards;

        }

        .et-preloader-hide .header-wrapper .header-secondary-menu.et_element-top-level {
            animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .4s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .3s forwards
        }

        .et-preloader-hide .header-wrapper .et_b_header-search.et_element-top-level {
            animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .5s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .4s forwards
        }

        .et-preloader-hide .header-wrapper .header-html_block4 {
            animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .6s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .5s forwards
        }
        .et-preloader-hide .header-wrapper .header-main-menu2.et_element-top-level {
            animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .7s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .6s forwards
        }
        .et-preloader-hide .header-wrapper .et_b-header-account.et_element-top-level {
            animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .8s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .7s forwards
        }
        .et-preloader-hide .header-wrapper .et_b-header-cart.et_element-top-level {
            animation: et_header_fade_up .4s cubic-bezier(.39,.57,.56,1) .9s forwards,et_header_fade .5s cubic-bezier(.39,.57,.56,1) .8s forwards
        }

        @keyframes et_header_fade_up {
            0% {
                transform: translateY(30px)
            }

            to {
                transform: translateY(0)
            }
        }

        @keyframes et_header_fade {
            0% {
                opacity: 0
            }

            to {
                opacity: 1
            }
        }

    </style>
<?php });

Kind Regards,
8theme team

#364687 Copied

Tagged: animation in woocommerce, best selling themes, effective web design, interactive woocommerce themes, website animations, website opening animations, woocommerce themes
Viewing 4 results - 1 through 4 (of 4 total)