[英]Why are the elements in Stellar.js not moving?
I have 3 circles in the header that are suppose to fall at different rates when scrolled via stellar.js;我在标题中有 3 个圆圈,当通过 stellar.js 滚动时,它们会以不同的速率下降; unfortunatly, they dont even move.
不幸的是,他们甚至不动。 They all have position attributes(absolute);
它们都有位置属性(绝对); Moreover, I've applied the
data-stellar-ratio
to the approprate tags.此外,我已将
data-stellar-ratio
应用于适当的标签。 Why won't stellar.js work?为什么 stellar.js 不起作用? Even further, how does one test for jQuery to know if it's just not pilot error?
更进一步,如何测试 jQuery 以确定它是否只是飞行员错误?
HTML HTML
<div id="companyInfo" >
<div class="circlefront" data-stellar-ratio="1.2"></div>
<div class="circlemiddle" data-stellar-ratio="1.8"></div>
<div class="circlerear" data-stellar-ratio="3"></div>
<div class="infoWrapper">
<h1>Towing, you can't do it without a truck, i have a truck</h1>
<p>Id abunum ta inte publicae adhui senterem praties tantiena quitas vis, factum destus. Loca vehebus; et? Ti. Upionem, sil tala morbit ina, nique confendum tati et acepsen ihilin sula audactorips, fatur ia consign arisulos inatuis.</p>
</div>
</div>
CSS CSS
section#company div#companyInfo {
height: 24em;
line-height: 3em;
margin: 0 auto;
color: #fff;
}
section#company div#companyInfo div.infoWrapper {
width: 960px;
margin: 5em auto;
text-align: center;
}
section#company div#companyInfo div.infoWrapper h1 {
font-size: 2em;
}
section#company div#companyInfo div.infoWrapper p {
line-height: 1.2em;
font-size: 1.125em;
}
section#company .circlefront {
background: rgba(255, 255, 255, 0.7);
width: 500px;
height: 500px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
position: absolute;
top: 300px;
left: 400px;
}
section#company .circlemiddle {
background: rgba(255, 255, 255, 0.5);
width: 250px;
height: 250px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
position: absolute;
top: 100px;
left: 200px;
}
section#company .circlerear {
background: rgba(255, 255, 255, 0.3);
width: 100px;
height: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
position: absolute;
top: 350px;
right: 100px;
}
jQuery jQuery
<script src="asset/js/libs/jquery.stellar.min.js"></script>
<script type="text/javascript">
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 0,
});
});
</script>
resources stellar.js tutorial on using stellar.js资源stellar.js 使用 stellar.js 教程
I just saved your website & played around your code.我刚刚保存了您的网站并播放了您的代码。 Everything looks fine to me but still there is some problem.
对我来说一切都很好,但仍然存在一些问题。 So, I removed all your script tags and added jQuery & Stellar from Stellar demo and it works fine.
所以,我删除了你所有的脚本标签,并从 Stellar 演示中添加了 jQuery 和 Stellar,它工作正常。
There is only one bug I found, but I don't know that is the reason for this behaviour.我只发现了一个错误,但我不知道这是这种行为的原因。 There is a extra comma after
verticaloffset:0
. verticaloffset:0
之后有一个额外的逗号。
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 0, /* Remove this comma at the end */
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.