Code Monkey home page Code Monkey logo

funnytext.js's Introduction

funnyText.js

preview Create funny and crazy moving texts in a simple way.

Usage

As you can see in the example.html file, you will need to include the JavaScript file jquery.funnyText.js and the css file jquery.funnyText.css of the plugin, as well as jQuery.

###Including files:

<link rel="stylesheet" type="text/css" href="jquery.funnyText.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	
<script type="text/javascript" src="jquery.funnyText.js"></script>

###Required HTML structure The funny text effect will be applied to the text under your custom selector which will be used as well in the initialization.

<div class="mySelector">funnText is applied here</div>

###Initialization All you need to do is call the plugin inside a $(document).ready function using the selector in which the text is contained.

$(document).ready(function() {
	$('.mySelector').funnyText();
});

A more complex initialization with all the options set could look like this:

$(document).ready(function() {
	$('.mySelector').funnyText({
		speed: 700,
		borderColor: 'black',
		activeColor: 'white',
		color: 'black',
		fontSize: '7em',
		direction: 'both'
	});
});

Options

  • speed: (default 700) Defines the speed in which the letters change in miliseconds.

  • borderColor: (default black) Defines the color of the border when the text is active. This option won't take effec when if the browser doesn't support CSS3.

  • activeColor: (default white) Defines the color of the text when it is active.

  • color: (default black) Defines the color of the text on start.

  • fontSize: (default 7em) Defines the size of the font.

  • direction : (default both) Defines the direction of the letters movement. It can be both, horizontal or vertical.

funnytext.js's People

Contributors

alvarotrigo avatar

Watchers

James Cloos avatar Shajeer Ahamed avatar

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.