Help integrating css animation onto header

usermaster Well-Known Member

Messages:: 345

Likes Received:: 4

Best Answers:: 0

Trophy Points:: 128

#1

Hi,
I have a css animation that I would like to have displayed on my WordPress header; however, when I do integrate it, it wont do the animation, it will just stay still. The first code is my attempt at integrating the css animation into my WordPress header, the second code is the working css animation.

<?php
    /*
     * The Header theme template.
     *
     * @package WordPress
     * @subpackage HappyKids
     * @since HappyKids v.3.0
     */

    global $post;
    global $is_IE;

    $gen_sets = theme_get_option('general', 'gen_sets');
    $menu_merged = isset($gen_sets['_menu_type']) ? $gen_sets['_menu_type'] : '';
    $toggle_sidebar = isset($gen_sets['toggle-area']) ? $gen_sets['toggle-area'] : '';
    $show_top_panel = false;
    $_mobile_menu = $gen_sets['_mobile_menu'] == true ? 'touch_detect_on' : 'touch_detect_of';


?>

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="<?php echo $_mobile_menu; ?>">
    <head>

        <link rel="stylesheet" type="text/css" href="/wp-content/themes/happykids/assets/css/style.css">
    <link rel="stylesheet" type="text/css" href="/wp-content/themes/happykids/assets/css/grass.css">



<script type="text/javascript" src="/wp-content/themes/happykids/Javascript/jquery-1.7.2.min.js"></script>
<script src="/wp-content/themes/happykids/assets/js/device.min.js"></script>


<script src="/wp-content/themes/happykids/assets/js/hoverIntent.js"></script>
<script src="/wp-content/themes/happykids/assets/js/jquery.parallax.js"></script>
<script src="/wp-content/themes/happykids/assets/js/main3af6.js?dt=05/15/2017"></script>
<!-- end script -->

<!-- DMS:MAST:Homepage -->
</head>

        <meta charset="<?php bloginfo( 'charset' ); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <?php

        show_favicon();
        put_ganalytics_code();
        if ( is_singular() ) wp_enqueue_script( 'comment-reply' );
        wp_head();
    ?>
    </head>
        <?php if ( is_front_page() || is_home() ) : ?>
            <body <?php body_class( array('kids-front-page', show_skin()) ); ?>>
        <?php else : ?>
            <body <?php body_class( array('secondary-page', show_skin()) ); ?>>
        <?php endif; ?>

        <?php if ( function_exists('dynamic_sidebar') && is_active_sidebar($toggle_sidebar)){ ?>
            <!-- HEADER BEGIN -->



            <div class="top-panel">


                <div class="l-page-width clearfix">


                <div class="wrapper">       
                        <?php
                            dynamic_sidebar($toggle_sidebar);
                            $show_top_panel = true;
                         ?>
                    </div>
                </div>
            </div><!--/ .top-panel-->                       
        <?php } ?>

           
        <div class="kids-bg-level-1">


            <div class="bg-level-1"></div>
           
            <header id="kids_header">


    <header>
<body  class="withAnimation">
    
    <!-- header -->
    
<div class="parallax-viewport" id="parallax">
    <!-- parallax layers -->
    <div class="parallax-layer cloud1">
        <img src="/wp-content/themes/happykids/assets/images/cloud3.png" alt=""/>
    </div>
    <div class="parallax-layer cloud2">
        <img src="/wp-content/themes/happykids/assets/images/cloud2.png" alt=""/>
    </div>
    <div class="parallax-layer cloud3">
        <img src="/wp-content/themes/happykids/assets/images/cloud2.png" alt=""/>
    </div>
    <div class="parallax-layer cloud4">
        <img src="/wp-content/themes/happykids/assets/images/cloud1.png" alt=""/>
    </div>
    <div class="parallax-layer cloud5">
        <img src="/wp-content/themes/happykids/assets/images/cloud1.png" alt=""/>
    </div>
    <div class="parallax-layer cloud6">
        <img src="/wp-content/themes/happykids/assets/images/cloud1.png" alt=""/>   
        </div>

</div>
<nav class="navbar navbar-default yamm" role="navigation">
        <div class="container">
            <div class="sun rotate">
                <img src="/wp-content/themes/happykids/assets/images/sun.png" alt="">
            </div>
</header>           
  


                <div class="l-page-width clearfix">

                    <ul class="kids_social">
                        <?php
                            if ($show_top_panel) { echo ('<li class="openbtn"><a href="#"></a></li>'); }
                            
                             if ( cws_is_wpml_active()){
                            echo "<li class='lang_bar'>";
                                do_action('icl_language_selector');
                            echo "</li>";
                             }
                             show_social();
                            show_search_bar(); ?>
                    </ul><!-- .kids_social -->
                    <div class="kids_clear"></div>

                    <?php show_logo(); ?>

                    <nav id="kids_main_nav" <?php if($menu_merged) echo('class="merged" '); position_menu(); ?> >
                        <div class="menu-button">
                            <span class="menu-button-line"></span>
                            <span class="menu-button-line"></span>
                            <span class="menu-button-line"></span>
                        </div>
<?php
                            $menu_locations = get_nav_menu_locations();
                             if (isset($menu_locations['primary-menu']) ){
                                wp_nav_menu( array(
                                    'after'  => '',
                                    'before'  => '',
                                    'theme_location'  => 'primary-menu',
                                    'container'       => '',
                                    'menu_class'      => '',
                                    'menu_id'         => 'menu-main',
                                    'items_wrap'      => '<ul id="%1$s" class="clearfix flexnav %2$s" data-breakpoint="800"'.position_menu_ul_fix().'>%3$s</ul>'
                                ) );
                            } else {
                                echo '<h6 style="color:red;background-color:#fff;padding:10px;font-size:18px;margin: -6px 0 0;">Please assign the main menu: Appearance -> Menus -> Manage Locations</h6>';
                            }
?>

                    </nav><!-- #kids_main_nav -->

                </div><!--/ .l-page-width-->

            </header><!--/ #kids_header-->
                           
    <!-- HEADER END -->

Code (markup):


<head>

    <link rel="stylesheet" type="text/css" href="admin/code/assets/css/style.css">
    <link rel="stylesheet" type="text/css" href="admin/code/assets/css/grass.css">



<script type="text/javascript" src="admin/code/Javascript/jquery-1.7.2.min.js"></script>
<script src="admin/code/assets/js/device.min.js"></script>



   



<!-- DMS:MAST:Homepage -->

</head>

<header>

<body  class="withAnimation">



    
     <!-- header -->
    
<div class="parallax-viewport" id="parallax">
    <!-- parallax layers -->
    <div class="parallax-layer cloud1">
        <img src="admin/code/assets/images/cloud3.png" alt=""/>
    </div>
    <div class="parallax-layer cloud2">
        <img src="admin/code/assets/images/cloud2.png" alt=""/>
    </div>
    <div class="parallax-layer cloud3">
        <img src="admin/code/assets/images/cloud2.png" alt=""/>
    </div>
    <div class="parallax-layer cloud4">
        <img src="admin/code/assets/images/cloud1.png" alt=""/>
    </div>
    <div class="parallax-layer cloud5">
        <img src="admin/code/assets/images/cloud1.png" alt=""/>
    </div>
    <div class="parallax-layer cloud6">
        <img src="admin/code/assets/images/cloud1.png" alt=""/>
    </div>
</div>


    <nav class="navbar navbar-default yamm" role="navigation">
        <div class="container">
            <div class="sun rotate">
                <img src="admin/code/assets/images/sun.png" alt="">
            </div>
           

<script src="admin/code/assets/js/hoverIntent.js"></script>
<script src="admin/code/assets/js/jquery.parallax.js"></script>
<script src="admin/code/assets/js/main3af6.js?dt=05/15/2017"></script>
<!-- end script -->
  </div></header>
</body>

</html>

Code (markup):

usermaster, May 16, 2017 IP

PoPSiCLe Illustrious Member

Messages:: 4,623

Likes Received:: 725

Best Answers:: 152

Trophy Points:: 470

#2

First off, you gave two <body>, which obviously won't work...

PoPSiCLe, May 17, 2017 IP

GameO.Over Active Member

Messages:: 45

Likes Received:: 7

Best Answers:: 1

Trophy Points:: 65

#3

All of the markup is a mess, you have meta outside of the first closing head, then another closing head, then two body tags, then some random stuff with a nav that you don't close. I'm surprised its working at all nevermind the animation.

You need to remove the code you have added to your template and start again.. Don't just add tags in anywhere, for example the body tag should be :
        <?php if ( is_front_page() || is_home() ) : ?>
            <body <?php body_class( array('withAnimation', 'kids-front-page', show_skin()) ); ?>>
        <?php else : ?>
            <body <?php body_class( array('withAnimation', 'secondary-page', show_skin()) ); ?>>
        <?php endif; ?>
PHP:
Do this, instead of just adding another body tag and expecting it to work.

GameO.Over, May 17, 2017 IP

Rokis Member

Messages:: 60

Likes Received:: 14

Best Answers:: 0

Trophy Points:: 45

#4

Just another wordpress website

Rokis, May 20, 2017 IP

GameO.Over likes this.

Log in or Sign up

Advertising (learn more)

Help integrating css animation onto header

usermaster Well-Known Member

PoPSiCLe Illustrious Member

GameO.Over Active Member

Rokis Member

Log in or Sign up

Advertising (learn more)

Help integrating css animation onto header

usermaster Well-Known Member

PoPSiCLe Illustrious Member

GameO.Over Active Member

Rokis Member

Useful Searches