Skrollr无法移动超过20个对象

时间：2016-01-09 16:03:21

标签： javascript jquery css skrollr

我正在使用skrollr开发一个页面，其中包含多个单词，当您向下滚动页面以词云结束时。使用的函数是不透明度，变换：旋转，变换translateX，translateY。 Skrollr版本是0.6.30。 它的工作非常好，我达到了20个字，另一个跟在第二十个字之后。这些最新的单词会移动但通常会停在预期路径的中间位置。这种情况主要发生在您高速滚动时。 上面你可以看到Word20和Word21无法正常工作的代码。

＆＃13;
＆＃13; 
.word5{
  font-weight: 400;
  font-size: 35px;
  line-height: 35px;
  text-align:center;
  word-wrap:break-word;
  white-space: nowrap;
}
.word4{
  font-weight: 400;
  font-size: 25px;
  text-align:center;
  word-wrap:break-word;
  white-space: nowrap;
}
.word3{
  font-weight: 300;
  font-size: 20px;
  text-align:center;
  word-wrap:break-word;
  white-space: nowrap;
}
＆＃13; 
<html>
  <body>
<p class="word5"
		data-100="opacity:0; transform:rotate(90deg) translateX(700px) translateY(200px)"
		data-500="opacity:1; transform:rotate(90deg) translateX(125px) translateY(-40px)"
		data-2000="opacity:0; transform:rotate(90deg) translateX(125px) translateY(-40px)">
		WORD1</p>
   <p class="word5"
		data-100="opacity:0; transform:rotate(0deg) translateX(500px) translateY(500px)"
		data-500="opacity:1; transform:rotate(0deg) translateX(175px) translateY(130px)"
		data-2000="opacity:0; transform:rotate(0deg) translateX(175px) translateY(130px)">
		WORD2</p>
   <p class="word5"
		data-100="opacity:0; transform:rotate(-90deg) translateX(20px) translateY(700px)"
		data-500="opacity:1; transform:rotate(-90deg) translateX(20px) translateY(345px)"
		data-2000="opacity:0; transform:rotate(-90deg) translateX(20px) translateY(345px)">
		WORD3</p>
   <p class="word5"
		data-100="opacity:0; transform:rotate(90deg) translateX(0px) translateY(800px)"
		data-500="opacity:1; transform:rotate(90deg) translateX(0px) translateY(190px)"
		data-2000="opacity:0; transform:rotate(90deg) translateX(0px) translateY(190px)">
		WORD4</p>
   <p class="word5"
		data-100="opacity:0; transform:rotate(0deg) translateX(-600px) translateY(400px)"
		data-500="opacity:1; transform:rotate(0deg) translateX(-55px) translateY(60px)"
		data-2000="opacity:0; transform:rotate(0deg) translateX(-55px) translateY(60px)">
		WORD5</p>
   <p class="word4"
		data-300="opacity:0; transform:rotate(0deg) translateX(900px) translateY(500px)"
		data-600="opacity:1; transform:rotate(0deg) translateX(490px) translateY(-30px)"
		data-2000="opacity:0; transform:rotate(0deg) translateX(490px) translateY(-30px)">
		WORD6</p>
    <p class="word4"
		data-300="opacity:0; transform:rotate(90deg) translateX(900px) translateY(-580px)"
		data-600="opacity:1; transform:rotate(90deg) translateX(10px) translateY(-580px)"
		data-2000="opacity:0; transform:rotate(90deg) translateX(10px) translateY(-580px)">
		WORD7</p>
	<p class="word4"
		data-300="opacity:0; transform:rotate(90deg) translateX(900px) translateY(-300px)"
		data-600="opacity:1; transform:rotate(90deg) translateX(95px) translateY(-300px)"
		data-2000="opacity:0; transform:rotate(90deg) translateX(95px) translateY(-300px)">
		WORD8</p>
	<p class="word4"
		data-300="opacity:0; transform:rotate(0deg) translateX(900px) translateY(500px)"
		data-600="opacity:1; transform:rotate(0deg) translateX(290px) translateY(60px)"
		data-2000="opacity:0; transform:rotate(0deg) translateX(290px) translateY(60px)">
		WORD9</p>
	<p class="word4"
		data-300="opacity:0; transform:rotate(-90deg) translateX(-800px) translateY(-300px)"
		data-600="opacity:1; transform:rotate(-90deg) translateX(50px) translateY(-20px)"
		data-2000="opacity:0; transform:rotate(-90deg) translateX(50px) translateY(-20px)">
		WORD10</p>
	<p class="word4"
		data-300="opacity:0; transform:rotate(0deg) translateX(-600px) translateY(180px)"
		data-600="opacity:1; transform:rotate(0deg) translateX(-50px) translateY(180px)"
		data-2000="opacity:0; transform:rotate(0deg) translateX(-50px) translateY(180px)">
		WORD11</p>
	<p class="word4"
		data-300="opacity:0; transform:rotate(0deg) translateX(-600px) translateY(-200px)"
		data-600="opacity:1; transform:rotate(0deg) translateX(-110px) translateY(-125px)"
		data-2000="opacity:0; transform:rotate(0deg) translateX(-110px) translateY(-125px)">
		WORD12</p>
	<p class="word4"
		data-300="opacity:0; transform:rotate(-90deg) translateX(-800px) translateY(-300px)"
		data-600="opacity:1; transform:rotate(-90deg) translateX(-215px) translateY(-125px)"
		data-2000="opacity:0; transform:rotate(-90deg) translateX(-215px) translateY(-125px)">
		WORD13</p>
	<p class="word4"
		data-300="opacity:0; transform:rotate(0deg) translateX(-800px) translateY(-100px)"
		data-600="opacity:1; transform:rotate(0deg) translateX(-110px) translateY(140px)"
		data-2000="opacity:0; transform:rotate(0deg) translateX(-110px) translateY(140px)">
		WORD14</p>
    <p class="word4"
		data-300="opacity:0; transform:rotate(0deg) translateX(900px) translateY(200px)"
		data-600="opacity:1; transform:rotate(0deg) translateX(490px) translateY(75px)"
		data-2000="opacity:0; transform:rotate(0deg) translateX(490px) translateY(75px)">
		WORD15</p>
	<p class="word4"
		data-300="opacity:0; transform:rotate(0deg) translateX(-800px) translateY(100px)"
		data-600="opacity:1; transform:rotate(0deg) translateX(-185px) translateY(-30px)"
		data-2000="opacity:0; transform:rotate(0deg) translateX(-185px) translateY(-30px)">
		WORD16</p>
	<p class="word4"
		data-300="opacity:0; transform:rotate(-90deg) translateX(-800px) translateY(800px)"
		data-600="opacity:1; transform:rotate(-90deg) translateX(-145px) translateY(445px)"
		data-2000="opacity:0; transform:rotate(-90deg) translateX(-145px) translateY(445px)">
		WORD17</p>
		<p class="word4"
		data-300="opacity:0; transform:rotate(0deg) translateX(900px) translateY(200px)"
		data-600="opacity:1; transform:rotate(0deg) translateX(335px) translateY(105px)"
		data-2000="opacity:0; transform:rotate(0deg) translateX(335px) translateY(105px)">
		WORD18</p>
	<p class="word4"
		data-300="opacity:0; transform:rotate(0deg) translateX(400px) translateY(600px)"
		data-600="opacity:1; transform:rotate(0deg) translateX(335px) translateY(85px)"
		data-2000="opacity:0; transform:rotate(0deg) translateX(335px) translateY(85px)">
		WORD19</p>
    <p class="word4"
		data-400="opacity:0; transform:rotate(90deg) translateX(900px) translateY(-580px)"
		data-700="opacity:1; transform:rotate(90deg) translateX(155px) translateY(-455x)"
		data-2000="opacity:0; transform:rotate(90deg) translateX(155px) translateY(-455px)">
		WORD20</p>
	<p class="word3"
		data-400="opacity:0; transform:rotate(0deg) translateX(-900px) translateY(-580px)"
		data-700="opacity:1; transform:rotate(0deg) translateX(0px) translateY(0x)"
		data-2000="opacity:0; transform:rotate(0deg) translateX(0px) translateY(0px)">
		WORD21</p>
 </body>
   <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
   <script src="js/bootstrap.min.js" type="text/javascript"></script>
   <script src="js/skrollr.min.js" type="text/javascript"></script>
   <script type="text/javascript">
       skrollr.init({
			smoothScrolling: false,
			mobileDeceleration: 0.004
	   });
   </script>
</html>
＆＃13;
＆＃13;
＆＃13;

有谁知道这是skroll还是javascript的一种限制？或者有人知道达到同类输出的方法吗？ 非常感谢你。

1 个答案:

答案 0 :(得分：0)

我发现了什么问题。我写了＃34; x＆＃34;而不是＆＃34; px＆＃34;并且通过一些复制和粘贴，我复制了错误，使浏览器无法轻松解释移动坐标。一个非常愚蠢的错误。

相关问题
最新问题