Responsive scrolling text

Developer
Size
2,259 Kb
Views
10,120

How do I make an responsive scrolling text?

Responsive scrolling/marquee text that changes the speed depending on the screen width. Minimum of a 980px width for this example, however media queries could be applied for smaller screens, font sizes made smaller and line-heights halved to handle more text on a small screen.. What is a responsive scrolling text? How do you make a responsive scrolling text? This script and codes were developed by Ash Durham on 05 January 2023, Thursday.

Responsive scrolling text Previews

Responsive scrolling text - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive scrolling text</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="promo-notifications">	<ul> <li>**CURRENT PROMO** Buy 5 and get 1 free ~ Only for a limited time!</li> <li>**CURRENT PROMO** Refer 20 friends and get a gift certificate for $100!</li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive scrolling text - Script Codes CSS Codes

html, body {margin:0; padding: 0; width: 100%;}
#promo-notifications{	background: #F4A8BE;	font-size: 18px; width: 100%; font-family: 'Helvetica-Neue', Helvetica, Arial, sans-serif;
}
#promo-notifications ul{	width: 100%;	height: 35px;	position: relative;	overflow: hidden;
}
#promo-notifications li{	width: 980px;	line-height: 35px; height: 35px;	position: absolute;	top: 0;	left: 100%;	text-align: center;	list-style: none;
}

Responsive scrolling text - Script Codes JS Codes

jQuery(document).ready(function($) { var promoticker = function() { var window_width = window.innerWidth; var speed = 12 * window_width; $('#promo-notifications li:first').animate( {left: '-980px'}, speed, 'linear', function() { $(this).detach().appendTo('#promo-notifications ul').css('left', "100%"); promoticker(); }); }; if ($("#promo-notifications li").length > 1) { promoticker(); }
});
Responsive scrolling text - Script Codes
Responsive scrolling text - Script Codes
Home Page Home
Developer Ash Durham
Username ashdurham
Uploaded January 05, 2023
Rating 3.5
Size 2,259 Kb
Views 10,120
Do you need developer help for Responsive scrolling text?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ash Durham (ashdurham) Script Codes
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!