liMarquee / Template
№ 7

RESULT

CODE

<!--///// If you have already use jquery, then this line is not necessary /////-->

    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>


<!--///// Google Font for Text of Marquee  /////-->

    <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>


<!--///// Plugins files /////-->

    <link rel="stylesheet" href="css/liMarquee.css">
    <script src="js/jquery.liMarquee.js"></script>


<!--///// Initialization /////-->

	<script>
	$(window).on('load',function(){
		<!--///// Initialization of plugin  /////-->
		var strMain = $('.strMain');
		strMain.liMarquee();
		
		<!--///// Initialization of Buttons  /////-->
		$('.strPause').on('click',function(){
			strMain.liMarquee('stop');
			$('.strPause, .strPlay').toggle();
		})
		$('.strPlay').on('click',function(){
			strMain.liMarquee('start');
			$('.strPause, .strPlay').toggle();
		})
	})
    </script>


<!--///// HTML code /////-->

    <div class="tpl_7">		
    	<div class="strTools">
            <div class="strPause">Puse</div>
            <div class="strPlay">Play</div>
        </div>		
        <div class="strMain mWrap">
            A fool may ask more questions in an hour than a wise man can answer in seven years
        </div>
    </div>


<!--///// Style for Template  /////-->

    <style>
	.tpl_7 .mWrap { margin:0;}
	.tpl_7 {
		background:transparent;
		border-bottom:3px double rgba(0,0,0,0.1);
		border-top:3px double rgba(0,0,0,0.1);
		line-height:60px;
		
		font-size:26px;
		font-family: 'Poiret One', cursive;
		color:#000;
		text-transform:uppercase;
	}
	.tpl_7 .strTools {
		float:left;
	}
	.tpl_7 .strTools .strPause {
		width:60px;
		height:60px;
		position:relative;
		text-indent:-9999px;
		display:block;
		cursor:pointer;
	}
	.tpl_7 .strTools .strPause:after {
		content:'';
		height:20px;
		width:16px;
		border:5px solid #000;
		border-width:0 5px;
		position:absolute;
		top:50%;
		left:50%;
		margin:-10px 0 0 -8px;
	}
	.tpl_7 .strTools .strPlay {
		width:60px;
		height:60px;
		position:relative;
		text-indent:-9999px;
		display:none;
		cursor:pointer;
	}
	.tpl_7 .strTools .strPlay:after {
		content:'';
		border:10px solid transparent;
		border-left-color:#000;
		border-right:0;
		border-left-width:16px;
		position:absolute;
		top:50%;
		left:50%;
		margin:-10px 0 0 -8px;
	}
	.tpl_7 .strTools .strPlay:active,
	.tpl_7 .strTools .strPause:active {
		background-color:rgba(0,0,0,0.05);
	}
	</style>