Wow.js WordPress 在页面加载时加载一些动画,而另一些根本不加载
Wow.js on WordPress loading some animations on page load and others not at all
我正在尝试在 my WordPress site 上使用 wow.js,并且我浏览了一些关于类似问题的论坛,但我似乎无法让它工作。我相信顶部的图标站点正在加载页面加载而不是滚动并在页面上进一步向下(在绿色带下)我有一个 h2 在向下滚动到它时根本不会加载。 (添加了动画 class,但元素被隐藏并且没有动画发生)。
我的html:
<h1 class="wow animated fadeInRight left">A website must perform many
functions.</h1>
在functions.php
function sk_enqueue_scripts() {
wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/js/animate.css' );
wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.js', array(), '', true );
}
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
//* Enqueue script to activate WOW.js
function sk_wow_init_in_footer() {
add_action( 'print_footer_scripts', 'wow_init' );
}
add_action('wp_enqueue_scripts', 'sk_wow_init_in_footer');
//* Add JavaScript before </body>
function wow_init() { ?>
<script type="text/javascript">
new WOW().init();
</script>
<?php }
add_action('wp_head', 'wow_init');
提前致谢!
你有一个错误:
Uncaught ReferenceError: WOW is not defined
...因为您在页脚中排队 wow.js,并试图在头部使用 WOW
。
搜索了一段时间..尝试不同的建议。终于按照本教程开始工作了。
http://www.jeremycookson.com/how-to-add-scrolling-animations-in-wordpress/
这是我在函数文件中替换的代码。
//* Enqueue Scripts
function sk_enqueue_scripts() {
wp_enqueue_script( 'myscripts', get_stylesheet_directory_uri() . '/js/scripts.js', array(), '', true );
wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.js', array(), '', true );
wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/js/animate.css');
}
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
//* Enqueue script to activate WOW.js
function sk_wow_init_in_footer() {
add_action( 'print_footer_scripts', 'wow_init' );
}
add_action('wp_enqueue_scripts', 'sk_wow_init_in_footer');
//* Initial Wow before body </body>
function wow_init() { ?>
<script type="text/javascript">
new WOW().init();
</script>
<?php }
除了我将 scripts.js 文件也移入队列之外,我不确定发生了什么变化,而之前我是在 footer.php
中手动加载它
*****更新我还注意到删除
html,body{height:100%;}
在 WOW 中确定动画何时出现可能有所不同。**
我正在尝试在 my WordPress site 上使用 wow.js,并且我浏览了一些关于类似问题的论坛,但我似乎无法让它工作。我相信顶部的图标站点正在加载页面加载而不是滚动并在页面上进一步向下(在绿色带下)我有一个 h2 在向下滚动到它时根本不会加载。 (添加了动画 class,但元素被隐藏并且没有动画发生)。
我的html:
<h1 class="wow animated fadeInRight left">A website must perform many
functions.</h1>
在functions.php
function sk_enqueue_scripts() {
wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/js/animate.css' );
wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.js', array(), '', true );
}
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
//* Enqueue script to activate WOW.js
function sk_wow_init_in_footer() {
add_action( 'print_footer_scripts', 'wow_init' );
}
add_action('wp_enqueue_scripts', 'sk_wow_init_in_footer');
//* Add JavaScript before </body>
function wow_init() { ?>
<script type="text/javascript">
new WOW().init();
</script>
<?php }
add_action('wp_head', 'wow_init');
提前致谢!
你有一个错误:
Uncaught ReferenceError: WOW is not defined
...因为您在页脚中排队 wow.js,并试图在头部使用 WOW
。
搜索了一段时间..尝试不同的建议。终于按照本教程开始工作了。
http://www.jeremycookson.com/how-to-add-scrolling-animations-in-wordpress/
这是我在函数文件中替换的代码。
//* Enqueue Scripts
function sk_enqueue_scripts() {
wp_enqueue_script( 'myscripts', get_stylesheet_directory_uri() . '/js/scripts.js', array(), '', true );
wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.js', array(), '', true );
wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/js/animate.css');
}
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
//* Enqueue script to activate WOW.js
function sk_wow_init_in_footer() {
add_action( 'print_footer_scripts', 'wow_init' );
}
add_action('wp_enqueue_scripts', 'sk_wow_init_in_footer');
//* Initial Wow before body </body>
function wow_init() { ?>
<script type="text/javascript">
new WOW().init();
</script>
<?php }
除了我将 scripts.js 文件也移入队列之外,我不确定发生了什么变化,而之前我是在 footer.php
中手动加载它*****更新我还注意到删除
html,body{height:100%;}
在 WOW 中确定动画何时出现可能有所不同。**