jQuery

【jQuery】右から左にテキストが流れるレスポンシブのシンプルなMarquee

September 11, 2016
Marquee

Marqueeは右から左にテキストが流れ、ホバーするとホバーすると動きが一時停止するシンプルなマーキー。テキストの位置はレスポンシブ対応なのでウィンドウサイズで変更。

JS

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="jquery.marquee.js"></script>

CSS

	.marqArea{
	  cursor: all-scroll;
	  color:white;
	  background:#333;
	  width: 100%;
	  height: 50px;
	  overflow: hidden;
	  white-space: nowrap;
	}
	.dragSpan{
	  line-height: 50px;
	  height: 50px;
	  left: 100%;
	  position: relative;
	}

HTML

<div class="marqArea">
  <div class="dragSpan" ><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ea laboriosam molestiae corrupti eligendi sed error dolore consequuntur maxime saepe. Nam corrupti velit autem incidunt, aut atque mollitia ipsa obcaecati.</span></div>
</div>
<script>
$('.marqArea').marquee();
</script>