Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ezekielaquino/Marquee3000
Marquees for the new millenium
https://github.com/ezekielaquino/Marquee3000
Last synced: about 2 months ago
JSON representation
Marquees for the new millenium
- Host: GitHub
- URL: https://github.com/ezekielaquino/Marquee3000
- Owner: ezekielaquino
- License: mit
- Created: 2017-02-21T19:03:58.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-05-25T07:54:10.000Z (over 2 years ago)
- Last Synced: 2024-03-15T15:35:34.930Z (6 months ago)
- Language: JavaScript
- Homepage: https://ezekielaquino.com/2019/marquee
- Size: 98.6 KB
- Stars: 432
- Watchers: 9
- Forks: 81
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MARQUEE3000
**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](http://github.com/ezekielaquino/Marquee3G)
# New Version : Important!
Please change how you initialize form Marquee3k() -> Marquee3k.init() !!!
## New in 1.0.6
- fixes bug when reverse scrolling is true
- refresh single marquee instance / all marquees
- access Marquee instances globally
## Features
- ~3kb minified with no dependencies
- Turn any element into a smooth-as-butter marquee
- Text, images++* it'll do it
- Style marquees as usual with CSS– get creative!
- Set speed and direction
- Have a ton without any slowdown
- Responsive!
## Demo
[MARQUEE3000 DEMO MARQUEE3000 DEMO MARQUEE3000 DEMO](https://ezekielaquino.com/2019/marquee)
## Usage
1. Include Marquee3000 in your html file. Download zip or install via `bower install marquee3000` || `npm install marquee3000`
```javascript
const Marquee3k = require('marquee3000');
// or
import Marquee3k from 'marquee3000';
```
```html
```
2. Create an element with a `.marquee3k` class. You can pass different options such as speed, orientation and direction (optional). See below for options.
```html
Some marquee content
```
3. Fill it up with text or images etc. (still finding out what you can do with it)
4. In your js file or `` just call `Marquee3k.init()` and you're all set!
5. To set spacing and other wonderful things, please use css
```css
// Parent container of a .marquee3k element
.diagonal-marquee {
transform: rotate(45deg);
}
.marquee3k__copy {
padding-right: 30px;
box-sizing: border-box;
}
```
### New stuff
#### Refresh
You can refresh (if width of the inner content changes dynamically) by:
```javascript
// Refresh all instances
Marquee3k.refreshAll();
// or, since all marquees are available
// globally, target a specific instance
Marquee3k.refresh(index); // index of marquee
```
#### Pause
You can stop the animation by:
```javascript
// Refresh all instances
Marquee3k.pauseAll();
// or target a specific instance
Marquee3k.pause(index); // index of marquee
```
#### Play
You can start the animation after being paused by:
```javascript
// Refresh all instances
Marquee3k.playAll();
// or target a specific instance
Marquee3k.play(index); // index of marquee
```
#### Toggle
You can toggle the animation by:
```javascript
// Refresh all instances
Marquee3k.toggleAll();
// or target a specific instance
Marquee3k.toggle(index); // index of marquee
```
### Important
If you are using images or custom fonts, initialise Marquee3000 AFTER they have been loaded!
### Options
You can set additional configuration options.
```javascript
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.
### Questions
**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!
## Showcase
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
- [https://stillwater-sparkling.com](https://stillwater-sparkling.com)
- [https://foundation.app/](https://foundation.app/)
- [https://clanupstairs.com/](https://clanupstairs.com/)
- [http://www.indexartbookfair.com/](http://www.indexartbookfair.com/)
- [https://hlebozavod9.ru/](https://hlebozavod9.ru/)
- [https://theface.com](https://theface.com)
- [https://blazetype.eu](https://blazetype.eu)
- [https://ccsparis.com](https://ccsparis.com)
- [https://documenta-fifteen.de/en/](https://documenta-fifteen.de/)
- [https://gt-planar.com/](https://gt-planar.com/)
## Say hi!
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 [email protected] or via @the_ezekiel on Twitter!
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details