我使用CSS-tricks的这种滑入效果。它部分使用可见插件,动画通过CSS完成。
http://css-tricks.com/slide-in-as-you-scroll-down-boxes/
当CSS在样式标记内加载页面时它起作用,但是当我从外部样式表加载它时它不会。我已经检查过样式表正在加载,它是。我想在外部加载它以将我的CSS保存在一个文件中。我已尝试在HTML和wordpress中使用它,但得到相同的结果。我使用HTML5重置文件。谢谢,蒂姆。
我在样式标记中尝试使用@import url("slidein.css");
但是没有用。
在Wordpress中,我将javascript加载到外部文件中,即
<script src="<?php echo get_template_directory_uri(); ?>/js/index.js"></script>
HTML中的:
<script src="js/index.js"></script>
Wordpress中的CSS:
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/slidein.css" />
和HTML:
<link rel="stylesheet" type="text/css "href="assets/css/slidein.css" />
index.js中的javascript:
$.fn.offScreen = function(distance){
var $t = $(this),
$w = $(window),
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top - distance,
_bottom = $t.offset().top + $t.height() + distance;
return {
top: _bottom <= viewTop,
bottom: _top >= viewBottom
}
};
var win = $(window);
var allMods = $(".module");
allMods.each(function(i, el) {
var el = $(el);
if (!el.offScreen(150).bottom) {
el.addClass("already-visible");
}
});
win.on("scroll resize",function(event)
{
allMods.each(function(i, el) {
var el = $(el);
if (!el.offScreen(150).top && !el.offScreen(150).bottom)
{
el.removeClass("already-visible off-screen-top off-screen-bottom");
el.addClass("come-in");
}
else
{
if(el.offScreen(150).top)
{
el.addClass("off-screen-top");
}
else
{
el.addClass("off-screen-bottom");
}
}
});//allMods.each()
});//win.scroll()
win.trigger("scroll");
CSS:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
section {
background: #eee;
max-width: 600px;
margin: 0 auto;
padding: 20px;
overflow: hidden;
}
.module {
width: 48%;
min-height: 200px;
background: white;
position: relative;
float: left;
padding: 20px;
margin-right: 4%;
margin-bottom: 4%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transform-origin: center center;
}
.module:nth-child(even) {
margin-right: 0;
}
.module.off-screen-top {
transform: translateY(-150px);
}
.module.off-screen-bottom {
transform: translateY(150px);
}
body {
background: url(http://s.cdpn.io/3/blurry-blue.jpg);
background-size: cover;
padding: 30px;
}
.come-in {
transform: translateY(0);
transition: transform 0.8s ease-out;
}
.come-in:nth-child(odd) {
transition-duration: 0.5s;
}
.already-visible {
transform: translateY(0);
transition: none;
}
@keyframes come-in {
to {
transform: translateY(0);
}
}
答案 0 :(得分:0)
在WordPress中,您应该使用wp_enqueue_style()
将外部样式表排入队列,并确保挂钩wp_enqueue_scripts
。例如:
function my_enqueue_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
参考:http://codex.wordpress.org/Function_Reference/wp_enqueue_style