https://github.com/2dareis2do/ticker-type-text

This is a jQuery Plugin designed to mimic a typewriter or news ticker and iterate through a collection of html
https://github.com/2dareis2do/ticker-type-text

Last synced: 26 days ago
JSON representation

This is a jQuery Plugin designed to mimic a typewriter or news ticker and iterate through a collection of html

• Host: GitHub
• URL: https://github.com/2dareis2do/ticker-type-text
• Owner: 2dareis2do
• License: gpl-2.0
• Created: 2021-03-25T00:58:06.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2023-11-24T00:50:25.000Z (about 1 year ago)
• Last Synced: 2024-04-25T00:03:12.193Z (8 months ago)
• Homepage:
• Size: 338 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# Ticker Type Text

## About

This is a jQuery Plugin designed to mimic a typewriter or news ticker. I looked

for one but did not find one that did quite what I wanted so decided to create

this one.

## Requirements

This has been tested to work with jQuery 2.1.3. or later. Not sure but should

also work with earlier versions.

## Dependencies

https://github.com/2dareis2do/vis

Simple javascript tool to tell if current tab is visible or not.

## Use

This is designed to take a html collection and transform this into ticker type

text output in the browser.

e.g.

### HTML

The collection of strings we want to animate can be extracted from a html

collection.

e.g.

```



  
Your partner for change

  
Your partner for coding

  
Your partner for 

    life

  

  
Your partner for support 



```

In this example I have also used `ttt` as a classname. I will use this to target

the output of my ticker type text.


### CSS

I have included some base styles that can be modified. The main thing here is to

hide the text we are using for a collection.

e.g.

```

.tt {

  display: none;

}

```

### JS

The ticker can be instantiated like so:

```

let animatetext = function(){

  // Assign our HTML collection that we want to iterate to $elements

  let $elements = $(".tt-holder .tt");

  // Set the Ticker Type Text plugin to target the element with the '.ttt' class

  // and also pass the $elements collection as the first parameter.  

  $(".ttt").tickerText($elements, 17, 2, 30, 1, 0.7, 3);

}

$(animatetext) ;

```

## Parameters

### contents

A html collection or array object.

### keep

Integer determining the number of text chars to keep between iterations e.g. 16

### seconds

Integer determining the numer of seconds the animation will take. e.g 5

### speed

Integer of delay between inserting text items in milliseconds defaults to 20

### iterations

Integer for determing number of iterations for the entire collection. 0 denotes

infinite.

### ratio

Float determing the relative value between when the animation starts and when it

ends. This is usually weighted to prevent a large time delay at the end while

also ensuring that there is not a gap between lines. e.g. 0.8

### secondsout

When using the `keep` feature (see above), when set, this parameter allows

configuration over the speed of second and subsequent frames. This can be higher

or lower than that of the first frame.

### dev

boolean - useful for seeing timings for tuning

### pausetarget

string that is passed element to target for trigger e.g. html5 button

### stoptarget

string that is passed element to target for trigger e.g. html5 button

## NPM

This package can is now available on npm

```

npm i ticker-type-text

```