Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src= "https://code.jquery.com/jquery-3.5.0.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
</head>
<body>
<div class="marquee">Some text goes here.</div>
<script>
$(function() {
$('.marquee')
.marquee({
//If you wish to always animate using jQuery
allowCss3Support: true
, //works when allowCss3Support is set to true - for full list see http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
css3easing: 'linear'
, //requires jQuery easing plugin. Default is 'linear'
easing: 'linear'
, //pause time before the next animation turn in milliseconds
delayBeforeStart: 1000
, //'left', 'right', 'up' or 'down'
direction: 'left'
, //true or false - should the marquee be duplicated to show an effect of continues flow
duplicated: false
, //speed in milliseconds of the marquee in milliseconds
duration: 5000
, //gap in pixels between the tickers
gap: 20
, //on cycle pause the marquee
pauseOnCycle: false
, //on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
pauseOnHover: false
, //the marquee is visible initially positioned next to the border towards it will be moving
startVisible: false