liMarquee / Template
№ 3

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=Signika' 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_3">		
        <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_3 .mWrap { margin:0;}
	.tpl_3 {
		position:relative;
		background:#a46498;
		border-bottom:1px solid rgba(255,255,255,0.3);
		border-top:1px solid rgba(0,0,0,0.1);
		line-height:70px;
		font-size:26px;
		font-family: 'Signika', sans-serif;
		color:#fff;
		text-transform:uppercase;
		border-radius:35px;
	}
	
	.tpl_3 .strTools {
		position:absolute;
		top:100%;
		left:50%;
		margin-left:-25px;
		margin-top:-25px;
		width:50px;
		height:50px;
		background:#a46498;
		border-radius:50%;
		overflow:hidden;
		z-index:10;
	}
	.tpl_3 .strTools .strPause {
		width:50px;
		height:50px;
		position:relative;
		text-indent:-9999px;
		display:block;
		cursor:pointer;
	}
	.tpl_3 .strTools .strPause:after {
		content:'';
		height:20px;
		width:16px;
		border:5px solid #fff;
		border-width:0 5px;
		position:absolute;
		top:50%;
		left:50%;
		margin:-10px 0 0 -8px;
	}
	.tpl_3 .strTools .strPlay {
		width:50px;
		height:50px;
		position:relative;
		text-indent:-9999px;
		display:none;
		cursor:pointer;
	}
	.tpl_3 .strTools .strPlay:after {
		content:'';
		border:10px solid transparent;
		border-left-color:#fff;
		border-right:0;
		border-left-width:16px;
		position:absolute;
		top:50%;
		left:50%;
		margin:-10px 0 0 -6px;
	}
	.tpl_3 .strTools .strPlay:active,
	.tpl_3 .strTools .strPause:active {
		background-color:rgba(0,0,0,0.05);
	}
	</style>