marquee3000-direction-patch
Advanced tools
Note 16.6.2020
This module is now a human toddler's age! I'm super happy that it has been of use to a lot of people and it's seen in use creatively around some really cool websites on the web in the last years. Apologies if I don't offer support aside from tending to reports related to breaking bugs. I am however thinking of revisiting this module sometime soon (fingers crossed) because 3 years in js land is a millenium.
Marquees for the new millennium ✨
Super smooth and versatile javaScript plugin with no dependencies.
👄
Note: Marquees were a bit neglected, no? There are tons, but they're slow and you can't really do much with them. So much you can do with the inherently strong typographic look of em. So this is me trying to update them for 2017.
A GSAP dependent version is available (WIP): MARQUEE3G
Please change how you initialize form Marquee3k() -> Marquee3k.init() !!!
MARQUEE3000 DEMO MARQUEE3000 DEMO MARQUEE3000 DEMO
Include Marquee3000 in your html file. Download zip or install via bower install marquee3000 || npm install marquee3000
const Marquee3k = require('marquee3000');
// or
import Marquee3k from 'marquee3000';
<script src="marquee3k.js"></script>
Create an element with a .marquee3k class. You can pass different options such as speed, orientation and direction (optional). See below for options.
<div class="marquee3k"
data-speed="0.25" → play around here
data-reverse="bool" → default: R to L / T to B
data-pausable="bool" → Pause marquee on hover>
<!--you can even have inline images,
or any kind of html -->
<h1>Some marquee content</h1>
</div>
Fill it up with text or images etc. (still finding out what you can do with it)
In your js file or <script> just call Marquee3k.init() and you're all set!
To set spacing and other wonderful things, please use css
// Parent container of a .marquee3k element
.diagonal-marquee {
transform: rotate(45deg);
}
.marquee3k__copy {
padding-right: 30px;
box-sizing: border-box;
}
You can refresh (if width of the inner content changes dynamically) by:
// Refresh all instances
Marquee3k.refreshAll();
// or, since all marquees are available
// globally, target a specific instance
Marquee3k.refresh(index); // index of marquee
You can stop the animation by:
// Refresh all instances
Marquee3k.pauseAll();
// or target a specific instance
Marquee3k.pause(index); // index of marquee
You can start the animation after being paused by:
// Refresh all instances
Marquee3k.playAll();
// or target a specific instance
Marquee3k.play(index); // index of marquee
You can toggle the animation by:
// Refresh all instances
Marquee3k.toggleAll();
// or target a specific instance
Marquee3k.toggle(index); // index of marquee
If you are using images or custom fonts, initialise Marquee3000 AFTER they have been loaded!
You can set additional configuration options.
Marquee3k.init({
selector: '.selector-name', // define a custom classname
});
Marquee also adds a is-init selector. You can use this to add and toggle entrance transitions, for example.
Q: But it's slow, I have 150+ of them on the same page
A: If you've got literally hundreds of them on one page, you've got a marquee addiction problem. Contact a internet professional or buy me a beer, I think we'd get along quite well.
Q: Does it work on mobile?
A: Yes it does and it works quite well! If you're going to be rotating things and all that fancy stuff, just make sure to style it with CSS.
Q: Can i make a marquee that's position fixed?
A: Absolutely. You just have to wrap the marquee element inside another
container which gets the position: fixed. Namaste.
Q: Can you make it spin?
A: Umm, sure. Well you can do anything with it really Demo coming soon
Q: I have more questions, what's your support hotline?
A: 1-800-MARQUEE or you can just mention me on twitter (@the_ezekiel)
**Q: the callback does not work?
A: You have to pass in only the name of the function (must be defined in global scope). Still currently a very basic implementation. Suggestions welcome!
Sites using Marquee3000!
If you're using Marquee3k and had fun with it, please consider creating a PR and adding your site into the list <3
The plugin is completely free but I'd love to know if you have used the plugin for something cool! Would love to see what you've made! Drop me a line at ezekielaquino@gmail.com or via @the_ezekiel on Twitter!
This project is licensed under the MIT License - see the LICENSE.md file for details
FAQs
Internet marquees in HD!
The npm package marquee3000-direction-patch receives a total of 2 weekly downloads. As such, marquee3000-direction-patch popularity was classified as not popular.
We found that marquee3000-direction-patch demonstrated a healthy version release cadence and project activity because the last version was released less than 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.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.