Responsive scrolling text

Developer
Ash Durham
Size
2,259 Kb
Views
10,120
  1. Responsive scrolling text Previews
  2. Responsive scrolling text HTML Codes
  3. Responsive scrolling text CSS Codes
  4. Responsive scrolling text JS Codes

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
IQ Test

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
Name
Viewport Media Query example 1
Form fields styled for cross browser
Social Share Button Counter
Radio status lights with gradients
Dynamic video proportion
Interactive Star Rating for forms
Viewport Media Query example 2
Cross Browser Placeholders
Fade test
Knockout Competition Draw Generator
Create amazing love letters 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!