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

Alonso2

Привет, У меня есть CSS-анимация, которую я хотел бы отобразить в заголовке WordPress; однако, когда я его интегрирую, он не будет выполнять анимацию, а просто останется неподвижным.

Первый код — это моя попытка интегрировать CSS-анимацию в заголовок WordPress, второй код — это рабочая 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 /* * 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="ширина = ширина устройства, начальный масштаб = 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 -->

Код (разметка):

jwahc

Вся разметка в беспорядке: за пределами первого закрывающего заголовка есть мета, затем еще один закрывающий заголовок, затем два тега тела, а затем какие-то случайные вещи с навигацией, которые вы не закрываете.

Я удивлен, что он вообще работает, не говоря уже об анимации. Вам нужно удалить код, который вы добавили в свой шаблон, и начать заново.

Не добавляйте теги куда угодно, например, тег body должен быть:

  <?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: сделайте это, вместо того, чтобы просто добавлять еще один тег body и ожидать, что он сработает.

Похожие темы	Дата
Как новичку создать дизайн сайта?	19.10.2024, 18:10
Динамическая шапка сайта	19.10.2024, 18:10
Как сделать Wordpress.org более социальным (например, tumblr).	19.10.2024, 18:10
Помните MyBlogLog? Есть альтернатива?	19.10.2024, 18:10
Предложите мне тему WordPress - Футбол	19.10.2024, 18:10
В приложении Laravel 5.7 выполните проверку с помощью редактора tinyMCE.	19.10.2024, 18:10
Лучшая платформа веб-сайта для аналитики, а не плагинов	19.10.2024, 18:10
Структура URL-адреса	19.10.2024, 18:10
ограничить количество сообщений на странице	19.10.2024, 18:10
Почему расстояние между ссылкой и сеткой изображений уменьшается при любом щелчке мыши?	19.10.2024, 18:10

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

Alonso2

jwahc

I AM

Интересно