Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
css-marquee
Advanced tools
Readme
CSSMarquee is a Javascript no dependencies javascript marquee based on CSS animations.
Core features of CSSMarquee are:
CSSMarquee is registered as a package on npm. This is the recomended way of downloading it. You can install the latest version of CSSMarquee and its dependencies with the npm CLI command:
npm install css-marquee
As an alternative you can download from github.
cssMarqueExample.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="cssMarquee.min.js"></script>
<title>CSSMarquee</title>
</head>
<body>
<p id="myMarquee" class="marquee">Default text</p>
<script>
var myMarquee = new CSSMarquee({
id: 'myMarquee',
text: 'CSSMarquee: no dependencies javascript marquee based on CSS animations.',
speed: 20,
pauseOnMouseEnter: true,
playOnMouseLeave: true
});
</script>
</body>
</html>
Where cssMarquee.min.js is the minimized version of cssMarquee.
Available configuration parameters are:
Available methods for CSSMarquee instances are:
Go to test page to see CSSMarquee in action!
If you want to fully customize the CSS animation keep on reading this!
Default animation is marqueeTextIndent {0}s linear infinite. You can customize it with the built in keyframes CSS animations or define a new one. The {0} part is replaced by CSSMarquee with the speed configuration parameter.
CSSMarquee includes 4 keyframes CSS animations in the style.css file:
The definitions of both in the style.css file are:
@keyframes marqueeTextIndent {
0% { text-indent: 100% }
100% { text-indent: var(--marquee-text-size) }
}
@keyframes marqueeTextIndentReverse {
0% { text-indent: var(--marquee-text-size) }
100% { text-indent: 100% }
}
@keyframes marqueeTranslateX {
0% { transform: translateX( 100% ) }
100% { transform: translateX( var(--marquee-text-size) ) }
}
@keyframes marqueeTranslateXReverse {
0% { transform: translateX( var(--marquee-text-size) ) }
100% { transform: translateX( 100% ) }
}
The --marquee-text-size CSS variable is set by CSSMarquee. Its value depends on the length of the text to animate.
Of course, if you are not going to use one of them you do not need to include it in you CSS files.
Another option is to define a new keyframes CSS animation in one of your CSS files and customize the animation option to use it.
FAQs
No dependencies javascript marquee based on CSS animations.
The npm package css-marquee receives a total of 1 weekly downloads. As such, css-marquee popularity was classified as not popular.
We found that css-marquee demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.