Помогите интегрировать CSS-анимацию в заголовок.

Alonso2

Пользователь
Регистрация
24.04.13
Сообщения
1
Реакции
0
Баллы
1
Привет,
У меня есть CSS-анимация, которую я хотел бы отобразить в заголовке WordPress; однако, когда я его интегрирую, он не будет выполнять анимацию, а просто останется неподвижным. Первый код — это моя попытка интегрировать CSS-анимацию в заголовок WordPress, второй код — это рабочая CSS-анимация.


Помогите интегрировать CSS-анимацию в заголовок.

Код:
<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>

Код (разметка):
<?php 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="ширина = ширина устройства, начальный масштаб = 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 -->
Код (разметка):
 
Сверху Снизу