JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<div id="canvas-mask" class="dragdealer">
	<ul class="handle">
		<li>КИНОТЕАТР</li>
		<li>ЦЕНТР РАЗВЛЕЧЕНИЙ</li>
		<li>СЕРЕБРЯНЫЙ ПАРК</li>
		<li>МУЗЕЙ ЗАНИМАТЕЛЬНЫХ НАУК IQ</li>
		<li>ПАРК АТТРАКЦИОНОВ</li>
		<li>SKY PARK</li>
		<li>ДЕТСКИЙ ЦЕНТР FUZZY FUN</li>
		<li>АФИША СОБЫТИЙ</li>
		<li>ПРОЕКТ "КРЫША"</li>
		<li>ZETABLAST</li>
		<li>АТРИУМ</li>
	</ul>
</div>

CSS

#canvas-mask {
  width: 400px;
  height: 30px;
  overflow: hidden;
}

.handle {
	line-height: 30px;
	white-space: nowrap;
	position: relative;
	font-size: 0;
}

.handle li {
	display: inline-block;
	vertical-align: top;
	font-size: 14px;
}

JavaScript

var widthListPr = 0;

$('.handle li').each(function() {
  widthListPr = widthListPr + $(this).width();
  $('.handle').width(widthListPr);
});

var canvasMask = new Dragdealer('canvas-mask', {
  x: 0,
  y: 1,
  vertical: true,
  speed: 0.2,
  loose: false,
  requestAnimationFrame: false
});