Skrollr 淡入淡出文本不起作用,但所有其他 skrollr 元素都可以工作
Skrollr fading text won't work but all other skrollr elements work
在我的网站上的某些元素上使用skrollr时遇到一些问题。它适用于背景,但我正在尝试淡入和淡出带有文本的div,但它不起作用......我一定做错了什么,所以我创建了一个 jsfiddle 来显示问题。希望有人知道我做错了什么。
网页代码
<div class="container" id="test">
<div class="section"></div>
</div>
<div class="container" id="info">
<div class="section-wrapper">
<div class="row section" data-center="background-position: 0 50%;" data-bottom-top="background-position: 0px 40%;" data-anchor-target="#info">
<div id="info-wrapper" class="col-md-6 col-md-offset-5" data-center="opacity: 1" data-bottom-top="opacity: 1;" data-anchor-target="info-wrapper">
<h2>Test</h2>
<p>This text isn't fading in or out... What is wrong?</p>
</div>
</div>
</div>
</div>
.CSS
html {
overflow-y: scroll;
}
.navbar {
opacity:0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */
}
#top-nav .active {
border-bottom: 3px #643b8d solid;
}
.section {
/*margin-top: -50px;*/
padding-top: 50px;
margin: 10px 0;
}
#test .section {
background:url(http://ihatetomatoes.net/demos/parallax-scroll-effect/img/bcg_slide-5.jpg) no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 750px;
width: 100%;
position: relative;
}
#info .section {
background:url(http://ihatetomatoes.net/demos/parallax-scroll-effect/img/bcg_slide-5b.jpg) no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 750px;
width: 100%;
position: relative;
}
#info-wrapper {
background-color: rgba(255,255,255,0.75);
opacity: 0;
}
这里的例子
谢谢
未捕获的异常:找不到定位点目标"信息包装器"
这data-anchor-target="#info-wrapper"
不是data-anchor-target="info-wrapper"
.除此之外,两个关键帧都定义了opacity:1
.
已更正:http://jsfiddle.net/ak7Bg/1/
相关文章:
- 如何添加浮动和非浮动,其他
- 与其他库的jQuery.noConflict()
- 播放当前视频时如何停止其他视频?JavaScript
- 剑道UI内联编辑:如何在点击其他按钮时隐藏按钮
- 制作一个不带HTML a标记但在动画播放完毕后指向其他页面的超链接
- 除修剪外的其他功能
- 是什么让一个“;Uncaught RangeError:超过了最大调用堆栈大小“;错误(Chrome,在其他浏览器中显示
- Array.length似乎不起作用;console.log则显示其他情况
- 如何消除代码中的未定义和其他问题
- 如何覆盖锚点元素's href目标,并在我点击转到目标javascript时删除其他错误
- jquery代码在Mozilla中有效,但在其他浏览器上无效
- 为什么不推荐使用“with”?是否有更好或其他方法可以“下降”到对象的命名空间
- Jquery未定义函数正在停止其他操作
- 如何将我的javascript库公开给其他客户端使用
- Javascript阻止其他Javascript代码
- chart.series[id].remove()无法刷新高位图表/高位股票中其他系列的图例属性
- 如何“;过滤器”;或者以其他方式重构该数据
- java脚本在Chrome和其他浏览器中对LocaleTimeString的不同行为
- jQuery:暂停按钮可以暂停所有其他操作
- Skrollr 淡入淡出文本不起作用,但所有其他 skrollr 元素都可以工作