Бесконечная прокрутка с Tweenmax - как мне остановить перенос? - PullRequest
Новая
       61

Бесконечная прокрутка с Tweenmax - как мне остановить перенос?

0 голосов
/ 06 февраля 2020

Я (наконец-то) выполнил построение некоторого кода, который предназначен для непрерывной прокрутки по баннеру - бесконечно.

Это достигается путем непрерывного клонирования списков и добавления их в конец последнего списка. .

Как уже упоминалось, это работает по большей части, но я не могу понять, как ОСТАНОВИТЬ это от переноса, или, что более важно, остановить перенос, когда изменяется veiwport.

I Я почти уверен, что моя $ listwidth является проблемой, но я борюсь с тем, как сделать этот динамический c или гибким во время работы.

Кроме того, сейчас он работает очень быстро, так что вы можете видеть завертывание. Вы можете замедлить его с помощью var time = (100 - это хорошо), чтобы замедлить его и посмотреть, как он «должен» выглядеть перед переносом.

Любые идеи, документы или рекомендации очень ценятся. Заранее спасибо. 

jQuery(function($){
  /* ==================================
	SCROLLING LETTER TICKER  
	=================================== */
	$(".tickerwrapper").addClass("show-this");		
	$(".tickerwrapper").each(function(ix, ex){
		var $tickerWrapper = $(ex);
		var $list = $tickerWrapper.find("ul.list");
		var $clonedList = $list.clone();
		var listWidth = 100;

		$list.find("li").each(function (i) {
			listWidth += $(this, i).outerWidth(true);
		});
		var endPos = $tickerWrapper.width() - listWidth;
		$list.add($clonedList).css({
			"width" : listWidth + "px"
		});
		$clonedList.addClass("cloned").appendTo($tickerWrapper);

		//TimelineMax
		var infinite = new TimelineMax({repeat: -1, paused: true});
		// Adjust this to slow down the list
    var time = 1;

		infinite
			.fromTo($list, time, {rotation:0.01,x:0}, {force3D:true, x: -listWidth, ease: Linear.easeNone}, 0)
			.fromTo($clonedList, time, {rotation:0.01, x:listWidth}, {force3D:true, x:0, ease: Linear.easeNone}, 0)
			.to($clonedList, time, {force3D:true, rotation:0.01, x: -listWidth, ease: Linear.easeNone}, time)
			.to($list, time, {force3D:true, rotation:0.01, x: 0, ease: Linear.easeNone}, time)
			.progress(1).progress(0)
			.play();
	});
});
.scroller-wrap {
  position: absolute;
  z-index:10;
  top: 10%;
}
/* MARQUEE TICKER */
  .show-this {
    display: block !important;
  }
  .tickerwrapper {
    /* the outer div */
    position: relative;
    top: 10%;
    left: 0%;
    width: 100%;
    height: 42px; /* must match text */
    /*  overflow: hidden;*/
    cursor: pointer;
    opacity: 1.0;
    display: none;
  }
  .tickerwrapper ul.list {
    position: relative;
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
  }
  .tickerwrapper ul.list.cloned {
    position: absolute;
    top: 0px;
    left: 0px;
  }
  .tickerwrapper ul.list li {
    float: left;
    padding-left: 20px;
    font-size: 42px !important;
    color: #e51313;
    text-transform: uppercase !important;
  }
  .tickerwrapper ul.list li span {
    font-size: 42px !important;
    text-transform: uppercase !important;
    color: #e51313;
  }
  .tickerwrapper li {
    -webkit-text-fill-color: #0000;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: currentColor;
  }
  .tickerwrapper span.solid {
    -webkit-text-fill-color: #e51313;
    -webkit-text-stroke-width: 0;
    font-weight: 700;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroller-wrap ">
  <div class="tickerwrapper">
    <ul class="list">
      <li>The First Outlined List of Text</li>
      <li><span class="solid">The Second Outlined List of Text</span></li>
    </ul>
  </div>
</div>
...