Skrollr не может переместить более 20 объектов

Я разрабатываю с помощью skrollr страницу с несколькими словами, которые появляются, когда вы прокручиваете страницу вниз, заканчивая облаком слов. Используемые функции: непрозрачность, преобразование: поворот, преобразование, перевод X, перевод Y. Версия Skrollr 0.6.30. Это работает довольно хорошо, пока я не достиг 20-го слова и другого, следующего за этим двадцатым. Эти последние слова движутся, но часто останавливаются на середине ожидаемого пути. В основном это происходит, когда вы прокручиваете на высокой скорости. Выше вы можете увидеть код, в котором Word20 и Word21 работают неправильно.

.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;
}
<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>

Кто-нибудь знает, является ли это своего рода ограничением скролла или javascript? ИЛИ кто-то знает способ добиться такого же результата? Большое тебе спасибо.


javascript jquery css skrollr
person simwhite    schedule 09.01.2016    source источник
comment
Я обнаружил, что слова после 25-го снова работают правильно. Выглядит очень странно...   -  person simwhite    schedule 10.01.2016

Ответы (1)


arrow_upward
0
arrow_downward

Я узнал, что было не так. Я написал «x» вместо «px» и с помощью копирования и вставки воспроизвел ошибки, из-за которых браузер не мог легко интерпретировать координаты движения. Очень глупая ошибка.

person simwhite    schedule 10.01.2016