Code Monkey home page Code Monkey logo

typeout.js's Introduction

TypeOut.js

A JavaScript plugin that will take a specified text and render it in an iterative fashion at a predetermined speed. See example below

How do I use it?

You can simply download the script and include/reference it in one of yours projects. Here are 2 ways to implement the script:

  • You can specify a classname on your DOM elements such as, 'type-500'. So when you add this class, you must enter 'type-' followed by any number representing miliseconds '-500.' This particluar classname will iterate through the text on document load at one character per 500 miliseconds(0.5 seconds). You must call the set() method on a Typer instance in order to get the classname seletors working properly..

    let typer = new Typer()
    typer.set()

  • You can create an instance of the Typer class and bind it to events. For example..

    let typer = new Typer()
    typer.start('.example', 500)

Note: In the second implementation above we create an instance of Typer, then we pass a className and number representing miliseconds to the Start() method. Now it will be much easier to bind the execution of code to events such as button clicks or scroll events. Whatever floats your code :)

typeout.js's People

Contributors

makanamakesstuff avatar

Stargazers

avatar

Watchers

James Cloos avatar avatar

typeout.js's Issues

Update Old Code

The current plugin code is really old and needs to be updated and improved

Allow Passing Elements to Start Method

It would be valuable to extend the start method of our plugin to allow Elements as an argument instead of just passing a string selector. This is mainly because we might want to separate the implementation of the plugin from us accessing DOM elements, which would let us have more control over the logical flow of our code. For example, we can select the element from the dom when the page loads and simply pass it to our start method when we need to as opposed to selecting the elements at the time of our method call. This is not necessarily a bad thing, but we would have to do some weird things or alter our plugin code if we wanted to handle a dom element at all before calling the start method.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.