为什么Stellar.js中的元素不移动？ [英] Why are the elements in Stellar.js not moving?

问题描述

我在标题中有3个圆圈，当通过stellar.js滚动时，假设它们以不同的速率下降;不幸的是，他们甚至不移动。他们都有位置属性（绝对）;
此外，我已经将 data-stellar-ratio 应用于approprate标签。为什么stellar.js不工作？更进一步，如何测试jQuery是否只是不是导频错误？

HTML

 < div id =companyInfo> 
< div class =circlefrontdata-stellar-ratio =1.2>< / div> 
< div class =circlemiddledata-stellar-ratio =1.8>< / div> 
< div class =circlereardata-stellar-ratio =3>< / div> 
< div class =infoWrapper> 
< h1>牵引，你不能没有卡车，我有一辆卡车< / h1> 
< p> Id abunum ta inte publicae adhui senterem praties tantiena quitas vis，factum destus。地点et al。 Ti。 Upionem，sil tala morbit ina，nique confendum tati et acepsen ihilin sula audactorips，fatur ia consign arisulos inatuis。< / p> 
< / div> 
< / div> 
  

CSS

< pre class =lang-css prettyprint-override> 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

 < script src =asset / js / libs / jquery.stellar.min.js>< / script& 
< script type =text / javascript> 
 
 $（function（）{
 $ .stellar（{
 horizo​​ntalScrolling：false，
 verticalOffset：0，
}）; 
 }）; 
< / script> 
  

资源
stellar.js
关于使用stellar.js的教程

解决方案

我刚刚保存了您的网站&发挥你的代码一切看起来不错，但我还是有一些问题。所以，我删除了所有的脚本标签&添加jquery&恒星演示&它工作正常。我发现只有一个错误，但我不知道这是这种行为的原因。在垂直偏移后有一个额外的逗号：0。

  $（function（）{
 $ .stellar（{
 horizo​​ntalScrolling：false，
 verticalOffset：0，/ *删除结束处的逗号* / 
}）; 
}）; 
  

以下是您的网站在zip文件夹下载&看看代码。

https://dl.dropbox.com/u/19982181/svs.zip

希望这会对您有所帮助。

I have 3 circles in the header that are suppose to fall at different rates when scrolled via stellar.js; unfortunatly, they dont even move. They all have position attributes(absolute); Moreover, I've applied thedata-stellar-ratio to the approprate tags. Why won't stellar.js work? Even further, how does one test for jQuery to know if it's just not pilot error?

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

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

<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

解决方案

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 & added jquery & stellar from stellar demo & it works fine. There is only one bug i found, but i dont know that is the reason for this behaviour. There is a extra comma after verticaloffset:0.

$(function(){
    $.stellar({
        horizontalScrolling: false,
        verticalOffset: 0, /* Remove this comma at the end */
    });
});

Below is your website in a zip folder download it & have a look at the code.

https://dl.dropbox.com/u/19982181/svs.zip

Hope this will help you.

这篇关于为什么Stellar.js中的元素不移动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！